What is shadow DOM?

Question

When I was reading about some Javascript frameworks, for example the React, I read the expression a few times shadow gift in some articles.

It even seems that it is possible, in Chrome console settings, to enable this Shadow Dom.

But what is Shadow DOM and what’s the point?

Has something to do only with the Framework mentioned above, or not?

Answer 1

Shadow DOM

The shadow gift, or shadow Tree, is an HTML node tree just like any other tree we already know (a light Tree), but which is attached to a specific element of light Tree, not the document itself. That is, a new context is created of us in which all nodes belonging to the shadow Tree do not interact directly with document nodes. This rule is also valid for CSS (apparently Javascript is not encapsulated), that is, you can define rules in CSS using ids and classes normally, that such rules will apply only to the context of shadow Tree and shall not apply to the document itself.

See the example below. A shadow Tree from the element template and attached to the element #nametag. Note that the style settings of shadow Tree shall not apply to the external elements of light Tree.

The class .Outer is defined both for an element in light Tree as an element in the shadow Tree, however, due to the encapsulation of the style definitions, only the element of the shadow Tree is stylized.

var shadow = document.querySelector('#nameTag').createShadowRoot();
var template = document.querySelector('#nameTagTemplate');
var clone = document.importNode(template.content, true);
shadow.appendChild(clone);

<div class="outer">Stack Overflow em Português</div>
<div id="nameTag">Bob</div>

<template id="nameTagTemplate">
  <style>
  .outer { border: 2px solid brown; }
  </style>
  
  <div class="outer">
    <span class="boilerplate">
      Olá! Meu nome é
    </span>
    <span class="name">
      Bob
    </span>
  </div>
</template>

The concept of shadow gift is part of the four Web Component, along with HTML templates, custom elements and imports of HTML.

The other three may other questions similar to this one here at Sopt, I believe.

Terminology

The composition of Shadow DOM introduces several new basic concepts into the development of the Web. Before we go into detail, let’s standardize terminology to speak the same language.

Light DOM

The markup written by a user of its component. This DOM resides outside the DOM shadow of the component. It consists of the real children of the element.

<button is="better-button">
  <!-- the image and span are better-button's light DOM -->
  <img src="gear.svg" slot="icon">
  <span>Settings</span>
</button>

Shadow DOM

The GIFT written by the component author. The Shadow DOM is local to the component and defines its internal structure and CSS with scope, as well as encapsulates the details of its implementation. In addition, it defines how to render consumer-created markup of your component.

#shadow-root
  <style>...</style>
  <slot name="icon"></slot>
  <span id="wrapper">
    <slot>Button</slot>
  </span>

Flat tree of the DOM (Plane Tree)

The result of the distribution of light dom user by browser on shadow gift, rendering the final product. The flat tree is what you will finally see in Devtools and what will be rendered on the page.

<button is="better-button">
  #shadow-root
    <style>...</style>
    <slot name="icon">
      <img src="gear.svg" slot="icon">
    </slot>
    <slot>
      <span>Settings</span>
    </slot>
</button>

---

Can I Use (Can I Use?)

Shadow DOM v0

Shadow DOM v1

Learn more about browser compatibility and polyfills here.

---

Source:

• Specification W3C
• Shadow DOM v1: Independent Web Components