What is shadow DOM?

Asked

Viewed 3,647 times

32

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.

Shadow DOM no Chrome

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

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

  • 2

    https://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/ is in English

  • 3

    Related: Google Polymer also makes use of Shadow DOM to define its components.

  • You may find https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM here to find something interesting, but the page is just a draft

  • It seems to be directly related to Web Components

1 answer

29


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

Can i use? Shadow DOM v0

Shadow DOM v1

Can i use? Shadow DOM v1

Learn more about browser compatibility and polyfills here.


Source:

  • 1

    Excellent answer +1

  • I found the answer easier to understand, but in this passage "That is, a new context of nodes is created in which all nodes belonging to shadow Tree do not interact directly with document nodes.", I don’t know if you’re trying to say that "document" is the root document of the page or the relative document of the shadow. (If this is the case, then the inner shadow does not interact with the outside?).

  • 2

    @Matheus, the document is the root document of the page. The interaction of the elements contained in shadow Tree is limited to the element host, that is, the element of light Tree to which they were associated. Proof of this is that if you read about the propagation of events, any event generated in the shadow Tree will be mapped to the element host of light Tree. For example, if there is a button in shadow Tree of the element my-component and I click it, the event that will be propagated is the click of the element my-component, not of button in itself.

  • You can read about it in the topics Shadow DOM event model and Focus processing.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.