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?)
Learn more about browser compatibility and polyfills here.
Source:
https://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/ is in English
– Gabriel C.
Related: Google Polymer also makes use of Shadow DOM to define its components.
– Woss
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
– Artur Trapp
It seems to be directly related to Web Components
– Wallace Maxters