Toggle Button Web Component

Toggle Button Web Component

HTML

<template>
  <div></div>
</template>

<sp-div val="Hello"></sp-div>
<sp-div val="Hello"></sp-div>
<sp-div val="Hello"></sp-div>
<sp-div val="Hello"></sp-div>
<sp-div val="Hello"></sp-div>
<sp-div val="Hello"></sp-div>
<sp-div val="Hello"></sp-div>
<sp-div val="Hello"></sp-div>
<sp-div val="Hello"></sp-div>

JavaScript

var startTime = performance.now();
var tmpl = document.querySelector('template');
var root;
var SpDivProto = Object.create(HTMLElement.prototype);
SpDivProto.createdCallback = function() {
  console.log('createdCallback invoked');
  root = this.createShadowRoot();
  console.log('tmpl.content', tmpl.content);
  root.appendChild(document.importNode(tmpl.content, true));
};
SpDivProto.attachedCallback = function() {
  console.log('attachedCallback invoked');
  var divElement = root.querySelector('div');
  divElement.textContent = this.getAttribute('val');
};
document.registerElement('sp-div', {
  prototype: SpDivProto
});
document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed", performance.now() - startTime);
});