Web Components 是浏览器原生支持的可复用自定义元素标准，核心含自定义元素（需含短横线命名、继承 HTMLElement）和 Shadow DOM（提供样式与结构隔离），二者协作实现真正封装。
Web Components 是浏览器原生支持的一套技术标准，让开发者能创建可复用、封装良好的自定义 HTML 元素。它不是框架，也不依赖第三方库，核心包括三部分：自定义元素（Custom Elements）、Shadow DOM 和 HTML 模板（）。其中自定义元素和 Shadow DOM 是最常用、最关键的两个模块。
自定义元素：用 JavaScript 定义新 HTML 标签
你可以像使用
customElements.define() 注册这个新元素，且标签名必须包含短横线（-），这是强制规范，防止与未来 HTML 标准冲突。
定义方式有两种：
基于类的自定义元素：继承 HTMLElement，在构造函数中初始化，用 connectedCallback 响应元素被插入 DOM 的时机 自治型（autonomous）元素：完全新建标签，不继承内置元素（如不继承 HTMLButtonElement） 定制内建元素（customized built-in elements）：扩展原生元素（如 extends 'button'），需在 HTML 中用 is 属性调用，例如
Shadow DOM：为组件提供样式和结构的私有边界
Shadow DOM 是一段附加在某个元素上的“影子” DOM 树，它与主文档 DOM 隔离。这种隔离是真正的封装——外部 CSS 选不到 Shadow 内部的节点，内部样式也不会意外泄漏到全局，JS 也默认无法跨边界访问（除非显式设置 {mode: 'open'} 并通过 element.shadowRoot 访问）。
立即学习“Java免费学习笔记（深入）”；
创建 Shadow DOM 很简单：
在自定义元素的 constructor 或 connectedCallback 中调用 this.attachShadow({mode: 'open'}) 然后向 this.shadowRoot 插入 HTML 结构、样式或模板内容 mode: 'closed' 会彻底屏蔽外部 JS 访问，一般不推荐，调试困难
两者协作：一个最小可用的自定义卡片组件
下面是一个带 Shadow DOM 的 示例逻辑：
注册 MyCard 类，继承 HTMLElement 在 constructor 中调用 attachShadow 创建 Shadow 根节点 在 connectedCallback 中向 shadowRoot 写入结构和 ，样式只作用于该组件内部 支持通过 attributeChangedCallback 监听属性变化（如 title），实现响应式更新
这样写出来的 就是独立、可复用、无样式污染的组件。
基本上就这些。不需要构建工具，不依赖 React 或 Vue，纯浏览器能力。关键点在于：自定义元素负责“怎么用”，Shadow DOM 负责“怎么藏”。两者配合，才真正实现 Web 级别的组件化封装。
以上就是什么是JavaScript的Web Components_自定义元素和Shadow DOM如何工作？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1542410.html
微信扫一扫 
支付宝扫一扫 
