Custom Elements 和 Shadow DOM 结合实现高度封装的自定义组件，通过定义标签、隔离样式、监听属性变化，支持内容分发与事件代理，可在任何现代浏览器中构建可复用、无框架依赖的 UI 组件。
Custom Elements 和 Shadow DOM 是 Web Components 的核心部分，它们让开发者可以创建可复用、封装良好的自定义 HTML 元素。这两项技术结合使用，能实现真正意义上的组件化开发，无需依赖框架也能构建结构清晰、样式隔离的 UI 组件。
Custom Elements 允许你创建新的 HTML 标签，并赋予其行为逻辑。通过 JavaScript 定义类并继承 HTMLElement，然后使用 customElements.define() 方法注册元素。
例如，你可以定义一个名为 <my-card> 的卡片组件：
class MyCard extends HTMLElement {
constructor() {
super();
// 可在此设置默认内容或事件监听
}
connectedCallback() {
this.innerHTML = `
之后就可以在页面中直接使用：<my-card title="欢迎"></my-card>。元素会在插入 DOM 时自动渲染内容。
Shadow DOM 提供了一个独立的 DOM 子树，与主文档 DOM 隔离。这意味着组件内部的样式不会影响外部页面，外部样式也不会意外修改组件内部结构。
在 Custom Element 中启用 Shadow DOM 很简单，只需在构造函数中调用 this.attachShadow({ mode: 'open' })：
constructor() {
super();
const shadow = this.attachShadow({ mode: 'open' });
shadow.innerHTML = `
这里用了 <slot> 来支持内容分发，使得外部传入的内容可以被正确渲染进组件内部。
将 Custom Elements 和 Shadow DOM 结合，能实现高度封装的组件：
比如添加属性监听：
static get observedAttributes() { return ['title']; }
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'title') {
this.shadowRoot.querySelector('.card').textContent = newValue;
}
}
基本上就这些。掌握 Custom Elements 和 Shadow DOM 后，你可以写出真正独立、可移植的 Web 组件，为复杂应用提供干净的 UI 模块化方案。不复杂但容易忽略细节，比如正确使用 slot 和处理事件代理。
以上就是Web组件：Custom Elements与Shadow DOM的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
360
收藏
