Sunday, 31 August 2014

Shadow DOM and Templates in HTML

While I was looking into the security aspects of HTML form element, I came across a term called shadow DOM. I found it interesting and searched for more details. The information was more interesting. I thought of sharing the same with you before I forget. :)



First save this code and open in Chrome browser (at the time of writing Firefox was not supporting this).

<template id="boxTemplate">
 <style>
  .container {
    border: 2px solid brown;
    border-radius: 1em;
    background: red;
    font-size: 20pt;
    width: 12em;
    height: 7em;
    text-align: center;
  }
  .boilerplate {
    color: white;
    font-family: sans-serif;
    padding: 0.5em;
  }
 </style>
 <div class="container">
    <div class="boilerplate">
      Box Widget by <content></content>
    </div>
 </div>
</template>

<div>
 <h2>Example for Shadow DOM</h2>
 <div id="box">appu</div>
 <p>
  <label for="userName">User name:</label>
  <input name="userName" value="Sasi">
  <button onclick="updateClicked('#box', 'input[name=userName]');">Update</button>
 </p>
</div>
<script>
 function updateClicked(nameTagSelector, textBoxSelector) {
    var text = document.querySelector(textBoxSelector);
    document.querySelector(nameTagSelector).textContent = text.value;
    text.value = '';
    text.focus();
 }
</script>
<script>
 (function () {
    if (!window.HTMLTemplateElement ||
        !HTMLElement.prototype.createShadowRoot) {
      alert('Browser not supported');
      return;
    }
    var shadow = document.querySelector('#box').createShadowRoot();
    var template = document.querySelector('#boxTemplate');
    shadow.appendChild(template.content);
    template.remove();
 })();
</script>
</div>

<style>
 #login div {
  background-color: yellow;
 }

</style>

You will see following in your screen.


If you enter any value for user name and click update, you can see the content updated in red container.

Is this interesting?

You are correct. You may not find it interesting until you start inspecting the code of the red container. If you do that you will see the following.




You can see that except the content, everything else is wrapped in a shadow-root. You can also note that the additional styles that you have given (#login div) is not reflected in the DOM.

Yes, this is called Shadow rooting of HTML DOM. It is an encapsulated DOM which is excluded from parent DOM. If you doubt this, open console and enter following statement.
It will display only the content of DIV element with id "box". The body of this div is populated with the contents of a template. The shadow root DOM will not be affected by style definitions outside the template.

Any Benefits?

Yes, there are. First of all, your presentation is hidden. If you remove your template, there is no way to identify the presentation content from JavaScript. Currently Chrome displays the shadow DOM while inspect element. Other benefit is the clear separation of content and presentation. This gives you immense power to implement template pattern in your application. And of-course, changing the presentation doesn't affect your code!

I love this feature. Looking forward to get the implemented in other browsers as well.





No comments:

Post a Comment