Web component demo

vanilla-web-component.html

<!-- In index.html: <link rel="import" href="components/list-item.html"> -->

<template>

    <style>

    </style>

    <div>Web component, right there</div>

</template>

<script>
    (function (window, document) {

        // importer = index.html
        var importer = document;

        // Refers to the "importee", which is src/list-item.html
        var thisDoc = (importer._currentScript || importer.currentScript).ownerDocument;

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

        // Creates an object based in the HTML Element prototype
        var ListItemElementPrototype = Object.create(HTMLElement.prototype);

        // Fires when an instance of the element is created
        ListItemElementPrototype.createdCallback = function () {

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

            // Adds a template clone into shadow root
            var clone = importer.importNode(template, true);
            shadowRoot.appendChild(clone);
        };

        // Registers <list-item> in the main document
        window.MyElement = importer.registerElement('list-item', {
            prototype: ListItemElementPrototype
        });
    })(window, document);
</script>