Shadow DOM is used to create independent DOM trees to implement style and structure isolation, and Custom Elements is used to define custom HTML elements to improve reusability and semantics. 1. Shadow DOM provides style isolation, structural encapsulation and conflict avoidance, and is created through the attachShadow method. 2. Custom Elements Componentization is achieved by inheriting the HTMLElement class and registering new tags. 3. The two are often used in combination to create Shadow DOM in the constructor to implement plug-and-play components. 4. Application scenarios include building component libraries, encapsulating third-party components, and modules that require highly isolated. 5. Note that the naming must include short horizontal lines, mode selection affects external access and framework support differences.

Shadow DOM and Custom Elements are two very important concepts in modern web development. They are part of Web Components and are mainly used to build reusable and well-encapsulated UI components.

Simply put, Shadow DOM allows you to create a completely independent DOM tree inside an element, and the tree is not affected by external styles and scripts ; while Custom Elements allows developers to define their own HTML elements and give them specific behaviors and structures .

Let’s start from the use scenarios and see what they are and how they are used.

What is Shadow DOM?

Shadow DOM is a technique for attaching a hidden DOM tree to an element. You can understand it as a "small world nested in a normal DOM". It has its own style and structure and will not be easily affected by external factors.

To give the simplest example: <video></video> or <input type="range"> elements that come with the browser, their internal structure is actually hidden, and these are implemented through Shadow DOM.

Benefits of using Shadow DOM:

• Style Isolation : The CSS you write in Shadow DOM will not pollute the world.
• Structural encapsulation : The implementation details inside the component are not visible to the outside.
• Avoid conflict : Multiple components can have the same class name but different styles and do not interfere with each other.

How to create a Shadow DOM?

 const host = document.querySelector('#myHost');
const shadowRoot = host.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `
  <style>
    p { color: red; }
  </style>
  <p>I am the content in Shadow DOM</p>
`;

This way, you add a styled DOM structure to an element.

What are Custom Elements?

Custom Elements is custom HTML tags. For example, you can create a tag called <my-button> and then render it into a button with specific functions and styles.

Its greatest value lies in improving code reusability and semantic page structure . You can write some commonly used UI components as Custom Elements and use them directly in multiple projects.

How to define a Custom Element?

1. Create a class that inherits HTMLElement
2. Define the behavior you need in the class (such as constructor, connectedCallback, etc.)
3. Register this element with customElements.define()

The sample code is as follows:

 class MyButton extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.innerHTML = `
      <button>Click me</button>
      <style>
        button { background: blue; color: white; padding: 10px; }
      </style>
    `;
  }
}

customElements.define(&#39;my-button&#39;, MyButton);

Then it can be used in HTML:

 <my-button></my-button>

Can Shadow DOM and Custom Elements be used together?

sure! And this is the most common way to combine.

Custom Elements usually creates Shadow DOM in the constructor, thus implementing structural and style encapsulation of components. This combination allows you to really write "plug and play" components.

Common application scenarios include:

• Build a design system or component library (such as buttons, input boxes, etc.)
• Encapsulate third-party components (such as embedding maps, charts)
• Modules that require high style isolation

Notes and tips

Although these two features are very powerful, there are some things to pay attention to:

• Styles in Shadow DOM do not penetrate outside, but the style of the host element can be controlled through :host .
• You can use mode: 'open' or 'closed' to control whether the Shadow DOM can be accessed from the outside.
• Custom Elements must contain short horizontal lines - , such as my-card , which cannot be a single word.
• If your project uses frameworks (such as React, Vue), their support for Custom Elements is slightly different and requires additional configuration.

Basically that's it. Mastering Shadow DOM and Custom Elements can help you better understand and build modern front-end component structures. Although it is a bit unfamiliar at the beginning, it is actually not complicated to use, and it is just easy to ignore some details.

The above is the detailed content of What are shadow DOM and custom elements?. For more information, please follow other related articles on the PHP Chinese website!