Shadow DOM and custom elements are the core of Web Components for encapsulating standalone HTML, CSS, and JavaScript. 1. Shadow DOM creates an isolated DOM tree through the attachShadow() method to avoid style and logical conflicts; 2. Custom elements register new tags by inheriting HTMLElement and using customElements.define(); 3. Component encapsulation can be implemented in combination with Shadow DOM in the constructor; 4. Lifecycle callbacks such as connectedCallback and attribute listening to observedAttributes can control component behavior; 5. Pay attention to style inheritance and compatibility issues. Combining the two can build reusable and highly isolated web components.

Shadow DOM and custom elements are two core parts of Web Components. You can use them to encapsulate HTML, CSS, and JavaScript, allowing components to operate independently on the page, avoiding conflicts of styles and behaviors. Below are some practical suggestions to help you get started quickly.

What is Shadow DOM? How to use it?

Shadow DOM allows you to create an isolated DOM tree inside an element that will not be affected by external styles or external content. Very suitable for component packaging.

The usage method is very simple, just call attachShadow() method:

 const shadow = element.attachShadow({ mode: 'open' });

• mode: 'open' means that this shadow root can be accessed through JS.
• Next you can add nodes to it like a normal DOM:

 const span = document.createElement('span');
span.textContent = 'Hello from shadow!';
shadow.appendChild(span);

You can also insert the <style> tag to write the styles inside the component, and these styles will not "leak" out.

How to create a custom element?

Custom elements allow you to define your own HTML tags, such as <my-button> . You need to inherit HTMLElement and register it.

The steps are as follows:

• Define the class and inherit HTMLElement :

 class MyButton extends HTMLElement {
  constructor() {
    super();
    // Initialize content}
}

• Shadow DOM is usually added to the constructor:

 this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
  <button>Click me</button>
  <style>button { color: blue; }</style>
`;

• Finally register this element:

 customElements.define('my-button', MyButton);

This allows you to use in HTML:

 <my-button></my-button>

Frequently Asked Questions and Notes

Some details are easy to ignore, but they will affect component performance:

• Lifecycle callback : Common methods include connectedCallback (when the element is inserted into the page), disconnectedCallback (when removed), etc., which can handle logic in these hooks.
• Attribute listening : If you want to listen for attribute changes, you must use it in conjunction with observedAttributes :

 static get observedAttributes() {
  return ['disabled'];
}

attributeChangedCallback(name, oldValue, newValue) {
  if (name === 'disabled') {
    this.disabled = newValue !== null;
  }
}

• Style Scope : Although Shadow DOM isolates styles, some CSS properties such as font-family will be inherited.
• Compatibility : Modern browsers basically support it, but if you need to be compatible with old versions, you may need polyfill.

Basically that's it. Combining Shadow DOM with custom elements allows you to create reusable, style-isolated, and clear-behavior Web components. It is not complicated, but it is easy to ignore some key points, especially the life cycle and attribute synchronization.

The above is the detailed content of How do I use shadow DOM and custom elements to create web components?. For more information, please follow other related articles on the PHP Chinese website!