Web Components (custom element + shadow DOM) là gì?

Web Components (custom element + shadow DOM) là gì? – HTML · Luyện phỏng vấn IT

class UserCard extends HTMLElement {
  connectedCallback() {            // lifecycle: chạy khi được thêm vào trang
    const shadow = this.attachShadow({ mode: "open" }); // tạo shadow DOM
    shadow.innerHTML = `
      <style> h2 { color: blue; } </style>
      <h2>${this.getAttribute("name")}</h2>
      <slot></slot>
    `;
  }
}
customElements.define("user-card", UserCard); // tên PHẢI chứa một dấu gạch ngang

connectedCallback()    // được thêm vào DOM
disconnectedCallback() // bị gỡ khỏi DOM (dọn dẹp)
attributeChangedCallback(name, old, val) // một attribute được quan sát đã thay đổi
static get observedAttributes() { return ["name"]; }

Định nghĩa một custom element

Shadow DOM = đóng gói thực sự

Các callback lifecycle

Tại sao điều này quan trọng