Custom Elements 与 Shadow DOM 是 Web 组件核心技术，前者用于定义自定义标签并控制行为，后者实现样式和结构隔离。1. Custom Elements 通过继承 HTMLElement 并调用 customElements.define() 注册，标签名需含短横线以避免冲突；2. Shadow DOM 通过 attachShadow() 挂载，提供独立 DOM 子树，防止样式互相影响，mode 可设为 open 或 closed 以控制访问权限；3. 结合使用时应采用语义化命名、利用 slot 内容分发、监听属性变化更新 UI，并将样式置于 Shadow DOM 内部以确保封装性，适用于现代浏览器，可构建不依赖框架的高复用性组件。
在现代前端开发中，Web组件提供了一种构建可复用、封装性强且无需依赖框架的UI组件的方式。其中，Custom Elements 和 Shadow DOM 是 Web 组件的两大核心技术。它们让开发者可以创建自定义 HTML 标签，并为其添加独立的样式和行为，实现真正的组件化开发。
Custom Elements：定义自定义标签
Custom Elements 允许开发者定义自己的 HTML 元素，并通过 JavaScript 控制其行为。浏览器原生支持这类元素，无需引入额外库。
要创建一个 Custom Element，需继承 HTMLElement 并使用 customElements.define() 方法注册。
class MyButton extends HTMLElement {
constructor() {
super();
// 初始化内容或属性
this.textContent = this.getAttribute(‘label’) || ‘默认按钮’;
}
// 可监听属性变化
static get observedAttributes() {
return [‘label’];
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === ‘label’) {
this.textContent = newValue;
}
}
}
customElements.define(‘my-button’, MyButton);
使用方式：
注意命名规则必须包含短横线（-），如 my-button，这是为了避免与标准 HTML 标签冲突。
Shadow DOM：实现样式与结构的隔离
Shadow DOM 提供了一个独立的 DOM 子树，与主文档 DOM 隔离。这意味着组件内部的样式不会影响外部页面，外部样式也不会污染组件内部。
在 Custom Element 构造函数中，可通过 attachShadow() 方法挂载 Shadow DOM。
class MyCard extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: ‘open’ });
shadow.innerHTML =
.card {
border: 1px solid #ddd;
padding: 16px;
border-radius: 8px;
background: #f9f9f9;
}
;
}
}
customElements.define(‘my-card’, MyCard);
使用方式：
这是一段卡片内容。
Shadow DOM 的 mode 可设为 open 或 closed。设为 open 时，JavaScript 可通过 element.shadowRoot 访问内部结构；closed 则不可访问，增强封装性。
结合使用建议与最佳实践
将 Custom Elements 与 Shadow DOM 结合，是构建高内聚、低耦合组件的标准方式。以下是一些实用建议：
始终使用语义化的自定义标签名，例如 user-avatar、data-table利用 实现内容分发，提升组件灵活性避免在构造函数中执行耗时操作，DOM 渲染可能受影响合理使用 observedAttributes 监听属性变化，更新 UI样式写在 Shadow DOM 内部，防止全局污染考虑兼容性：现代主流浏览器均支持，但旧版 IE 不行
基本上就这些。掌握 Custom Elements 与 Shadow DOM，能让你写出真正解耦、可复用的原生 Web 组件，不依赖 React 或 Vue 也能实现组件化开发。不复杂但容易忽略的是细节，比如标签命名和 Shadow DOM 模式选择。
以上就是Web组件开发规范_Custom Elements与Shadow DOM的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1540471.html
微信扫一扫 
支付宝扫一扫 
