shadow dom 是唯一能从浏览器渲染引擎层面切断外部 css 污染的原生机制；必须用 createelement 创建 style/script 节点并 appendchild，禁用 innerhtml 直接注入；:host 和 ::slotted() 是唯一合法透传通道；第三方库需显式传入 shadowroot 作为上下文。
Shadow DOM 是唯一能从浏览器渲染引擎层面切断外部第三方 CSS 污染的原生机制；它不靠权重博弈、不靠命名约定，而是让外部样式规则压根不参与内部节点的样式计算。
为什么 innerHTML = '<style>...</style>' 在 shadowRoot 里会失效
常见错误是把含 <style> 的 HTML 字符串直接赋给 <code>shadowRoot.innerHTML</style>，比如：
shadowRoot.innerHTML = `<div class="card"></div><style>.card { border: 1px solid red; }</style>`;
这会导致 <style></style> 标签被当作文本节点解析，不进入 CSSOM，后续 JS 修改（如 sheet.cssRules[0].style.borderColor）完全无效，甚至触发 FOUC。
- 必须用
document.createElement('style')创建样式节点，再设textContent，最后shadowRoot.appendChild(style) - 禁止在字符串模板中拼接
<style></style>，尤其不能混入用户输入（防 XSS） - 若需复用基础样式（如字体重置），可提前创建
CSSStyleSheet实例，再通过shadowRoot.adoptedStyleSheets = [sheet]注入（注意 Safari 16.4+、Chrome 73+ 才稳定支持）
如何安全注入第三方 HTML + CSS + JS 到 shadowRoot
直接塞字符串会丢掉 <script></script> 执行、<link> 加载逃逸到全局、<style></style> 不生效——必须拆解处理。
- 把完整 HTML（含结构、
<style></style>、<script></script>）写进<template></template>标签 - 用
template.content.cloneNode(true)拷贝节点树 - 遍历克隆结果：
shadowRoot.appendChild(style)处理每个<style></style>；对每个<script></script>，新建document.createElement('script')并appendChild到shadowRoot - 绝对禁止把
<link rel="stylesheet">插入shadowRoot.innerHTML——它会加载到全局，失去隔离意义
:host 和 ::slotted() 是唯一合法的“透传通道”
外部 button { color: red !important; } 对 shadow 内按钮完全无效，这不是权重问题，是浏览器根本没把这条规则纳入该 shadow tree 的样式计算流程。想有限响应外部状态，只能走规范定义的两个出口：
-
:host匹配宿主元素自身（如<pre class="brush:php;toolbar:false;" view-block></pre>标签），支持属性选择器：:host([loading])、上下文选择器：:host-context(.theme-dark) -
::slotted(p)只影响传入<slot></slot>的顶层<p></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 执行上下文的迁移——这点一漏，隔离就形同虚设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
