Custom Elements 和 Shadow DOM 是 Web Components 的两个核心技术，它们可以让我们创建可复用、可扩展、可维护的组件化应用程序。在本文中，我们将详细介绍如何正确地使用 Custom Elements 和 Shadow DOM。
Custom Elements
Custom Elements 允许我们创建自定义 HTML 元素，这些元素可以像原生 HTML 元素一样使用和扩展。要创建自定义元素，我们需要使用 window.customElements.define() 方法来注册一个新的元素。
下面是一个简单的例子，我们创建了一个名为 my-element 的自定义元素：
class MyElement extends HTMLElement {
constructor() {
super();
this.textContent = 'Hello, world!';
}
}
window.customElements.define('my-element', MyElement);现在我们可以在 HTML 中使用 <my-element> 元素了：
<my-element></my-element>
这将渲染为：
Hello, world!
生命周期
Custom Elements 有一些生命周期方法，它们在元素的创建、插入到文档、移除等不同的阶段被调用。这些生命周期方法可以帮助我们管理元素的状态和行为。
以下是 Custom Elements 的生命周期方法：
constructor()：构造函数，用于初始化元素的状态和属性。connectedCallback()：元素被插入到文档时调用。disconnectedCallback()：元素从文档中移除时调用。attributeChangedCallback(name, oldValue, newValue)：元素的属性发生变化时调用。
下面是一个例子，我们在 connectedCallback() 方法中添加了一个点击事件处理程序：
// javascriptcn.com 代码示例
class MyElement extends HTMLElement {
constructor() {
super();
this.textContent = 'Hello, world!';
}
connectedCallback() {
this.addEventListener('click', () => {
console.log('Clicked!');
});
}
}
window.customElements.define('my-element', MyElement);现在当我们点击 <my-element> 元素时，控制台将输出 Clicked!。
属性
Custom Elements 可以有自己的属性，这些属性可以通过 getAttribute() 和 setAttribute() 方法进行设置和获取。我们可以使用 observedAttributes 静态属性来指定要观察的属性列表。
下面是一个例子，我们添加了一个 name 属性，并在 attributeChangedCallback() 方法中更新元素的文本内容：
// javascriptcn.com 代码示例
class MyElement extends HTMLElement {
constructor() {
super();
this.textContent = 'Hello, world!';
}
static get observedAttributes() {
return ['name'];
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'name') {
this.textContent = `Hello, ${newValue}!`;
}
}
}
window.customElements.define('my-element', MyElement);现在我们可以使用 setAttribute() 方法设置 name 属性：
<my-element name="Bob"></my-element>
这将渲染为：
Hello, Bob!
Shadow DOM
Shadow DOM 允许我们创建封装的、隔离的 DOM 树，这样我们就可以将元素的样式和行为隐藏在组件内部，避免与全局样式和脚本发生冲突。要创建 Shadow DOM，我们可以使用元素的 attachShadow() 方法。
下面是一个例子，我们创建了一个名为 my-element 的自定义元素，并在其中创建了一个 Shadow DOM：
// javascriptcn.com 代码示例
class MyElement extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({ mode: 'open' });
const p = document.createElement('p');
p.textContent = 'Hello, world!';
shadowRoot.appendChild(p);
}
}
window.customElements.define('my-element', MyElement);现在我们可以在 HTML 中使用 <my-element> 元素了：
<my-element></my-element>
这将渲染为：
Hello, world!
样式
Shadow DOM 允许我们在组件内部定义样式，这些样式不会影响全局样式。我们可以使用 <style> 元素来定义样式。
下面是一个例子，我们在 Shadow DOM 中定义了一个 p 元素的样式：
// javascriptcn.com 代码示例
class MyElement extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({ mode: 'open' });
const style = document.createElement('style');
style.textContent = `
p {
color: red;
}
`;
shadowRoot.appendChild(style);
const p = document.createElement('p');
p.textContent = 'Hello, world!';
shadowRoot.appendChild(p);
}
}
window.customElements.define('my-element', MyElement);现在 <p> 元素的文字颜色将变为红色。
事件
Shadow DOM 允许我们在组件内部添加事件处理程序，这些事件处理程序不会影响全局事件处理程序。我们可以使用 addEventListener() 方法来添加事件处理程序。
下面是一个例子，我们在 Shadow DOM 中添加了一个点击事件处理程序：
// javascriptcn.com 代码示例
class MyElement extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({ mode: 'open' });
const p = document.createElement('p');
p.textContent = 'Hello, world!';
shadowRoot.appendChild(p);
p.addEventListener('click', () => {
console.log('Clicked!');
});
}
}
window.customElements.define('my-element', MyElement);现在当我们点击 <p> 元素时，控制台将输出 Clicked!。
总结
Custom Elements 和 Shadow DOM 是 Web Components 的两个核心技术，它们可以让我们创建可复用、可扩展、可维护的组件化应用程序。在本文中，我们介绍了如何正确地使用 Custom Elements 和 Shadow DOM，并提供了示例代码。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65641976d2f5e1655dd7f412