WebComponentsDemo

HTML Templates Example

HTML Templates Example

Shadow DOM example - Name tag

Without shadow root

With shadow root

            var shadow = document.querySelector('#nameTag').createShadowRoot();
            var template = document.querySelector('#nameTagTemplate');
            document.querySelector('#nameTag').textContent = 'Bob';
            var clone = document.importNode(template.content, true);
            shadow.appendChild(clone);
        

Shadow DOM example - With shadow root

Custom Elements

• Custom elements = HTML Templates + Shadow DOM
• It lets you create new html elements.
• <name-tag name="Bob"></name-tag>

Custom Elements - Example

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

NameTagPrototype.attributeChangedCallback = function (attributeName, oldVal, newVal) {

    if (attributeName == "name") {
        this.shadowRoot.querySelector(".name").textContent = newVal;
    }
};

NameTagPrototype.createdCallback = function () {
    var t = document.querySelector('#nameTagTemplate');
    var clone = document.importNode(t.content, true);
    clone.querySelector(".name").textContent = this.getAttribute("name") || "";
    this.createShadowRoot().appendChild(clone);
};

var NameTagPrototype = document.registerElement('name-tag', {
    prototype: NameTagPrototype
});
        

Custom element example - Name tag

HTML Imports

Imports external resources such as custom elements and templates

Browser support

Polyfill libraries exists that makes it available in other browsers

e.g. Polymer and X-tags