“This is the 24th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

preface

From the beginning of my foray into the front end, I was always wondering why things like:

  • <input/>
  • <select></select>
  • <audio></audio>
  • <video></video>
  • …

These tags seem simple, but why do they display such a rich and complex layout? The explanation I gave myself at the time was that these tags were all system controlled rendering.

Now think about, the explanation seems a bit arbitrary, but it did not involve essential reason, expert should be: the explanation of these elements are the way of component, reveal the layout are defined within the component, if the page reference to the element tag, internal layout will render it on the page.

In the introduction to Web Components, its second technical specification is called Shadow DOM. By understanding the relevant knowledge of Shadow DOM, we may be able to solve the above doubts.

View the Shadow DOM of the default component

One might wonder, given that the elements listed at the beginning of this article are components, why THE structure I see in developer tools looks like this:

Is there any way to see the DOM structure inside each component? The answer is yes. Here’s how:

Step 1: Open the Developer Tools and click on the Settings icon in the upper right corner:

Step 2: Find the preferences – element and check “Show user agent Shadow DOM” :

At this point, let’s look at the internal structure of the default components as follows:

As you can see, each of these default tags contains a “Shadow root” and in shadow root contains the layout:

A seemingly simple Audio element, the layout inside is quite complex. This reminds me of a saying: Kung Fu is all off-stage.

In the screenshot above, we see the “Shadow Root”, which is actually part of the Shadow DOM.

The concept of Shadow DOM

Before we introduce the concept, let’s look at the Chinese definition of the word “shadow” :

Shadow DOM, which translates as “Shadow DOM”.

Of course, the shadows are hidden in the dark and not easy to be found, just like the default elements mentioned at the beginning of the article, if not set, we will see a simple label on the surface.

Shadow DOM is a specification for HTML that allows browser developers to encapsulate their OWN HTML tags, CSS styles, and specific javascript code. It also allows developers to create custom tags like

The meaning of Shadow DOM

The reason why “componentization” is so popular is because of its unique appeal. We can simply introduce a defined component into a page through a simple set of tags, and it can be used in multiple places.

Shadow DOM plays an important role in Web Components system because of its good sealing performance, which is mainly reflected in:

  • Hide tags, styles, and behaviors;
  • Keep code isolation, ensure the page clean and tidy, each component internal code does not affect each other;
  • Hide implementation details in favor of more powerful syntax or functionality.

This means that if we use Shadow DOM, we can play around with it without worrying about the rest of the page, which gives developers a lot of freedom.

Think of the time when you carefully defined styles and bound events. Do you miss it?

Shadow DOM structure

Shadow DOM allows you to attach a hidden DOM tree to a regular DOM tree — it starts with a Shadow root node. Below this root node can be any element, just like a normal DOM element. Here’s an image from the web:

Here’s what I drew as I understood it:

You can look at whichever one you like is easier to understand, it doesn’t matter. Corresponding to the actual document, its structure is as follows:

In the structure diagram above, we see several unfamiliar terms, including the “shadow root” we saw earlier, which are all shadow DOM terms. Let me explain what they mean.

Shadow DOM term

Shadow host

A regular DOM node to which the Shadow DOM is attached.

Shadow tree

Shadow DOM Specifies the DOM tree inside the Shadow DOM.

Shadow boundary

Shadow DOM boundary. Where Shadow DOM ends is where regular DOM begins.

Shadow root

Shadow Tree root node.

usage

Mount the Shadow of the DOM

You can attach a Shadow DOM to the specified Element using the element.attachShadow () method and return a reference to ShadowRoot.

let hostEle = document.getElementById("myCard");
let shadowroot = hostEle.attachShadow({mode: "open"});
Copy the code

Control Shadow DOM

You can manipulate the Shadow DOM in the same way as you would a normal DOM — for example, by adding child nodes, setting properties, and adding your own styles to the node (for example, via the element.style property). Or style the entire Shadow DOM (for example, within the

Matters needing attention

An error will be reported if an element already has a Shadow DOM mount underneath it:

conclusion

The main function of Shadow DOM is its encapsulation feature, so that the internal code of each component does not interfere with each other, and provides a safe development and operation environment.

So much for the basic concepts of Shadow DOM, I’ll show you how to operate it.

~

Thanks for reading!

~

Learn interesting knowledge, meet interesting friends, shape interesting soul!

Hello everyone, I am the author of “programming Samadhi”, I am king Yi, my public account is “programming Samadhi”, welcome to pay attention, I hope you can give me more advice!