Closed octavioturra closed 9 years ago
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>
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>
Hm... Do you have a link to code I can look at or run?
The imports look correct. I'll have to look at this again later.
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!
+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.
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;
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...
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...
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...
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.
<link rel="import" href="elements.html"/>
...<my-application></my-application>