component

gistfile1.txt

<!-- hello-flomp component -->

<link rel="import" href="hello-gallery.html"/> <!-- Oo, we're using a subcomponent -->

<template id="hello_flomp"> <!-- Look a designer friendly template -->

<style> <!-- With encapsulated styles.... -->
hello-flomp > div {
        border : 2px solid #000;
}
</style>

<div>
    <span>
      This is a FLOMP
    </span>
    <hello-gallery></hello-gallery>
</div>
</template>

<script> <!-- And the script to run it~ -->
    (function() {
        var component_id = 'hello_flomp';
        var component_name = 'hello-flomp';
        console.log('Loading component: ' + component_name);
        var owner = document._currentScript.ownerDocument;
var tmpl = owner.getElementById(component_id);
var prototype = Object.create(HTMLElement.prototype);
prototype.createdCallback = function () {
    var root = this.createShadowRoot();
    var clone = document.importNode(tmpl.content, true)
    root.appendChild(clone);
};
document.registerElement(component_name, {
    prototype: prototype
});
    })();
</script>