Introduction to Shadow DOM

This guide shows you what is shadow DOM and how to use it with a simple example.

The CSS Styles are global in scope. The styles affect the entire web site, irrespective of where they are placed in the page. The global scoped CSS rules has few advantageous. For Example you can set the font of the entire web site at one place. But it also makes it easier to break the site. The CSS rules might target unwanted elements or clash with other CSS selectors. Similarly the JavaScript may also accidentally modify unintended parts of the app.

The Shadow DOM solves the above problem, by creating a encapsulated dom tree within the parent dom tree.

What is Shadow DOM

The Shadow DOM is a scoped sub-tree of DOM. It is attached to a element (shadow host) of the DOM tree, but do not appear as child nodes of that element.

How Shadow DOM Work

To understand how Shadow DOM Work, let us build a simple example

Consider the following HTML. We have an h1 and p elements. The p element style is defined under the head section.

The Browser creates a Document Object Model or DOM of the page.when it loads the web page as shown below. As expected the p element colored orange.

Now, let us add the following HTML content.

The style {color: blue;} is applied to the element p inside the div element, but it also affects the p element outside the div element. i.e because styles are global in scope. It affects the entire document irrespective of where it is appears in document.

Shadow DOM Example

Now, let us add shadow dom to the above HTML. But before that let us enable shadow dom in chrome. Internet explorer & edge not yet support shadow dom.

Enabling Shadow DOM in Chrome

To enable shadow DOM chrome browser. press Ctrl+Shift+I to open the chrome developer tools. On the top right corner, you will find 3 vertical dots as shown in the image below. Click on settings and select the preference tab as shown in the next image. Here you will find Show user agent shadow DOM checkbox under the Elements section. Checking this option enables the shadow dom in chrome.

Now let us add the content using the Shadow dom.

First, we added a div element in the with the id shadowhost. This is where the our shadow DOM will be attached. This element is called Shadow host.

Next, in the JavaScript code, get the reference to the shadowhost element

Then, we attach the Shadow DOM to the shadowhost element by invoking the attachShadow method. The attachShadow method returns the Shadow Root

Next, create a div element and add the content

Finally, attach the div element to the shadowRoot

As we seen from the above example, any styles applied inside the shadow DOM is scoped to the shadow root and does not spill out to the other areas of the DOM. Similarly, styles applied on the parent also does not affect the elements in the Shadow DOM.

Terminology

Shadow Host

The host or shadow host is a element to which the shadow dom gets attached. It is part of the DOM tree and not part of the shadow dom. The host can access its shadow property using the shadowRoot method.

The host can have shadow dom attached to it and still have child nodes in the dom tree.

Shadow Root

The root node of the shadow dom. The shadow root gets attached to the shadow host.

Shadow Tree

All the elements that go into the Shadow Root, which is scoped from outside world, is called Shadow Tree

Shadow Boundary

The boundary between the main DOM and shadow DOM.

The following image shows how the DOM tree of the above example app looks like. The shadow host is part of main DOM tree. The shadow DOM is attached to the main DOM at Shadow host element.

Shadow DOM Vs Iframes

Shadow DOM does what Iframe (Inline Frame) already doing. but does it gracefully

The IFrame is heavy. It inserts an entire HTML document into another HTML document. The shadow dom inserts only the minimal HTML

The shadow DOM Provides API to interact with the dom. You can change the style of the contents of shadow dom. The main dom can listen to the events from the shadow dom. These things are not easily possible with the IFrame.

Summary

This tutorial provided a brief introduction to shadow dom and how to create them. We also showed how shadow dom encapsulates the styles from the main dom. The shadow dom is part of the new web components standard.

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top