什么是Custom Elements_如何定义新的HTML标签

Custom Elements 是 Web Components 规范的一部分，用于创建带短横线命名（如 hello-world）并继承 HTMLElement 的可复用自定义标签，需通过 customElements.define() 注册，支持属性监听与生命周期回调，现代浏览器原生支持。

Custom Elements 是 Web Components 规范的一部分，允许你创建可复用、封装良好的自定义 HTML 标签（比如 或 ），它们能像原生标签一样被浏览器识别和使用。

Custom Elements 的核心要求

要被浏览器认可为合法的自定义元素，必须满足两个硬性条件：

• 名称中必须包含一个短横线（-），例如 user-card、loading-spinner；不能是单个单词（如 mydiv）或纯数字开头；
• 必须通过 customElements.define() 注册，且传入的类需继承自 HTMLElement（或其子类，如 HTMLButtonElement）。

定义一个基础 Custom Element

以下是一个最简但完整的例子：定义一个显示欢迎语的 标签：

class HelloWorld extends HTMLElement {
  connectedCallback() {
    this.textContent = 'Hello, Custom Element!';
  }
}
customElements.define('hello-world', HelloWorld);

在 HTML 中即可直接使用：。浏览器会自动调用 connectedCallback，插入文本内容。

支持属性与响应式更新

自定义元素可以监听属性变化，实现类似原生标签的响应能力。例如让 显示不同名字：

• 在类中定义 static get observedAttributes()，返回要监听的属性名数组（如 ['name']）；
• 实现 attributeChangedCallback(attrName, oldValue, newValue)，在属性变更时更新内容；
• 首次渲染建议仍在 connectedCallback 中处理，确保初始状态正确。

注意兼容性与最佳实践

现代主流浏览器（Chrome、Firefox、Safari、Edge）均已原生支持 Custom Elements v1。若需支持旧版 IE，需引入 polyfill（如 @webcomponents/custom-elements）。另外建议：

• 避免在构造函数（constructor）中操作 DOM 或读取属性——此时元素尚未挂载，this.innerHTML 不可用；
• 使用 Shadow DOM 封装样式和结构，防止外部 CSS 干扰（可选但推荐）；
• 为元素添加合适的 ARIA 属性，提升可访问性。