Web Components is a set of browser-native standards used to create reusable, customizable HTML elements. 1. One of its core is Custom Elements, which allows developers to define new tags such as and give them functionality. 2. Creating a custom element requires two steps: define a class that inherits HTMLElement and registers the element, usually combining Shadow DOM encapsulation structure and style. 3. Lifecycle callbacks include connectedCallback (triggered when added), disconnectedCallback (triggered when removed), attributeChangedCallback (triggered when attribute changes), and adoptedCallback (triggered when document moves). 4. The naming specification requires the use of short horizontal line formats (such as my-button) to avoid conflicts with native elements. 5. Mainstream browsers support Web Components, but are not compatible with older IE. 6. Use Shadow DOM to implement style isolation, but may also affect the application of global styles. 7. Pay attention to performance optimization when used in large quantities. Mastering this technology can improve component development capabilities without relying on frameworks.

Web Components is a very practical technology in modern front-end development. It allows us to create customized, reusable components with native HTML without relying on any framework. This is especially useful when building large projects or designing systems.

What are Web Components?

Simply put, Web Components is a set of browser-natively supported standards that allow you to create new HTML elements that can encapsulate their own structure, styles, and behaviors. One of the most core parts is "Custom Elements". You can define tags like <my-button></my-button> or <data-card></data-card> and make them specific.

How to define a custom element?

To create a custom element, it is mainly divided into two steps: define the class and register the element.

First, you need to create a class that inherits from HTMLElement . In this class, you can use constructor() to initialize the component, and usually create a Shadow DOM in combination with this.attachShadow({ mode: 'open' }) to implement style and structure encapsulation.

Then, after the class definition is complete, register your new element via customElements.define() method. for example:

 class MyButton extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <button>Click Me</button>
      <style>
        button {
          background-color: #4CAF50;
          color: white;
          padding: 10px;
        }
      </style>
    `;
  }
}

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

Now you can use <my-button></my-button> directly in HTML, which will render a green button.

Lifecycle callback for custom elements

In addition to constructors, there are several commonly used life cycle hooks that can help you better control the behavior of components:

• connectedCallback : Triggered when an element is added to the document, suitable for initialization operations.
• disconnectedCallback : fired when an element is removed from the document, suitable for cleaning up resources.
• attributeChangedCallback(attrName, oldVal, newVal) : triggered when the specified attribute changes, it needs to be used with observedAttributes .
• adoptedCallback : Called when the element is moved into a new document, this is not commonly used.

For example, if you want the component to change the content based on a certain property:

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

attributeChangedCallback(name, oldValue, newValue) {
  if (name === 'label') {
    this.shadowRoot.querySelector('button').textContent = newValue;
  }
}

Then in HTML:

 <my-button label="Submit"></my-button>

Frequently Asked Questions and Precautions

• Naming specification : Custom element names must contain short horizontal lines (kebab-case), such as <my-button></my-button> , which is to avoid conflicts with future native elements.
• Compatibility : Web Components are supported by mainstream modern browsers, but they cannot run on older IE.
• Style Isolation : Using Shadow DOM can isolate styles very well, but if you want global styles to affect components, you may need to make some tweaks.
• Performance Optimization : Each custom element creates a new Shadow DOM, if used heavily, be careful to avoid unnecessary performance overhead.

Basically that's it. Mastering Custom Elements allows you to build components more flexibly without relying on any framework, which is worth learning.

The above is the detailed content of Introduction to Web Components with HTML (Custom Elements). For more information, please follow other related articles on the PHP Chinese website!