If you liked this article, listen to Dialexa’s VP of Software Engineering, Andrew Turner, on Custom Made talk technology reliability and security and how in today’s current landscape CIOs won’t get promoted if everything works. But they will get fired if anything doesn’t: Listen to all episodes of Custom Made for insights and perspectives from industry disruptors and technology leaders.
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.
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.
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.
<script> var host = document.querySelector(' myCustomTag '); var root = host.createShadowRoot(); root.textContent = 'Hello Shadow DOM World'; </script>
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.
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.