Shadow DOM 是唯一能从浏览器渲染引擎层面切断外部 CSS 污染的原生机制；必须用 createElement 创建 style/script 节点并 appendChild，禁用 innerHTML 直接注入；:host 和 ::slotted() 是唯一合法透传通道；第三方库需显式传入 shadowRoot 作为上下文。
Shadow DOM 是唯一能从浏览器渲染引擎层面切断外部第三方 CSS 污染的原生机制；它不靠权重博弈、不靠命名约定，而是让外部样式规则压根不参与内部节点的样式计算。
为什么 innerHTML = '<style>...</style>' 在 shadowRoot 里会失效</H3>
<p>常见错误是把含 <code><style>
的 HTML 字符串直接赋给 shadowRoot.innerHTML，比如：
shadowRoot.innerHTML = `<div class="card"></div><style>.card { border: 1px solid red; }</style>`;
这会导致 <style> 标签被当作文本节点解析，不进入 CSSOM，后续 JS 修改（如 sheet.cssRules[0].style.borderColor）完全无效，甚至触发 FOUC。
- 必须用
document.createElement('style')创建样式节点，再设textContent，最后shadowRoot.appendChild(style) - 禁止在字符串模板中拼接
<style>，尤其不能混入用户输入（防 XSS） - 若需复用基础样式（如字体重置），可提前创建
CSSStyleSheet实例，再通过shadowRoot.adoptedStyleSheets = [sheet]注入（注意 Safari 16.4+、Chrome 73+ 才稳定支持）
如何安全注入第三方 HTML + CSS + JS 到 shadowRoot
直接塞字符串会丢掉 <script> 执行、<link> 加载逃逸到全局、<style> 不生效——必须拆解处理。
立即学习“前端免费学习笔记（深入）”；
- 把完整 HTML（含结构、
<style>、<script>）写进<template>标签 - 用
template.content.cloneNode(true)拷贝节点树 - 遍历克隆结果：
shadowRoot.appendChild(style)处理每个<style>；对每个<script>，新建document.createElement('script')并appendChild到shadowRoot - 绝对禁止把
<link rel="stylesheet">插入shadowRoot.innerHTML——它会加载到全局，失去隔离意义
:host 和 ::slotted() 是唯一合法的“透传通道”
外部 button { color: red !important; } 对 shadow 内按钮完全无效，这不是权重问题，是浏览器根本没把这条规则纳入该 shadow tree 的样式计算流程。想有限响应外部状态，只能走规范定义的两个出口：
-
:host匹配宿主元素自身（如<preview-block>标签），支持属性选择器：:host([loading])、上下文选择器：:host-context(.theme-dark) -
::slotted(p)只影响传入<slot>的顶层<p>元素，且仅支持可继承属性（color、font-family、line-height、background-color） - 禁止写
::slotted(*)或:host ::slotted(*)——部分浏览器行为不一致，且违背封装原则；slot 内容的布局责任应由使用者承担
容易被忽略的初始化上下文迁移
第三方库（如 Quill、TinyMCE、Foundation）默认查 document，在 shadow 中运行会静默失败或报 Cannot find element。
- 必须显式传入 shadow 内节点：如
new Quill(shadowRoot.querySelector('.ql-editor')) - TinyMCE 6.3+ 支持
target参数：tinymce.init({ target: shadowRoot.querySelector('.tinymce') }) - 若库不支持容器参数，就得 fork 源码，把所有
document.querySelector替换为shadowRoot.querySelector
真正难啃的不是 attachShadow 这一行代码，而是资源路径（fetch、图片 src、@import 的 base URL）和 JS 执行上下文的迁移——这点一漏，隔离就形同虚设。
