什么是JavaScript的Web Components_自定义元素和Shadow DOM如何工作？

Web Components 是浏览器原生支持的可复用自定义元素标准，核心含自定义元素（需含短横线命名、继承 HTMLElement）和 Shadow DOM（提供样式与结构隔离），二者协作实现真正封装。

Web Components 是浏览器原生支持的一套技术标准，让开发者能创建可复用、封装良好的自定义 HTML 元素。它不是框架，也不依赖第三方库，核心包括三部分：自定义元素（Custom Elements）、Shadow DOM 和 HTML 模板（<template></template>）。其中自定义元素和 Shadow DOM 是最常用、最关键的两个模块。

自定义元素：用 JavaScript 定义新 HTML 标签

你可以像使用 <p> 或 <code><button></button> 一样，定义并使用自己的标签，比如 <my-card></my-card> 或 <date-picker></date-picker>。浏览器通过 customElements.define() 注册这个新元素，且标签名必须包含短横线（-），这是强制规范，防止与未来 HTML 标准冲突。

定义方式有两种：

• 基于类的自定义元素：继承 HTMLElement，在构造函数中初始化，用 connectedCallback 响应元素被插入 DOM 的时机
• 自治型（autonomous）元素：完全新建标签，不继承内置元素（如不继承 HTMLButtonElement）
• 定制内建元素（customized built-in elements）：扩展原生元素（如 extends 'button'），需在 HTML 中用 is 属性调用，例如 <button is="fancy-button"></button>

Shadow DOM：为组件提供样式和结构的私有边界

Shadow DOM 是一段附加在某个元素上的“影子” DOM 树，它与主文档 DOM 隔离。这种隔离是真正的封装——外部 CSS 选不到 Shadow 内部的节点，内部样式也不会意外泄漏到全局，JS 也默认无法跨边界访问（除非显式设置 {mode: 'open'} 并通过 element.shadowRoot 访问）。

立即学习“Java免费学习笔记（深入）”；

创建 Shadow DOM 很简单：

标签： css vue react javascript java html js 浏览器 工具