HTMLElement.prototype and Shadow DOM

In this example, we'll look at the use of HTMLElement.prototype extension which is used to define a custom tag.

by nilloc

HTML

<modkit-window title="hello modkit world">
<modkit-container rows="n" columns="1"><modkit-container rows="1" columns="1" style="width:100px;height:100px;background-color:#baaf1e;">hi ed</modkit-container><modkit-container rows="1" columns="1" style="width:100px;height:100px;background-color:#c07712;">hi collin</modkit-container><modkit-container rows="1" columns="1" style="width:100px;height:100px;background-color:green;">hi modkit</modkit-container></modkit-container>
</modkit-window>

JavaScript

(function() {


  var modkitWindowPrototype = Object.create(HTMLElement.prototype);
  modkitWindowPrototype.createdCallback = function() {
    document.title = this.attributes["title"] ? this.attributes["title"].value : "";

    

    var shadowRoot = this.createShadowRoot();
    var content = this.innerHTML;
    shadowRoot.innerHTML = '<div>' + content + '</div>';
    this.addEventListener('click', function(e) {
      alert('You clicked ' + shadowRoot.innerHTML);
    });
  };

  document.registerElement('modkit-window', {
    prototype: modkitWindowPrototype
  });



  var modkitContainerPrototype = Object.create(HTMLElement.prototype);
  modkitContainerPrototype.createdCallback = function() {
    var rows = this.attributes["rows"].value;
    var columns = this.attributes["columns"].value;
    var style = "";
    if( rows=="1" && columns == "n" ){
         style += "display:-webkit-flex;display:flex;flex-direction:column;-webkit-flex-direction:column;";
    }
    if( columns=="1" && rows == "n" ){
         style += "display:-webkit-flex;display:flex;flex-direction:row;-webkit-flex-direction:row;";
    }
    if( columns=="1" && rows == "1" ){
         //what style should we add to shadow root to make this work?
    }
    var shadowRoot = this.createShadowRoot();
    var content = this.innerHTML;
    shadowRoot.innerHTML = '<div style="'+style+'">' + content + '</div>';
    
  };

  document.registerElement('modkit-container', {
    prototype: modkitContainerPrototype
  });

})();