Web component

by jacobwsmith

HTML

<template id="my-component-template">
    <span>Basic native web component. Inspect me!</span>
</template>
<my-component></my-component>

JavaScript

var MyComponent = Object.create(HTMLElement.prototype);
MyComponent.createdCallback = function(){
    const template = document.querySelector('#my-component-template');
    const shadowRoot = this.createShadowRoot();
    const clone = template.content.cloneNode(true);
    shadowRoot.appendChild(clone);
};

document.registerElement('my-component', {prototype: MyComponent});