Extending native Custom Element
HTML
<script src="http://www.polymer-project.org/platform.js"></script>
<script src="http://www.polymer-project.org/polymer.js"></script>
<script>
(function() {
var XHTMLPrototype = Object.create((HTMLTemplateElement || HTMLElement).prototype);
XHTMLPrototype.createdCallback = function() {
console.info('created', this, this.content, this.content.children.length);
}
XHTMLPrototype.attachedCallback = function() {
console.info('attached', this, this.content, this.content.children.length);
//..
var distributeHere = this.content.querySelector("[is='imported-content']");
var importedContent = document.createElement("span");
importedContent.innerHTML = "Imported content";
distributeHere && distributeHere.parentNode.replaceChild(importedContent, distributeHere);
if(!distributeHere){
alert("Hey! I should have some content.");
}
}
document.register('imported-template', {
prototype: XHTMLPrototype,
extends: "template"
});
})();
</script>
<ul>
<!-- this works -->
<template id="works" is="imported-template" bind="{{ appdata }}">
<li>li: {{username}}
<imported-content></imported-content>
</li>
</template>
</ul>
<template id="fails" bind>
<ul>
<template is="imported-template" bind="{{ appdata }}">
<li>li: {{username}}
<imported-content></imported-content>
</li>
</template>
</ul>
</template>
<script>
document.addEventListener("polymer-ready", function() {
// global for easier debugging and fiddling
model = {
appdata: {
username: "Hello"
},
html: "./partials/basic.html"
};
document.getElementById('works').model = model;
document.getElementById('fails').model = model;
...