hello-world.html

<!-- Imports x-tag -->
<script src="../x-tag-core/src/core.js"></script>

<!-- 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 = document._currentScript.ownerDocument;

    // Gets content from <template>
    var template = thisDoc.querySelector('template').content;

    xtag.register('hello-world', {
        lifecycle: {
            created: function() {
                // Caches <strong> DOM query
                this.strong = template.querySelector('strong');

                // Creates the shadow root
                this.shadowRoot = this.createShadowRoot();

                this.uiSetWho();
            },
            attributeChanged: function() {
                this.uiSetWho();
            }
        },
        accessors: {
            who: {
                attribute: {},
                get: function(){
                    return this.getAttribute('who') || "World"
                },
                set: function(value){
                    this.xtag.data.who = value;
                }
            }
        },
        methods: {
            uiSetWho: function() {
                // Sets "who" value into <strong>
                this.strong.textContent = this.who;

                // Removes shadow root content
                this.shadowRoot.innerHTML = '';

                // Adds a template clone into shadow root
                var clone = thatDoc.importNode(template, true);
                this.shadowRoot.appendChild(clone);
            }
        }
    });
})(window, document);
</script>