直接赋值 innerhtml 会失效，因 style 标签被当作文本节点不进入 cssom；须用 createelement('style') + textcontent + appendchild 或 adoptedstylesheets。
为什么直接 innerHTML = '
常见错误是把含 <style></style> 的 HTML 字符串直接赋给 shadowRoot.innerHTML，比如：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+ 才稳定支持）
如何安全注入第三方 CSS（如 Bootstrap、Font Awesome）
不能把 <link rel="stylesheet"> 直接塞进 shadowRoot.innerHTML——它会加载到全局，失去隔离意义。必须确保所有样式仅作用于该 shadow tree。
- 用
DOMParser解析 HTML 字符串，提取<style></style>和<link>标签内容 - 对
<link>，需 fetch 其 href 内容，转为纯 CSS 文本，再创建style节点注入；或改用adoptedStyleSheets（兼容性需兜底） - 注意
@import、相对路径（如url(./img.png)）、CSS 变量继承链断裂等问题，需提前做资源代理或内联替换 - 若用
innerHTML = '<style></style>'替换，旧<style></style>被销毁，CSSOM 规则丢失，可能引发 FOUC 或闪烁
: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等）；禁止设display、margin、width - 别写
::slotted(*)——不可靠，也违背封装初衷；slot 内容的布局责任本该由使用者承担
容易被忽略的继承泄漏与重置策略
Shadow DOM 不自动隔离 font-family、color、line-height 这些可继承属性。宿主页面设了 body { font-family: "PingFang SC"; }，影子里的 <p></p> 依然会继承它。
- 在影子根最外层加
:host { all: initial; font-family: inherit; color: inherit; }——all: initial会清掉display，所以必须手动补上display: block或对应值 - 若组件需保持与宿主一致的字体/颜色体系，
inherit是合理选择；若需彻底独立，则显式声明font-family: system-ui等 - 动态注入时，
adoptedStyleSheets在 Safari 17.4+ / Chrome 73+ 才稳定，旧环境必须 fallback 到appendChild(style)方案
:host 和 ::slotted() 这两个窄门里。其余任何绕过方式，不是失效，就是埋坑。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
