html5 hello-world.html

hello-world.html

<!-- Defines element markup -->
<template>
    <p>Hello <strong></strong> :)</p>
</template>

<script>
(function(window, document, undefined) {
    // Refers to the "importer", which is index.html
    var thatDoc = document;
    // Refers to the "importee", which is src/hello-world.html
    var thisDoc =  (thatDoc._currentScript || thatDoc.currentScript).ownerDocument;
    // Gets content from <template>
    var template = thisDoc.querySelector('template').content;
    // Creates an object based in the HTML Element prototype
    var MyElementProto = Object.create(HTMLElement.prototype);
    // Creates the "who" attribute and sets a default value
    MyElementProto.who = 'World';
    // Fires when an instance of the element is created
    MyElementProto.createdCallback = function() {
        // Creates the shadow root
        var shadowRoot = this.createShadowRoot();
        // Adds a template clone into shadow root
        var clone = thatDoc.importNode(template, true);
        shadowRoot.appendChild(clone);
        // Caches <strong> DOM query
        this.strong = shadowRoot.querySelector('strong');
        // Checks if the "who" attribute has been overwritten
        if (this.hasAttribute('who')) {
            var who = this.getAttribute('who');
            this.setWho(who);
        }
        else {
            this.setWho(this.who);
        }
    };
    // Fires when an attribute was added, removed, or updated
    MyElementProto.attributeChangedCallback = function(attr, oldVal, newVal) {
        if (attr === 'who') {
            this.setWho(newVal);
        }
    };
    // Sets new value to "who" attribute
    MyElementProto.setWho = function(val) {
        this.who = val;
        // Sets "who" value into <strong>
        this.strong.textContent = this.who;
    };
    // Registers <hello-world> in the main document
    window.MyElement = thatDoc.registerElement('hello-world', {
        prototype: MyElementProto
    });
})(window, document);
</script>