Shadow DOM 不自动响应插槽内容的动态样式变更，因插槽仅投射节点而不监听其变化；样式由节点自身样式与::slotted()规则按层叠逻辑决定，需通过CSS变量、class切换或组件重渲染实现视觉更新。
Shadow DOM 本身不自动响应插槽（<slot>）内容的动态变更，包括样式更新。插槽只是节点投射机制，它把 light DOM 中的节点“挪”进 shadow root 的指定位置，但不会监听这些节点自身的属性、类名或内联样式的后续变化。所以，当外部内容被动态修改（比如 JS 改了某个 slot="header" 元素的 className 或 style.color），Shadow DOM 内部不会自动重绘或重新应用样式规则。
插槽内容样式更新靠的是层叠逻辑，不是响应式触发
插槽中投射进来的节点，其最终样式由两部分共同决定：
- 节点自身带的样式（
class、style属性、全局 CSS 规则）——优先级最高 - Shadow DOM 内通过
::slotted()定义的样式 —— 只能叠加，不能覆盖内联style或高优先级 class
例如：<h2 slot="title" style="color: green">标题</h2> 投射进 ::slotted(h2) { color: blue; } 的作用域，实际显示仍是绿色。这不是 bug，而是 CSS 层叠的正常行为。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
让插槽内容样式“看起来更新了”的可行方式
真正要让视觉效果随数据变化而更新，得从源头控制样式来源，而不是指望插槽自动刷新：
-
用 CSS 自定义属性统一驱动：在宿主元素上设置
--title-color，Shadow DOM 内写::slotted([slot="title"]) { color: var(--title-color); }，JS 修改宿主的style.setProperty('--title-color', 'red')即可生效 -
避免直接操作投射节点的 style：改用 class 切换 + Shadow 内预置对应样式，比如
::slotted(.state-error) { color: #d32f2f; }，再通过 JS 给投射节点加/删state-error类 -
配合组件状态触发重渲染：如果用 Lit 或类似框架，可在父组件数据变更时调用子组件的
requestUpdate()，让它重新执行render()，从而重建整个 slot 结构（含新样式）
::slotted() 的限制必须提前知道
这个伪元素能力有限，直接影响样式更新策略：
- 不支持嵌套选择器（
::slotted(div span)无效） - 无法修改投射节点自身的
class或style属性，只能加样式规则 - IE 完全不支持，需降级方案（如 fallback class + 全局样式）
- 大量使用
::slotted(*)可能引发重排，尤其在高频更新场景
需要强制刷新插槽视觉效果时怎么办
极少数情况下，比如手动替换投射节点后样式没及时体现，可以触发一次轻量重绘：
- 给宿主元素临时加个无影响的 class（如
force-redraw），再立即移除 - 调用
this.shadowRoot.querySelector('slot').assignedNodes()触发 slot 分发检查（部分浏览器会同步更新） - 更稳妥的做法是：在变更投射内容后，显式调用
this.requestUpdate()（Lit）或this.dispatchEvent(new Event('slotchange', {bubbles: true}))，让监听方主动响应
