Shadow DOM样式隔离最可靠，因浏览器在渲染阶段直接切断跨boundary匹配；外部CSS无法穿透，必须将样式注入shadowRoot内部，:host和::slotted是唯一合法跨边界方式。
Shadow DOM 是组件库实现样式隔离最可靠、最原生的机制，它不靠命名约定或权重压制，而是由浏览器在渲染阶段直接切断跨 boundary 的样式匹配。只要正确挂载和注入，外部 button { color: red !important; } 对 shadow 内按钮完全无效。
必须把样式写进 shadowRoot 里
外部 CSS 文件、全局 <style></style> 或父组件样式都无法穿透到 shadow 内部。常见错误是把样式写在组件外，结果元素渲染了却没样式。
- 用
shadowRoot.innerHTML += '<style>...</style>'最简单，适合开发期 - 生产环境建议用
fetch加载独立 CSS 文件，再创建<style></style>节点 append 进去，利于缓存和压缩 - 避免用
<link rel="stylesheet">直接插入 shadow，它会加载到 document.head，造成样式逃逸
用 :host 和 ::slotted 控制有限穿透
完全封闭不利于定制，但穿透必须可控、可预期。
-
:host只能选中宿主元素自身（比如<my-button></my-button>标签），适合控制尺寸、显示方式、状态响应（如:host([disabled])） -
::slotted(p)只影响通过<slot></slot>投射进来的顶层<p></p>，且仅支持可继承属性（color、font-family等），不支持margin或display - 禁用
::slotted(*)或:host ::slotted(*)—— 行为不可靠，违背封装原则
主题适配靠 CSS 变量 + 宿主挂载
Shadow DOM 不继承外部变量，但可以主动从宿主读取，这是轻量级主题方案的核心。
- 变量必须声明在宿主标签上：
<my-button style="--btn-bg: #13c2c2;"></my-button>，写在或 wrapper 里无效 - 所有
var()必须带 fallback：background: var(--btn-bg, #007bff);，否则未设置时会静默失效 - 运行时切换主题，优先调用
element.style.setProperty('--btn-bg', '...')，比切 class 更直接、更可控
第三方框架注入要隔离执行上下文
Foundation、Quill、Font Awesome 这类依赖全局环境的库，直接塞进 shadow 会出错。
- 不要用
innerHTML = '...<script>...</script>'，<script></script>会在全局执行，找不到 shadow 内元素 -
<script></script>要新建节点并appendChild到 shadowRoot，初始化时传入shadowRoot作为查找上下文，例如new Quill(shadowRoot.querySelector('.ql-editor')) -
<style></style>内容需提取后转为CSSStyleSheet实例（Chrome 73+/Safari 16.4+ 支持adoptedStyleSheets），否则@import和相对路径可能失效
