Mysterious shadow-dom analysis and shadow-dom Analysis

Mysterious shadow-dom analysis and shadow-dom Analysis

Many people may be unfamiliar with shadow-dom. But we must have met it. This article will give a brief introduction.shadow-dom. Enter the text below.

What is shadow-dom?

As the name suggests,shadow-dom.Shadow dom? I think it can be understood as the DOM structure hidden in the dark, that is, the DOM structure that we cannot directly control and manipulate. If front-end students often use Developer Tools to view the DOM structure, they must have seen the following structure:

Here#shadow-rootThe content is actually calledshadow-dom.

shadow-domIt is actually a kind of capability of the browser. It allows the browser to insert a Dom element subtree into its DOM structure when rendering a document. However, this sub-tree (shadow-dom) is not in the main DOM tree.

For example, it is also the most common example,<video>Tag, we create a blankvideoTags:

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

View the DOM structure as follows:

Although we created an empty tag, there isshadow-dom, Click to openshadow-domWe can see that there are many contents in it. In fact, the internal content is<video>.

 

Shadow-dom Structure Diagram

Summarize the following with a picture:

Document

This is our normal document.

Shadow host

For an internalshadow-domIn the preceding example,<video>A tag is the host element of shadow-dom.

Shadow-root

PasscreateShadowRootThe returned document segment is called shadow-root. It and its descendant elements will be hidden to users, but they actually exist. In chrome, we can usually review elements to view their specific DOM implementations.

In<video>, Such as pause, playback, volume control, full screen buttons, progress bars, etc. are shadow-root descendants. They are displayed on the screen when they work, but their DOM structure is invisible to users.

Contents

This is what we call<video>The specific implementation of the DOM of each sub-component in.

Why shadow-dom?

Why is this structure required?

Shadow-dom is a node tree outside the DOM tree, but its creation is based on common DOM elements (non-document ), the created Shadow-dom node can be visually viewed on the page. More importantly, Shadow-dom has good sealing performance.

This is an "encapsulation" function provided by the browser. It provides a powerful technology to hide some implementation details. What does it mean? Take a w3c<video>For example, we just fill in a blank tag and addsrcEnter the video address in the property to play the video:

We only fill in one line of code, but have more functions than this line of code, such as pause, playback, volume control, full screen button, progress bar, and so on.

The specific DOM implementation of these functions isshadow-domMedium:

Browser developers realize that as front-end developers<video>Every time you write a lot of DOM to control the display and behavior of the control, it is neither concise nor difficult. Therefore, they define such a boundary and define what you can access and what implementation details cannot be accessed.

The details we don't want to access are encapsulated inshadow-dom. However, browsers can freely cross this boundary. After setting such a boundary, browser developers can use the familiar web technology and the same HTML elements to create more functions that we cannot see, instead of stacking these elements on pages with div and span, as we do.

How to Control shadow-dom

Since it is a DOM structure intentionally hidden by browser developers, can we control the internal DOM structure? It's not totally impossible. There are some ways that we can controlshadow-dom.

Use pseudo elements to control the shadow-dom Style

Here we want to use pseudo elements. Through pseudo elements, we can controlshadow-domDOM structure.

In chrome, Viewshadow-domStructure (if you cannot see shadow-dom, you need to manually open it), you can see that each node has a pesudo attribute:

With these attributes, we can control them by using pseudo elements. For example, in some scenarios, the control bar of the video tag will not be automatically hidden or automatically displayed. You can specify the default explicit/hidden mode through the pseudo element:

If you read this article in chrome, you can see from the above codePen that I used the pseudo element to modify the background color of the video control bar to pink deeppink.

Unfortunately, the above control method only applies to chrome browsers, although most modern browsers have supportedshadow-dom, But can be reviewedshadow-domOnly internal DOM elementschromeBrowsers, other browsers will still hide these details.

Create a shadow-dom element using Javascript

We can also createshadow-domTo encapsulate various functions, mainly through:

HTMLElement.prototype.createShadowRoot =HTMLElement.prototype.createShadowRoot ||HTMLElement.prototype.webkitCreateShadowRoot ||function() {};

Take a look at the example below. In the chrome kernel browser, a simpleshadow-dom, Put our code intotemplateAnd then passimportNodeInsertshadow-domMedium:

If you visit this article in the chrome kernel browser, you should be able to see the line of createShadowDomByJs in the above codePen. Open the review element and you will see<p>The structure is hidden inshadow-dom.

Shadow-dom compatibility

Shadow-the future of dom

This article is very basic aboutshadow-domThe concept is just the tip of the iceberg and has not been studied in depth.

The current components are open, that is, the final html dom structure is difficult to distinguish from the effective structure of the DOM outside the component, and the style is easy to confuse. Shadow-domEncapsulation hidingIt provides us with solutions to these problems. In the Web componentization specification, you can also see the Shadow-dom figure. Developing next-generation Web components using Shadow-dom with good sealing will be a trend.

More resources and references

If you still want to finish reading this article, you can read the following articles:

• Introduction to Shadow DOM
• A Guide to Web Components
• The Shadow DOM 201
• [Translation] What is Shadow Dom?

 

At the end of this article, if you have any questions or suggestions, you can have a lot of discussions, original articles, and limited writing skills. If there are any mistakes in this article, please kindly advise.