Web Components 是一种新的 Web 技术，它允许开发者创建自定义的 HTML 元素，这些元素可以被重复使用，而且可以在不同的页面或应用中使用。其中 Custom Elements 是 Web Components 的一个重要部分。在本文中，我们将深入探讨 Custom Elements 的细节，包括定义、生命周期、属性和事件等方面的内容。
定义 Custom Elements
定义 Custom Elements 的方式非常简单，我们只需要使用 customElements.define 方法即可。例如，我们可以定义一个名为 my-element 的自定义元素：
class MyElement extends HTMLElement {
constructor() {
super();
}
}
customElements.define('my-element', MyElement);在上面的代码中，我们定义了一个名为 MyElement 的类，它继承自 HTMLElement，并且没有任何方法。然后，我们使用 customElements.define 方法将这个类注册为 my-element 元素。这样，我们就成功定义了一个 Custom Element。
需要注意的是，Custom Elements 的名称必须包含横线。这是为了避免与未来的 HTML 元素发生冲突。
生命周期
Custom Elements 有四个生命周期方法，它们分别是 connectedCallback、disconnectedCallback、attributeChangedCallback 和 adoptedCallback。
connectedCallback
当 Custom Element 被插入到文档中时，connectedCallback 方法会被调用。在这个方法中，我们可以进行一些初始化的操作，例如添加事件监听器、创建子元素等。
// javascriptcn.com 代码示例
class MyElement extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
console.log('MyElement connected to the DOM');
}
}
customElements.define('my-element', MyElement);disconnectedCallback
当 Custom Element 被从文档中移除时，disconnectedCallback 方法会被调用。在这个方法中，我们可以进行一些清理的操作，例如移除事件监听器、销毁子元素等。
// javascriptcn.com 代码示例
class MyElement extends HTMLElement {
constructor() {
super();
}
disconnectedCallback() {
console.log('MyElement disconnected from the DOM');
}
}
customElements.define('my-element', MyElement);attributeChangedCallback
当 Custom Element 的属性发生变化时，attributeChangedCallback 方法会被调用。在这个方法中，我们可以获取到属性的旧值和新值，从而进行一些相应的操作。
// javascriptcn.com 代码示例
class MyElement extends HTMLElement {
constructor() {
super();
}
static get observedAttributes() {
return ['my-attribute'];
}
attributeChangedCallback(name, oldValue, newValue) {
console.log(`MyElement's ${name} attribute changed from ${oldValue} to ${newValue}`);
}
}
customElements.define('my-element', MyElement);需要注意的是，我们需要在 Custom Element 类中定义一个 observedAttributes 静态属性，来指定我们要观察的属性列表。
adoptedCallback
当 Custom Element 从一个文档移动到另一个文档时，adoptedCallback 方法会被调用。在这个方法中，我们可以进行一些相应的操作，例如更新元素的状态。
// javascriptcn.com 代码示例
class MyElement extends HTMLElement {
constructor() {
super();
}
adoptedCallback() {
console.log('MyElement adopted to a new document');
}
}
customElements.define('my-element', MyElement);属性和事件
Custom Elements 可以拥有自己的属性和事件。在这一节中，我们将深入探讨如何定义和使用这些属性和事件。
属性
在 Custom Element 中，我们可以定义自己的属性。例如，我们可以定义一个名为 my-attribute 的属性：
// javascriptcn.com 代码示例
class MyElement extends HTMLElement {
constructor() {
super();
}
static get observedAttributes() {
return ['my-attribute'];
}
get myAttribute() {
return this.getAttribute('my-attribute');
}
set myAttribute(value) {
this.setAttribute('my-attribute', value);
}
}
customElements.define('my-element', MyElement);在上面的代码中，我们定义了一个名为 myAttribute 的 getter 和 setter 方法，它们分别用于获取和设置 my-attribute 属性的值。需要注意的是，我们需要在 observedAttributes 静态属性中指定要观察的属性列表。
事件
在 Custom Element 中，我们也可以定义自己的事件。例如，我们可以定义一个名为 my-event 的事件：
// javascriptcn.com 代码示例
class MyElement extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.addEventListener('click', this.onClick.bind(this));
}
onClick() {
const event = new CustomEvent('my-event', {
bubbles: true,
composed: true,
detail: {
message: 'Hello world'
}
});
this.dispatchEvent(event);
}
}
customElements.define('my-element', MyElement);在上面的代码中，我们在 connectedCallback 方法中添加了一个 click 事件监听器，当元素被点击时会触发这个事件。然后，我们创建了一个名为 my-event 的自定义事件，并使用 dispatchEvent 方法派发这个事件。需要注意的是，我们需要在 CustomEvent 构造函数中指定事件的名称、是否冒泡、是否可以穿越阴影 DOM，以及事件的附加数据。
总结
通过本文的学习，我们了解了 Custom Elements 的定义、生命周期、属性和事件等方面的内容。Custom Elements 是 Web Components 的重要组成部分，它为我们提供了一种创建自定义 HTML 元素的方式，可以在不同的页面或应用中重复使用。在实际开发中，我们可以根据自己的需求来定义 Custom Elements，并且可以通过定义属性和事件来丰富元素的功能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656fec2dd2f5e1655d870204