Custom Elements 是 Web Components 中的一个重要概念，它允许开发者自定义 HTML 元素并在页面中使用。这种方式可以提高代码的可重用性和可维护性，同时也有助于组件化开发，使得页面的结构更加清晰和易于理解。
Custom Elements 的基本用法
在使用 Custom Elements 之前，我们需要定义一个新的 HTML 元素。定义新元素的方式有两种，一种是继承自 HTMLElement，另一种是继承自其他 HTML 元素，例如继承自 input 或者 button。
// javascriptcn.com 代码示例
<!-- 继承自 HTMLElement -->
<script>
class MyElement extends HTMLElement {
constructor() {
super();
this.innerHTML = '<p>Hello, world!</p>';
}
}
customElements.define('my-element', MyElement);
</script>
<!-- 继承自 input -->
<script>
class MyInput extends HTMLInputElement {
constructor() {
super();
this.type = 'text';
this.value = 'Hello, world!';
}
}
customElements.define('my-input', MyInput, { extends: 'input' });
</script>在上面的代码中，我们定义了两个新的 HTML 元素，分别是 my-element 和 my-input。其中，my-element 继承自 HTMLElement，my-input 继承自 input。
在定义完新元素之后，我们就可以在页面中使用它们了。
<my-element></my-element> <input is="my-input">
Custom Elements 的高级用法
除了基本用法之外，Custom Elements 还有一些高级用法，例如属性监听、插槽等。
属性监听
我们可以使用 attributeChangedCallback 方法来监听元素属性的变化。
// javascriptcn.com 代码示例
<my-element data-name="Tom"></my-element>
<script>
class MyElement extends HTMLElement {
static get observedAttributes() {
return ['data-name'];
}
attributeChangedCallback(name, oldValue, newValue) {
console.log(`Attribute ${name} changed from ${oldValue} to ${newValue}`);
}
}
customElements.define('my-element', MyElement);
</script>在上面的代码中，我们监听了 my-element 元素的 data-name 属性的变化。当属性值发生变化时，会触发 attributeChangedCallback 方法。
插槽
插槽是一种非常有用的功能，它可以让我们在自定义元素内部插入任意 HTML 内容。
// javascriptcn.com 代码示例
<my-element>
<p slot="content">Hello, world!</p>
</my-element>
<script>
class MyElement extends HTMLElement {
constructor() {
super();
const template = document.createElement('template');
template.innerHTML = `
<div>
<h1>My Element</h1>
<slot name="content"></slot>
</div>
`;
this.attachShadow({ mode: 'open' });
this.shadowRoot.appendChild(template.content.cloneNode(true));
}
}
customElements.define('my-element', MyElement);
</script>在上面的代码中，我们在 my-element 元素内部插入了一个 p 元素，并使用了 slot 属性来标记它的位置。在 MyElement 类的构造函数中，我们使用了 Shadow DOM 来创建一个新的 DOM 树，并插入了一个插槽元素。
总结
Custom Elements 是 Web Components 中的一个重要概念，它可以让我们自定义 HTML 元素并在页面中使用。在使用 Custom Elements 的过程中，我们需要定义新元素、监听属性变化、使用插槽等功能。这些功能可以大大提高代码的可重用性和可维护性，同时也有助于组件化开发，使得页面的结构更加清晰和易于理解。
参考资料
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65853cbfd2f5e1655dfe73e2