template – Ugly Duckling Blog

Import custom HTML element with shadow DOM


<!-- importing document -->
<link rel="import" href="my-element.html">


<!-- my-element.html -->
<template>
    <!--
    HTML, JavaScript, CSS here will not be accessible from importing document
    -->
</template>

<script>
(function() {
    var component = document.currentScript.ownerDocument;
    var tpl = component.querySelector('template');
    var MyProto = Object.create(HTMLElement.prototype);

    MyProto.createdCallback = function() {
        this.root = this.createShadowRoot();
        this.root.appendChild(document.importNode(tpl.content, true));
    };

    document.registerElement('my-element', {
        prototype: MyProto
    });
})();
</script>

<!--

HTML, JavaScript, CSS here will not be accessible from importing document

-->

</template>

(function() {

var component = document.currentScript.ownerDocument;

var tpl = component.querySelector('template');

var MyProto = Object.create(HTMLElement.prototype);

MyProto.createdCallback = function() {

this.root = this.createShadowRoot();

this.root.appendChild(document.importNode(tpl.content, true));

};

document.registerElement('my-element', {

prototype: MyProto

});

})();

</script>

Import custom HTML element with shadow DOM

Recent Comments

Search

Recent Posts

Tags

Alex MacCaw

Recent RFCs

Chris Lowis

Meta

Pages

Import custom HTML element with shadow DOM

Recent Comments

Search

Recent Posts

Tags

Alex MacCaw

Recent RFCs

Chris Lowis

Meta

Pages

Social