Don't work inside another element

[octavioturra]

I have my index.html, but i've put an element that wraps my application.

Then, inside my element, I've put app-router, so, it haven't been worked.

index.html

<link rel="import" href="elements.html"/> ... <my-application></my-application>

elements.html

<link rel="import" href="my-application.html">`
<link rel="import" href="bower_components/app-router/app-router.html">`

my-application.html

<polymer-element name="my-application">
  <template>
    <app-router>
      <app-route template path="*">
        <template>
           <script>alert('Welcome');</script>
        </template>
      </app-route>
    <app-router>
  <template>
  <script>
    ...
  </script>
<polymer-element>

[erikringsmuth]

I tried this and thought it was a bug at first but then I realized I forgot to import polymer. Doh! It worked once I added all the imports.

I'd also suggest declaring the polymer and app-router imports in my-application.html. They don't need to be in the same file that uses them but if they are you don't have to worry about importing them somewhere else. HTML Imports also de-dupes imports so it won't import polymer multiple times if you declare the import in every custom element.

index.html

<script src="/bower_components/platform/platform.js"></script>
<link rel="import" href="my-application.html"/>
...
<my-application></my-application>

my-application.html

<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/app-router/app-router.html">

<polymer-element name="my-application">
  <template>
    <app-router>
      <app-route template path="*">
        <template>
           <script>alert('Welcome');</script>
        </template>
      </app-route>
    <app-router>
  <template>
  <script>
    ...
  </script>
<polymer-element>

[octavioturra]

I've tried what you told me, but still doesn't work.

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/app-router/app-router.html">

<polymer-element name="my-application" attributes="">
    <template>
      <app-router>
        <app-route template path="*">
          <template>
            <script>
              alert('Welcome');
            </script>
          </template>
        </app-route>
      </app-router>
    </template>
</polymer-element>

[erikringsmuth]

Hm... Do you have a link to code I can look at or run?

[octavioturra]

Sure

https://github.com/projetopet/petpatinhas

[erikringsmuth]

The imports look correct. I'll have to look at this again later.

[erikringsmuth]

I'm baffled on this one. I see the problem in your code but I can't tell what is causing it. It looks like the inline template is empty when everything gets loaded. Something really weird is happening here. Phantom templates!

[cdion]

+1 I've encountered the same behaviour with my own elements, and I'm baffled as well. I created a minimal test-case that illustrates this behaviour, and posted a question on stackoverflow: https://stackoverflow.com/questions/26227449/polymer-custom-element-with-template-as-content. Hopefully answers there will help you fix this defect.

[erikringsmuth]

Thanks for the StackOverflow question! That's definitely the problem we're seeing here. I'm really hoping there's a good answer because I'm pretty sure this solution is Polymer, not native DOM or the polyfill.

template.setAttribute('bind', '');
template.model = null;

[cdion]

I haven't tried that answer yet, but in the meantime, I found this: https://github.com/Polymer/docs/issues/43

And I tried using that method, and it returned the template contents! I bet you can do the same. Sorry I don't have time for a PR...

[erikringsmuth]

Cool. Looks like template.createInstance() works. http://jsbin.com/sazaf/6/edit?html,output

Now I just need to find out if that's polyfill or Polymer...

[erikringsmuth]

It turns out the template spec is weird here and I can't fix this natively. I'm "fixing" it by using template.createInstance() when it's available and falling back to document.importNode(). Maybe we'll get another native template import method in the future...