shadow dom 的样式隔离与 mode 无关，open 和 closed 均能严格隔离样式；closed 仅使 shadowroot 返回 null，不增强隔离，却导致调试失效、测试不可行、维护困难，实际项目应统一用 open 模式。
直接用 element.attachShadow({ mode: 'open' }) 就能开启严格样式隔离——mode: 'closed' 不仅不增强隔离效果，反而让调试、测试和维护全部掉进黑盒，实际项目中不该用。
为什么 mode: 'closed' 对样式隔离毫无帮助
Shadow DOM 的样式隔离能力与 mode 参数完全无关。浏览器在解析 CSS 时，根本不会把外部样式表纳入 shadowRoot 的 CSSOM 构建流程，这个切断是强制的、原生的、不可绕过的。无论 open 还是 closed，body { color: red } 都影响不了 shadow 内的 <p></p>，button { margin: 0 } 也穿不透边界。
常见错误现象：
-
element.attachShadow({ mode: 'closed' })后，element.shadowRoot返回null，导致后续shadowRoot.innerHTML = '...'直接报错 - 想检查 shadow 内样式却看不到
#shadow-root节点，只能靠console.log(element)猜结构 - 误以为 “封闭=更安全”，结果发现 DevTools 里禁用 “Show user agent shadow DOM” 后连结构都看不到，协作和 QA 基本瘫痪
必须在 constructor 中调用 attachShadow
自定义元素生命周期里，只有 constructor 是唯一安全创建 shadow root 的时机。这里要检查 this.shadowRoot 是否已存在，避免重复挂载报错。
实操建议：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 不要在
connectedCallback里调用attachShadow—— 每次元素被插入文档都会触发，必然报Failed to execute 'attachShadow' on 'Element': Shadow root has already been attached - 写成
if (!this.shadowRoot) this.attachShadow({ mode: 'open' })，比try/catch更轻量、更明确 - 如果组件可能被多次 upgrade（比如动态注册后又重载），这个判断就是必须的
样式必须注入到 shadowRoot 内部，不能靠全局 <style></style>
Shadow DOM 的样式作用域只认自己树内的 CSS。把 <style></style> 标签塞进 document.head，哪怕加了类名前缀，照样会穿透污染；用 innerHTML 往 shadowRoot 里写 <style>button{color:blue}</style> 也不行——它会被当普通 HTML 解析，不进 CSSOM，无法参与样式计算，也无法响应动态更新。
正确做法：
- 用
document.createElement('style')创建节点，再shadowRoot.appendChild(styleEl) - 或用
CSSStyleSheet实例：const sheet = new CSSStyleSheet(); sheet.replaceSync('button { color: blue }'); shadowRoot.adoptedStyleSheets = [sheet] - 第三方 CSS（如 Foundation）必须走
adoptedStyleSheets或内联<style></style>标签（且确保是通过 DOM API 插入，不是字符串拼接）
:host 和 ::slotted 是唯一可控的“穿墙”通道
浏览器只允许这两个伪类有限穿透 shadow boundary。它们不是漏洞，而是设计好的接口。滥用等于主动开窗。
关键限制：
-
:host只能匹配宿主元素自身（即<my-button></my-button>这个标签），写成:host div或:host .inner全部无效 -
::slotted(*)只作用于被<slot></slot>投影进来的 light DOM 节点，且只支持可继承属性（color、font、background-color），margin、display、width禁止设 - 别用
* { all: initial }在 shadow 内重置，它会清掉inherit链，导致文本颜色、字体等基础继承失效
真正难的是保持“不越界”——不是想办法让样式穿过去，而是克制住写 :host div 或给 slot 内容强设 margin 的冲动。Shadow DOM 的隔离强度，取决于你有没有持续尊重那条浏览器画下的边界线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
