Shadow-dom Introduction

When it comes to shadow-dom, many people may be unfamiliar. But in fact we have met, this article mainly want to briefly introduce the next shadow-dom. Enter the text directly below.

What is Shadow-dom?

As the name implies, Shadow-dom, the literal word is the shadow dom. I think it can be understood as the DOM structure lurking in the dark, which is the DOM structure in which we have no direct control over manipulation. Front-end students often use developer tools, when looking at the DOM structure, must have seen the following structure:

The #shadow-root here contains what is called Shadow-dom.

Shadow-dom is actually a browser capability that allows a DOM element subtree to be inserted into the DOM structure of the browser while rendering the document, but, specifically, the subtrees tree (shadow-dom) is not in the main DOM tree.

For a chestnut, also the most common example of <video> tag, we create a blank video tag on the page:

1	< video id= ' test ' ></video >

View the DOM structure as follows:

Although we created an empty label, but within this empty tag inside, there is a shadow-dom, point open shadow-dom can see within the universe, there is a lot of content. In fact, this internal specific content, is the concrete implementation of <video>.

shadow-dom structure schematic

Let's sum it up with a picture:

Document

This is a good understanding of our normal document documents.

Shadow host

For an internally shadow-dom element, it necessarily requires a host element, and for the example above, the <video> tag is the host element of Shadow-dom.

Shadow-root

The document fragments returned by Createshadowroot (mentioned below) are called Shadow-root. It and its descendant elements will be hidden from the user, but they are actually present, and in chrome we can usually review the elements to see their specific DOM implementations.

In <video>, such as pause, play, volume control, Full Screen button, progress bar, etc. are all descendants of Shadow-root. They are displayed on the screen while they work, but their DOM structure is not visible to the user.

Contents

This is the specific implementation of the DOM for each of the sub-components in <video>.

Why do I need shadow-dom

Why this structure is needed.

Shadow-dom is a node tree that is free from the DOM tree, but his creation is based on ordinary DOM elements (not document), and the created Shadow-dom node can be seen intuitively from the interface. More importantly, the shadow-dom has a good sealing quality.

This is a browser-provided "encapsulation" feature that provides a powerful technique to hide some of the implementation details. What do you mean? As an example of a <video> example in the world of media, we simply fill out a blank label and add the SRC attribute with the video address to play the video:

We just fill in a line of code, but have more than this line of code features, such as pause, play, volume control, Full Screen button, progress bar and so on.

The specific DOM implementations of these features are actually in Shadow-dom:

Browser developers are aware that as front-end developers, when referencing a <video> tag, it is neither concise nor difficult to write a large stack of DOM to control the performance and behavior of the control each time. So they define a boundary that defines what you can access and which implementation details are inaccessible.

The details that you don't want us to access are encapsulated in the shadow-dom. However, the browser itself is free to cross this boundary. After setting such a boundary, browser developers can use familiar web technologies, the same HTML elements, to create more functionality in places we can't see, rather than using div and span to stack them on the page like we do.

How to control shadow-dom

Since it is the DOM structure that the browser developer intentionally hides, can we control the internal DOM structure? Not entirely, there are some ways that we can control some of the performance within the Shadow-dom.

controlling shadow-dom styles with pseudo-elements

Here we're going to use pseudo-elements, and we can control the style of the DOM structure in Shadow-dom, through pseudo-elements.

Under Chrome, look at the SHADOW-DOM structure (if you can't see shadow-dom need to open manually), you can see that each node has a Pesudo attribute added:

With these attributes, we can control them by means of pseudo-elements, such as the control bars of the video tag are not automatically hidden or automatically displayed in some scenarios, and can be specified by pseudo-elements by default:

If you read this article in Chrome, as you can see from the codepen above, I modified the video control bar to have a pink deeppink with pseudo elements.

Unfortunately, the above controls only apply to Chrome, although most modern browsers already support Shadow-dom, but only chrome, which is able to censor shadow-dom internal DOM elements, still hides these details from other browsers.

Create a shadow-dom element using Javascript

We can also use Javascript to create Shadow-dom, which enables the encapsulation of various functions, mainly through:

1 2