如何利用HTML Shadow DOM管理组件内部资源

必须调用 attachShadow({ mode: ‘open’ }) 创建影子根，否则后续资源注入无效；禁止直接赋值 innerHTML 含 style/script 的字符串，应通过 DOMParser 解析并分别注入 shadowRoot；JS 初始化须限定作用域，如 new Quill(shadowRoot.querySelector(‘.ql-editor’))。

attachShadow({ mode: ‘open’ }) 是资源管理的起点

不调用 attachShadow()，后续所有资源注入都无效——Shadow DOM 不是 HTML 标签，不能靠写死在模板里生效。必须在自定义元素的 constructor 中调用，且只能一次；重复调用会抛 InvalidStateError。选 mode: 'closed' 会让 element.shadowRoot 返回 null，连 console.dir() 都看不到内部结构，调试和自动化测试直接瘫痪。

别用 innerHTML = ‘…’ 注入含 style/script 的 HTML 字符串

这是最常踩的坑：把带 <style></style> 或 <script></script> 的字符串直接赋给 shadowRoot.innerHTML，会导致：

• <style></style> 被当作文本节点解析，不进入 CSSOM，sheet.cssRules 始终为空
• <script></script> 在全局作用域执行，查不到 shadow 内元素，new Quill('#editor') 静默失败
• <link rel="stylesheet"> 加载到 document.head，样式逃逸，污染宿主页面
• CSP 策略可能拦截内联脚本，报 Refused to execute inline script

安全注入第三方资源的三步实操

以集成 Quill 编辑器为例，需确保 JS 初始化、CSS 样式、字体图标全部限定在当前 shadow tree 内：

• 用 DOMParser 解析 HTML 字符串，提取所有 <style></style> 文本，创建 style 元素后 appendChild 到 shadowRoot
• 对 <script src="..."></script>，手动 fetch 后用 eval（注意绑定 this 和 window 上下文到当前 shadowRoot）
• JS 初始化必须传入 shadowRoot 为查找范围：new Quill(shadowRoot.querySelector('.ql-editor'))，而非依赖全局选择器

:host 和 ::slotted() 是唯一可控的穿透出口

想让外部主题或内容影响组件，只能走这两个规范接口，其余全是历史包袱：

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

• :host([disabled]) 匹配宿主元素自身属性，适合控制容器状态；:host-context(.theme-dark) 检测祖先链 class，用于暗色主题透传
• ::slotted(p) 只影响传入 <slot></slot> 的顶层 <p></p>，且仅支持 color、font-family、line-height 等可继承属性
• ::slotted(*) 和 /deep/、::ng-deep、>> 已在 Chrome 120+、Firefox 115+ 中移除，继续使用等于放弃兼容性

资源管理的核心不是“塞进去”，而是“锁住作用域”——CSS 不进不出，JS 查找不越界，slot 分发不越层。任何绕过 shadowRoot 边界的加载方式，都会让隔离失效。