自定义元素

使用自定义元素 - Web API | MDN 自定义元素的类型自定义内置元素：HTMLImageElement 等，它们的实现定义了标准元素的行为独立自定义元素： HTML 元素的基类 HTMLElement 在类的构造函数中，你可以设置初始状态和默认值，注册事件监听器，甚至创建一个影子根（shadow root）。在构造函数中，你不应检查元素的属性或子元素，也不应添加新的属性或子元素，因为元素还没有绑定到 DOM 上。自定义元素的生命周期回调一旦你的自定义元素被注册，当页面中的代码以特定方式与你的自定义元素交互时，浏览器将调用你的类的某些方法。通过提供这些方法的实现，规范称之为生命周期回调，你可以运行代码来响应这些事件。 connectedCallback()：每当元素添加到文档中时调用。规范建议开发人员尽可能在此回调中实现自定义元素的设定，而不是在构造函数中实现。 disconnectedCallback()：每当元素从文档中移除时调用。 adoptedCallback()：每当元素被移动到新文档中时调用。 attributeChangedCallback()：在属性更改、添加、移除或替换时调用。有关此回调的更多详细信息，请参见响应属性变化 // 为这个元素创建类class MyCustomElement extends HTMLElement { static observedAttributes = ["color", "size"]; constructor() { // 必须首先调用 super 方法 super(); } connectedCallback() { console.log("自定义元素添加至页面。"); } disconnectedCallback() { console.log("自定义元素从页面中移除。"); } adoptedCallback() { console.log("自定义元素移动至新页面。"); } attributeChangedCallback(name, oldValue, newValue) { console.log(属性 ${name} 已变更。); }}customElements.define("my-custom-element", MyCustomElement); 注册自定义元素要使自定义元素在页面中可用，请调用 Window.customElements 的 define() 方法。响应属性变化与内置元素一样，自定义元素可以使用 HTML 属性来配置元素的行为。为了有效地使用属性，元素必须能够响应属性值的变化。为此，自定义元素需要将以下成员添加到实现自定义元素的类中：一个名为 observedAttributes 的静态属性。这必须是一个包含元素需要变更通知的所有属性名称的数组。 attributeChangedCallback() 生命周期回调的实现。 attributeChangedCallback() 回调在列在元素的 observedAttributes 属性中的属性被添加、修改、移除或替换时调用。回调接受三个参数：发生变化的属性的名称。属性的旧值。属性的新值。

补充

补充：Custom Elements 是 Web Components 的核心，允许开发者注册任意自定义标签，并复用浏览器内置元素的生命周期机制。

两类自定义元素：

Autonomous custom elements：继承自 HTMLElement，独立的新标签，例如 <my-button>。
Customized built-in elements：继承自内置元素（如 HTMLButtonElement），用 is="my-button" 语法扩展。

生命周期回调：