For a very long time there has been a fundamental flaw in the document tree (DOM tree) used by HTML and JavaScript, and this flaw has been the root of many frustrations to developers. Unlike programing languages that have been used on the backend of applications the traditional DOM lacked encapsulation.

So what does this mean, encapsulation is a fundamental part of Object-Oriented Programming and allows programmers to build objects that hide data or functions from the outside world. The main advantage of this is that it protects objects from being manipulated by outside forces resulting in states or conditions that are invalid or inconsistent. You may ask yourself why encapsulation would be important in the DOM tree. The main advantage is the ability to share an object, or rather a component, and protect the component from being manipulated by HTML, CSS, and JavaScript. Shadow DOM was introduced to solve the encapsulation issue in the DOM tree.

What is the Shadow DOM?

Shadow DOM is a standard introduced by WC3 to provide what is called a shadow boundary between the traditional DOM and a new Shadow DOM. Because, DOM Queries and CSS rules cannot cross this new boundary it provides a new level of encapsulation that was not present before. With the Shadow DOM comes an important element and node that are added to the DOM element, the shadow host, and shadow root.

  • Shadow Host: is a DOM element that is hosting the Shadow DOM sub-tree and also contains the Shadow Root. The contents of this node is not rendered, but rather gets overlaid by the Shadow Root in a process called Composition.
  • Shadow Root: This is the root of the DOM sub-tree that contains the shadow DOM sub-trees. The child nodes of this root are traditional DOM nodes. However, they are not accessible to the outside world and are what creates this new shadow boundary.

To further illustrate the Shadow DOM concept refer to the following figure.

figure1.png

How it Works

Initially when a page is rendered both the DOM and the Shadow DOM elements are a single tree. For the most part, the DOM is rendered, as it normally would be, however when a Shadow Host is encountered the browser ignores the children and replaces it with the children of the Shadow Root. The flowing figure represents how the DOM is rendered during the Composition of the shadow host with the shadow root.           

figure2.png

Shadow Dom “Hello World” Example

Now that you understand what is going on let's look at a simple “Hello World” code example.

 First, we will start with a very simple HTML element that we can attach some shadow DOM to.

     <myCustomTag>Hello, world!</myCustomTag>

Next, we can add some JavaScript that will create a Shadow Host on the HTML element, and then also attach a Shadow Host to the host. 


     <script>
        var host = document.querySelector(' myCustomTag ');
        var root = host.createShadowRoot();
        root.textContent = 'Hello Shadow DOM World';
      </script>

Now when the page is rendered it would display 'Hello Shadow DOM World', rather than 'Hello, world!'. Now if any JavaScript on the page asked for the div’s text context it would not be 'Hello Shadow DOM World', but rather 'Hello, world!' due to the shadow boundary. 

As you can tell, this is extremely useful if you want to have custom HTML elements that can be utilized throughout the application. Also, it would give you the ability to build custom elements that could then be used in multiple projects without the worry of having the custom attribute changed in any way.

Final Thoughts

As you may have guessed the Shadow DOM concept has several interesting uses. It can be used either by itself or in conjunction with standard Web Components, which is likely the most dominant way it will be utilized. It allows developers to develop custom widgets and components that can be reused over and over without the fear that outside forces will be able to manipulate them.

In addition, many of the new frameworks are embracing the Shadow DOM concept to simplify how developers are building modern web pages. Both Angular 2.0 and Ember 2.0, among several others, are utilizing the Shadow Dom, or an emulation of it, to refine and enhance the front-end development process. As Web Components and the Shadow DOM, in general, become more accepted, we are likely going to see it used in new and interesting ways.

To learn more about how Dialexa approaches innovation for our customers, including our software development process, click the image below.

Get Farther Faster with a free copy of our Guide to New Product Development Process for Software
 

Click to Comment