shadow dom 仅提供封装隔离，不等于原子化设计；原子化需靠组件粒度组织、接口约定及样式契约，而非 shadow dom 自动实现。
Shadow DOM 本身不提供“原子化设计”，它只提供隔离边界；真正实现原子化，靠的是在 Shadow DOM 内部组织组件粒度、复用逻辑和样式契约，而不是靠 Shadow DOM 自动拆分或组合。
为什么直接套用 Shadow DOM 不等于原子化
原子化设计（如 Button、Icon、Input 这类最小可复用单元）依赖清晰的职责划分和接口约定，而 Shadow DOM 只负责封装——它不会自动帮你拆分组件、定义 props、处理状态或协调组合。常见误判是：以为只要每个自定义元素都 attachShadow()，就天然具备原子性。实际中：DOMException: Failed to execute 'attachShadow' on 'Element': Shadow root cannot be created on a node already hosting a shadow root. 这类报错往往源于强行给已有 Shadow DOM 的元素重复挂载，而非设计问题。
- Shadow DOM 是容器，不是设计方法论；Button 组件是否“原子”，取决于它是否只做一件事（渲染按钮 + 响应点击），而不是它有没有 shadowRoot
- 多个原子组件组合成 Card 时，若 Card 也用 Shadow DOM，但内部直接
shadowRoot.innerHTML = '<my-button></my-button>'，则my-button的 shadowRoot 会被正确创建，但它的样式/事件/生命周期完全独立——这没问题；问题出在父组件无法透传主题变量或统一控制尺寸 - 原子组件若依赖全局 CSS 变量（如
--button-padding），而宿主页面没设该变量，Shadow DOM 内部又没 fallback，就会渲染异常
:host 和 ::slotted() 是原子间协作的唯一合法通道
原子组件之间不靠“继承”或“共享作用域”协作，而是通过宿主元素状态和 slot 内容样式透传来对齐行为。浏览器只允许这两个伪类跨 boundary，其余方式（::ng-deep、/deep/）已在 Chrome 120+ 和 Firefox 115+ 中移除，继续使用等于放弃兼容性。
-
:host([size="large"])让外部通过属性控制原子组件形态，比写.button--large类更语义化且不可被外部样式覆盖 -
::slotted(svg)可统一设置插槽内图标颜色和垂直对齐，但不能设display: flex或margin——布局责任必须留给使用者，原子组件只管“怎么画”，不管“放哪” -
:host-context(.dark)已被标记为 deprecated，应改用:host(.dark)+ 外部主动加 class，避免隐式依赖祖先链
动态注入样式必须走 CSSOM，不能拼字符串
原子组件常需支持主题切换或运行时配置，但若用 shadowRoot.innerHTML = `<style>${css}</style>`，<style></style> 标签会被当普通 HTML 解析，不进入 CSSOM，后续调用 style.textContent = newCss 完全无效。
- 正确做法：用
document.createElement('style')创建节点，再shadowRoot.appendChild(style)；或更现代的new CSSStyleSheet()实例（Chrome 73+ / Safari 16.4+ 支持） - 第三方图标库（如 Font Awesome）若通过
<link rel="stylesheet">加载，会逃逸到document.head，污染全局；必须代理请求、内联 CSS 文本、再注入CSSStyleSheet - 所有相对路径（如
url(./icon.svg)）在 Shadow DOM 中默认失效，需提前替换为绝对 URL 或 base64 内联
调试和维护必须用 mode: 'open'
选 mode: 'closed' 并不能增强封装能力，反而让 element.shadowRoot 返回 null，DevTools 无法 inspect，querySelector 查不到内部结构，日常开发基本靠猜。
- 原子组件发布前可切回
'closed'防止意外访问，但开发、测试、CI 构建阶段一律用'open' - 查内部节点必须用
host.shadowRoot.querySelector('button')，host.querySelector('button')永远返回null——这不是 bug，是边界设计使然 - 事件监听必须绑定在
shadowRoot上，或利用event.composedPath()捕获冒泡事件；不要指望host.addEventListener('click', ...)能收到 shadow 内部按钮的原生 click
真正卡住原子化落地的，从来不是 Shadow DOM API 本身，而是组件间如何约定尺寸单位、主题变量名、slot 分发规则和错误边界——这些没法靠 attachShadow() 自动生成，得靠团队文档和类型约束来守住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
