What exactly is Shadow DOM?

What is shadow dom?

Shadow dom can provide encapsulation for the DOM and CSS in the web component, in fact, when the browser renders the document, the written DOM element will be inserted into the specified DOM structure, but the inserted Shadow DOM will be kept with the DOM of the main document. Detached, that is, the Shadow DOM does not exist on the main DOM tree.

And the DOM elements encapsulated by Shadow DOM are independent, the external configuration will not affect the internal, and the internal configuration will not affect the external.

Why some tags we use are obviously empty elements, but they can render various complex scenes?

• input
• video
• audio
• textarea
• …
  You may not have thought about why these tags different from our commonly used div tags. They can render the corresponding styles and functions by simply writing a tag;

Acturally this is all about the underlying rendering, and we don’t need to care.

View the Shadow DOM of the HTML native tag

Write the following tags in html, and then go to the browser console to view

<input type="text">
<input type="range">
<video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" controls></video>
<textarea></textarea>

A lot of people see this, but it’s no different from what we wrote? Don’t worry, I’ll take you to see their true colors~

First open the settings option of the browser console

Then find Preference -> Elements and check show user anent shadow dom

Then let’s take a look at what happened to the DOM element at this time

We will find that there is a lot of space inside these tags, and there is a shadow root under these tags, which is the real layout of these tags.

Since these tags have some sub-element layouts inside, can we access them through JavaScript?

const input = document.querySelector('input')
console.log(input.firstChild)  // null

Obviously, this is not possible!

Because it sets a boundary for web developers about what you can access and what implementation details are not. However, the browser itself is free to cross this boundary at will. With such a border in place, they can use familiar web technologies, the same HTML elements, to create more functionality where you can’t see them

Shadow dom structure

Shadow DOM allows to attach a hidden DOM tree to a regular DOM tree – it starts with a shadow root node as the root node, and below this root node, can be any element, just like normal DOM elements.

Because of this feature , we can see that a single empty tag above can render a variety of complex scenes

The above picture is a very intuitive representation of the shadow dom structure and its relationship with normal dom.

Shadow host

A regular DOM node to which the Shadow DOM will be attached.

Shadow bounday

Where the Shadow DOM ends is also where the regular DOM begins.

Shadow tree

The DOM tree inside the Shadow DOM.

Shadow root

The root node of the Shadow tree.

How to use shadow dom?

Create a shadow dom

We can use attachShadow to mount one shadow dom to the specified element and return a reference to the shadow root.

const shadowroot = root.attachShadow({mode: 'open'})
const template = `
  <div>FrondEnd</div>
 `
shadowroot.innerHTML = template

Shadow dom mode

When calling Element.attachShadow() method, you must specify the encapsulation mode of the shadow DOM tree by passing an object as a parameter, otherwise it will throw one TypeError. The object must have a mode property with the value open or closed.

open: The shadow root element can access the root node from outside js, for example using Element.shadowRoot:

element.shadowRoot; 

closed: Deny access to closed shadow root node from outside js

element.shadowRoot; 

Browsers often use a closed shadow root to make certain elements’ implementations inaccessible internally and not changeable from JavaScript.

For some web components that don’t want to expose the shadow root, the closed shadow DOM may seem very convenient, but bypassing the closed shadow DOM is not difficult in practice

Which elements can mount shadow dom?

It should be noted here that not all html elements can mount shadow dom, only the following elements can act as shadow host of shadow dom

**div footer h1 h2 h3 h4 h5 h6 section span **
When we try to hang on the shadow dom on other elements, the browser will throw an exception.

const input = document.querySelector('input')
const inputRoot = input.attachShadow({mode: 'open'})

Features of shadow dom

From the previous introduction, we know that shadow dom is a node tree outside the DOM tree, but it is created based on ordinary DOM elements (non-documents), and the created Shadow-dom node can be seen intuitively from the interface . The most important point is that Shadow-dom has a good seal.

Style

<style>
  .wx_name {
    color:aqua;
  }
</style>
<body>
    <div class="wx_name">Real dom</div>
    <div id="root"></div>

    <script>
        const shadowroot = root.attachShadow({mode: 'open'})
        const template = `
            <div class="wx_name">shadow dom </div>
        `
        shadowroot.innerHTML = template
    </script>
</body>

It renders like this👇:

We said above that the shadow dom is a node tree outside the DOM tree, so the CSS on our document will not act on it.

Style the host element

The host pseudo-class selector allows you to access the shadow host from anywhere in the shadow root

const shadowroot = root.attachShadow({mode: 'open'})
const template = `
       <div class="wx_name">shadow dom - </div>
       <style>
          :host {
             border: 1px solid #ccc;
             color: pink;
           }
        </style>
`
shadowroot.innerHTML = template

Note that :host only works within the shadow root, and that style rules defined outside the shadow root have a higher specificity than those defined in :host

Style hook

Another very important feature of shadow dom is that it can be used CSS sefl defined attribute to create styled placeholders and allow users to fill them.

<style>
  #root {
    --bg: coral;
    --color: #fff: 
  }
</style>
<div id="root"></div>

<script>

  const shadowroot = root.attachShadow({mode: 'open'})
  const template = `
      <div class="wx_name">shadow dom - </div>
      <style>
          .wx_name {
              background: var(--bg, red);
              color: var(--color, #000)
          }
  </style>
`
  shadowroot.innerHTML = template
</script>

Access shadow via CSS

What if we want to customize the styles of some native tags, obviously regular CSS selectors cannot get elements inside shadow dom. So there’s nothing we can do about it? In fact, we can achieve this through some pseudo-elements, such as:

<input type="range">

It looks like this by default

So how do we change his style, such as changing its background color

Is it possible to write the background color directly to the input?

input{
  background: #ccc;
}

so how can it change its background color for this one element? it has a shadow dom inside it

input[type=range]::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  background-color: chocolate;
}

We can access the shadow’s inner element and change its style through pseudo-elements.

Event

An event fired inside the shadow DOM can cross the shadow boundary and bubble up to the light DOM; however the value of Event.target is automatically changed. so it appears as if the event originated from the shadow tree, it contains rather than the actual element’s host element.

This change is called event redirection and the reason behind it is to preserve shadow DOM encapsulation.

<div id="root"></div>

<script>
  const shadowroot = root.attachShadow({mode: 'open'})
  const template = `
            <div class="wx_name">shadow dom - aaa</div>
            <div class="wx_name">shadow dom - bbb</div>
            <div class="wx_name">shadow dom - ccc</div>
        `
  shadowroot.innerHTML = template
  document.addEventListener('click', e => {
    console.log(e.target)
  })
</script>

When clicking on any element in the shadow dom, what is printed is root . the listener cannot see the real element that dispatched the event.