直接赋值innerhtml = htmlstring在shadow dom中失效且危险，因浏览器拒绝将其作为样式注入入口：被当文本解析不入cssom，在全局执行致xss或csp报错，仍加载到主文档失去隔离；正确做法是用domparser解析后手动处理各节点。
为什么直接 innerHTML = htmlString 会失效甚至危险
这不是语法错误，而是 Shadow DOM 的边界机制在起作用。浏览器明确拒绝把 innerHTML 当作样式注入入口：内联 <style></style> 会被解析为普通文本节点，不进入 CSSOM；<script></script> 在全局上下文执行，可能污染 window 或触发 CSP 报错；<link rel="stylesheet"> 加载后仍写入主文档 ，完全失去隔离意义。
- 现象：宿主页面字体突变、按钮边距消失、
document.querySelector('.ql-toolbar')返回 null 但编辑器渲染异常 - 根本原因：ShadowRoot 不是容器，是边界——它只接受标准 DOM 节点，不解析字符串中的标签语义
- 安全替代：必须用
DOMParser解析 HTML 字符串，再手动提取<style></style>、剥离<script></script>、代理<link>
如何正确创建 shadowRoot 并注入第三方 HTML
宿主元素选错或模式设错，attachShadow() 就会直接抛 InvalidStateError 或返回 null。只有 <div>、<code><span></span>、自定义元素（如 <cms-block></cms-block>）支持挂载；<p></p>、<img>、<input> 等原生替换元素一律不支持。
- 必须用
{ mode: 'open' }——'closed'下host.shadowRoot恒为null，DevTools 无法 inspect，调试等于盲操 - 宿主元素需已插入 DOM，不能在
document.createElement('div')后立刻调用attachShadow() - 注入 HTML 的正确链路：
new DOMParser().parseFromString(html, 'text/html')→ 遍历doc.body.childNodes→ 对每个<style></style>调用shadowRoot.appendChild(style)
怎么让外部样式有限穿透，又不破坏封装
想靠 button { color: red !important } 影响 Shadow 内按钮？浏览器压根不把这条规则送进 ShadowRoot 的样式计算流程。W3C 规范只允许两个合法“穿墙”钩子：:host 和 ::slotted()，其余全是单向封闭。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
:host([disabled])匹配宿主元素自身属性，可用于响应状态变化；:host-context(.dark)匹配祖先元素上的 class，适合主题透传 -
::slotted(p)只作用于被<slot></slot>投影进来的顶层<p></p>，且仅支持可继承属性（color、font、background-color） - 禁止写
::slotted(*) { margin: 0; }——布局责任本该由使用者承担，强行接管反而导致 slot 内容渲染异常
第三方编辑器（如 Quill）在 Shadow DOM 中初始化失败怎么办
像 new Quill('#editor') 这类依赖 document.querySelector 的初始化方式，在 Shadow DOM 里必然失败：它去主文档找 #editor，而真实节点在 shadowRoot 里。
- 解法唯一：改用容器节点参数，例如
new Quill(shadowRoot.querySelector('.ql-editor'))，把查找范围锁死在 shadow 内 - 若 SDK 不支持容器参数，必须重写初始化逻辑——提取其内部 DOM 构建代码，手动注入到
shadowRoot，再绑定事件和样式 - 注意：所有
document、window引用都需重绑定，否则document.body.classList.add('loading')会污染整个页面
document 和 window 仍是全局的——哪怕样式彻底隔离了，脚本仍可能捅破天。
