Understanding the Shadow DOM

The Shadow DOM is a native web browser feature that allows you to encapsulate a DOM subtree in a component, in order to isolate it from the rest of the page.

It's thanks to this technology that we can create Web Components: standalone, reusable, and modular HTML components.

Let's see in more detail how this works!

The difference with the DOM

The DOM (Document Object Model) represents the HTML structure of a page. It's a tree made up of nodes (elements, text, attributes...) that can notably be modified with JavaScript.

By default, all HTML elements on a page share the same DOM, and can interact with each other.

For example:

• A stylesheet can target any element, regardless of its position.
• A script can add, modify, or remove any node with document.querySelector().

This can quickly become problematic in a large application: components can pollute each other (side effects, style conflicts, overly general selectors...).

The Shadow DOM: an isolated DOM

The Shadow DOM is a completely isolated DOM subtree. It is attached to a host element (called the shadow host) but invisible from the outside.

The styles and scripts inside a Shadow DOM only apply to it.

This makes it possible to create truly encapsulated components: their HTML, CSS, and logic are internal and protected.

Creating a simple shadow DOM

Here's how to create a shadow DOM, with a few lines of JavaScript:

const host = document.querySelector("#host");
const shadow = host.attachShadow({ mode: "open" });

const span = document.createElement("span");
span.textContent = "I'm in the shadow DOM";

shadow.appendChild(span);

Here, you'll have noticed that the shadow DOM is created in open mode

This means that you can interact with the inside of the shadow DOM, even from the outside.

If you want the logic and elements to not be accessible from the outside, you can create it in close mode, but this involves a few subtleties.

Already used by browsers

The Shadow DOM has been used internally by browsers for a long time, to create complex built-in HTML components.

For example, the <video> element contains a player with buttons, a progress bar, etc. All these elements are encapsulated in a Shadow DOM, and therefore inaccessible via global CSS or querySelector().

Shadow DOM vs Virtual DOM

Shadow DOM is sometimes confused with Virtual DOM, but these are two very different things:

• The Shadow DOM is a native browser feature for encapsulating DOM.
• The Virtual DOM, used by React (and Vue), is a copy of the DOM in memory, used to optimize interface updates.

To better understand the Virtual DOM, check out our dedicated article.

Creating your own Web Components

The main purpose of the shadow DOM is to be able to create "Web Components": reusable, configurable components, whose logic and style are independent of the rest of the web page.

If you want to learn how to create a Web Component from scratch, you can follow our step-by-step article: https://code-garage.com/blog/apprendre-a-creer-un-web-component-basique