Web projects have grown ever more complex in recent years. Today, many web pages are written in an idio­syn­crat­ic, com­plic­ated mixture of HTML, CSS, and JavaS­cript. They also include more embedded content (widgets, images, videos, etc.) from outside sources such as social networks, streaming platforms, or content delivery networks. If you don’t want to use iFrame to integrate this third-party content, shadow DOM is an excellent al­tern­at­ive.

In this article, we’ll explain what this sublevel of the Document Object Model (DOM) is, describe other scenarios it can be used for, and show you how to implement it on your own website.

What is shadow DOM?

Shadow DOM is a sublevel of the standard Document Object Model (DOM) and one of the four core elements of the Web Com­pon­ents suite stand­ard­ised by the W3C con­sor­ti­um in 2012. Like a regular DOM, a shadow DOM is auto­mat­ic­ally generated from the HTML code by most popular browsers. However, this type of DOM doesn’t apply to the entire web project, only to the project component(s) expressed within it. In addition, shadow DOMs separate the elements they contain from any default styling and struc­tur­ing in­struc­tions that apply across projects, such as certain CSS state­ments. In simple terms, shadow DOMs are self-contained, en­cap­su­lated blocks of code within a regular DOM that have their own scope.

Note

"Model" isn’t the most accurate term for DOM or shadow DOM. Strictly speaking, both are in­ter­faces for data access. The un­der­ly­ing object model is only relevant for the validity of these in­ter­faces.

How are shadow DOMs struc­tured?

Shadow DOMs allow you to use any number of shadow trees in addition to the regular document tree, which sum­mar­ises the DOM structure of the entire project. Each of these trees has a root node called the shadow root and contains its own elements and styling. The trees are always assigned to a specific element from the parent document tree or from another shadow tree. In both cases, this node is called the shadow host. The border between the regular DOM and the shadow DOM is called the shadow boundary.

Image: Diagram of a shadow DOM
The content of a shadow tree is not affected by outside content, nor does it have any effect on outside content.

How exactly do you use or implement shadow DOMs?

You don’t need to install or integrate any ad­di­tion­al software to use the shadow DOM interface in a web project. Tech­nic­ally speaking, all you’re doing is creating a subtree in the source code. That means you can implement a new shadow DOM at any time via the HTML document of your web ap­plic­a­tion. The shadow DOM is rendered later, together with the complete parent DOM, so no further steps are needed.

The following example il­lus­trates how easy it is to integrate hidden, en­cap­su­lated DOM child nodes using simple JavaS­cript. In this example, a shadow DOM is added to the HTML document with a <p> element, including unique styling in­struc­tions:

<html>
<head></head>
<body>
<p id="hostElement"></p>
<script>
    // Create the shadow DOM for the shadow host:
    var shadow = document.querySelector(‘#hostElement’).createShadowRoot();
    // Create an HTML element in the shadow DOM:
    shadow.innerHTML = ‘<p>This text is in the Shadow DOM.</p>‘;
    // Style the HTML element in the shadow DOM:
    shadow.innerHTML += ‘<style>p { color: red; }</style>‘;
</script>
</body>
</html>

The script for im­ple­ment­ing the shadow DOM consists of three com­pon­ents: First, the hidden sub­doc­u­ment is generated, then a simple text element is added to it, and finally, the color of this text is modified using the third component (in this case: “red”).

Note

In order for a shadow DOM to be accessed from the outside using JavaS­cript, you also have to set the status of the method element.shad­ow­Root to “open.” If you set the status to “closed” instead, access to the hidden DOM is denied.

What are ideal ap­plic­a­tions for shadow DOM?

Shadow DOMs are an excellent way of keeping certain elements of your web project separate from the rest of the site without having to use special tech­no­lo­gies such as iFrames. In addition, most popular browsers now fully support shadow DOMS as well as all other tech­no­lo­gies of the modern Web Com­pon­ents suite. So, if you want to design a certain component or a certain area of your website in­de­pend­ently of document-wide styling in­struc­tions and struc­tures, hidden DOMs are an excellent, easy-to-implement choice, es­pe­cially for complex projects.

However, not all HTML elements can be turned into a shadow host. For example, if you use this tech­no­logy on an image file, an error will occur and you’ll get an error message. Shadow DOMs are limited to the following HTML com­pon­ents:

  • article
  • aside
  • block­quote
  • body
  • div
  • footer
  • h1, h2, h3, h4, h5, h6
  • header
  • main
  • nav
  • p
  • section
  • span
7wSOoG_REKc.jpg To display this video, third-party cookies are required. You can access and change your cookie settings here.
Go to Main Menu