To use custom HTML tags, it can be implemented through Web Components, at the core of which are Custom Elements, with Shadow DOM and HTML Templates. 1. Definition of Custom Element requires inheriting HTMLElement and registering with customElements.define(). The tag name must contain a short horizontal line and cannot be defined repeatedly; 2. The life cycle includes connectedCallback (insert page), disconnectedCallback (removal page), attributeChangedCallback (attribute change), etc., which can be used to respond to component status; 3. Use slot to pass in content and styles, and implement structure and style encapsulation through template references to maintain component flexibility and maintainability.

When you want to use custom HTML tags on your web pages, but don't want to rely on frameworks, Web Components is a good choice. It is natively supported, does not require additional libraries, and can be used in any project. The core is Custom Elements, which works better with Shadow DOM and HTML Templates.

Here are a few key points you may care about to help you get started quickly.

How to define a Custom Element

Custom Element is a class that inherits HTMLElement , and then registers it as a tag name through customElements.define() .

For example:

 class MyCard extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `<div>This is a card</div>`;
  }
}

customElements.define(&#39;my-card&#39;, MyCard);

Then it can be used directly in HTML:

 <my-card></my-card>

A few notes:

• The tag name must contain a short horizontal line (kebab-case), such as my-card , not card
• An element can only be bound once, repeating the definition will report an error
• The DOM attribute cannot be operated in the constructor, and you need to use connectedCallback

How to use life cycle callback

Custom Element provides several lifecycle methods to respond to different states of components. Commonly used are:

• connectedCallback : Triggered when an element is inserted into the page
• disconnectedCallback : fired when the element is removed
• attributeChangedCallback(attrName, oldVal, newVal) : triggered when the attribute changes
• adoptedCallback : Triggered when an element is moved to a new document (use less)

For example, if you want to listen for a change in a certain attribute to update the content:

 class MyCard extends HTMLElement {
  static get observedAttributes() {
    return ['title'];
  }

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

  connectedCallback() {
    const title = this.getAttribute('title') || 'Default title';
    this.shadowRoot.innerHTML = `<h1>${title}</h1><div>Content Area</div>`;
  }
}

After writing this way, as long as you change the title attribute in HTML, the component can be automatically updated.

How to transfer content and styles into

If you want components to accept internal content instead of rendering them all in innerHTML, use <slot> .

for example:

 <template id="card-template">
  <style>
    .container {
      border: 1px solid #ccc;
      padding: 1em;
    }
  </style>
  <div class="container">
    <h1><slot name="title">Default title</slot></h1>
    <div><slot>Default content</slot></div>
  </div>
</template>

Then refer to this template in JS:

 const template = document.getElementById('card-template');

class MyStyledCard extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' }).appendChild(template.content.cloneNode(true));
  }
}

customElements.define('my-styled-card', MyStyledCard);

How to use:

 <my-styled-card>
  <span slot="title">My title</span>
  <p>This is the main content</p>
</my-styled-card>

This method allows you to more flexible control of content structure and style while maintaining encapsulation.

Basically that's it. Custom Elements looks simple, but when used properly, you need to understand the details of life cycle, property listening, and Shadow DOM. You can start with a small feature, such as encapsulating a button or prompt box, and slowly expanding it into a component library.

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