必须调用 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 边界的加载方式，都会让隔离失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
