Web Components 是浏览器原生支持的可复用自定义元素标准，核心含自定义元素（需含短横线命名、继承 HTMLElement）和 Shadow DOM（提供样式与结构隔离），二者协作实现真正封装。
Web Components 是浏览器原生支持的一套技术标准，让开发者能创建可复用、封装良好的自定义 HTML 元素。它不是框架，也不依赖第三方库，核心包括三部分：自定义元素（Custom Elements）、Shadow DOM 和 HTML 模板（）。其中自定义元素和 Shadow DOM 是最常用、最关键的两个模块。
自定义元素：用 JavaScript 定义新 HTML 标签
你可以像使用 定义方式有两种： Shadow DOM 是一段附加在某个元素上的“影子” DOM 树，它与主文档 DOM 隔离。这种隔离是真正的封装——外部 CSS 选不到 Shadow 内部的节点，内部样式也不会意外泄漏到全局，JS 也默认无法跨边界访问（除非显式设置 立即学习“Java免费学习笔记（深入）”； 创建 Shadow DOM 很简单： 下面是一个带 Shadow DOM 的 这样写出来的 基本上就这些。不需要构建工具，不依赖 React 或 Vue，纯浏览器能力。关键点在于：自定义元素负责“怎么用”，Shadow DOM 负责“怎么藏”。两者配合，才真正实现 Web 级别的组件化封装。 一样，定义并使用自己的标签，比如 customElements.define() 注册这个新元素，且标签名必须包含短横线（-），这是强制规范，防止与未来 HTML 标准冲突。
HTMLElement，在构造函数中初始化，用 connectedCallback 响应元素被插入 DOM 的时机HTMLButtonElement）extends 'button'），需在 HTML 中用 is 属性调用，例如
Shadow DOM：为组件提供样式和结构的私有边界
{mode: 'open'} 并通过 element.shadowRoot 访问）。
constructor 或 connectedCallback 中调用 this.attachShadow({mode: 'open'})
this.shadowRoot 插入 HTML 结构、样式或模板内容mode: 'closed' 会彻底屏蔽外部 JS 访问，一般不推荐，调试困难两者协作：一个最小可用的自定义卡片组件
MyCard 类，继承 HTMLElement
constructor 中调用 attachShadow 创建 Shadow 根节点connectedCallback 中向 shadowRoot 写入结构和 ，样式只作用于该组件内部attributeChangedCallback 监听属性变化（如 title），实现响应式更新
