Created by Mark Bennett / @markbennett
<script>
var p = Object.create(HTMLElement.prototype);
p.createdCallback = function() { this.innerHTML = "Kittens go here!"; };
p.attachedCallback = function() { console.log("Inserting into doc."); };
p.detachedCallback = function() { console.log("Removing from doc."); };
p.attributeChangedCallback = function() { console.log("attribute changed", arguments); };
var custom_elem = document.registerElement('x-kitten-1', { prototype: p });
</script>
<template id="kitten-2-template">
</template>
<script>
var p = Object.create(HTMLElement.prototype);
p.createdCallback = function() {
var template = document.querySelector("#kitten-2-template");
var content = template.content.cloneNode(true);
this.appendChild(content);
};
var custom_elem =
document.registerElement('x-kitten-2', { prototype: p });
</script>
<template id="kitten-2-template">
<style>
.kitten-img { width: 50%; }
</style>
<img src="imgs/6-day-kitten.png" class="kitten-img"
credit="http://elvira1990.deviantart.com/art/sleeping-6-days-old-kitten-377444631" />
</template>
<script id="example1">
var p = Object.create(HTMLElement.prototype);
p.createdCallback = function() {
var template = document.querySelector("#kitten-2-template");
var content = document.importNode(template.content, true);
var shadow_root = this.createShadowRoot();
shadow_root.appendChild(content);
};
var custom_elem =
document.registerElement('x-kitten-3', { prototype: p });
</script>
A cross broswer "prolyfill" for web components
Include platform.js
Imports are synchronous and blocking by default
Imports add one (or more) HTTP request
Missing data binding
Missing inter-component communicating