slot内容不更新是设计使然，因其仅做一次性节点投射；需用+表达式、slotchange事件+requestupdate()或lit的@state配合assignednodes()手动触发更新。

Slot内容不更新？检查是否误以为插槽是响应式通道

插槽（<slot></slot>）本身不触发重绘，它只做一次性的节点投射。父组件中修改了传入的文本或数据，但子组件里<slot></slot>包裹的内容没变——这不是 bug，是设计如此。

常见错误现象：<my-card>{{ title }}</my-card> 中 title 变了，但卡片内部 <slot name="header"></slot> 仍显示旧值；控制台无报错，DOM 也没刷新。

• 插槽分发的是 DOM 节点引用，不是响应式代理。静态 HTML 片段（比如直接写在标签体里的文本）在挂载时就被“固化”了
• 若需动态响应，必须把内容包在 <template></template> 里，并用表达式驱动，例如 <template slot="header">{{ title }}</template>
• Web Components 中没有模板编译层，所以得靠 slotchange 事件 + 手动调用 requestUpdate() 或重渲染影子 DOM

Web Components 中如何监听 Slot 内容变化并触发重绘

原生 <slot></slot> 不提供响应式更新能力，但浏览器提供了 slotchange 事件，可用于感知 Light DOM 内容变更。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 在自定义元素的 connectedCallback 中监听：this.shadowRoot.querySelector('slot').addEventListener('slotchange', () => this.requestUpdate())
• 注意：该事件只在 slot 分配关系发生改变时触发（如新增/移除直系子节点），不响应子节点内部属性或文本变化
• 若想响应子节点内 textContent 变更，需额外对分配进来的节点做 MutationObserver 监听（代价高，慎用）
• Lit 用户可直接在 updated() 钩子中检查 assignedNodes() 返回值变化，但需自行比对前后差异

Lit 组件里 Slot 内部组件属性不更新？别用 @property 绑定 slot 透传值

在 Lit 中，通过 slot 投射进来的子组件若用 @property 接收外部传入的属性（如 .mediaStream="${this.stream}"），其 updated() 回调不会自动执行——因为 Lit 的响应式系统未追踪 slot 渲染路径中的属性赋值。

• 根本原因：@property 的变更检测依赖于字段被 Lit 模板直接引用，而 slot 是运行时投射，绕过了模板解析链
• 正确做法：改用 @state 装饰器声明接收字段，任何赋值都会强制进入更新周期
• 或显式调用 this.requestUpdate()，尤其在 slotchange 后重新读取 assignedNodes() 并提取新值时
• 避免将 MediaStream 等非可序列化对象通过 attribute 传递，应走 property 或事件通信

::slotted() 样式为何不生效？它只作用于直接子元素且不可穿透嵌套

::slotted(*) 是唯一能从 Shadow DOM 内部样式化投射内容的伪类，但它有严格限制。

• 只能匹配被投射进来的**直系子元素**，不能选中子元素的后代（如 ::slotted(div p) 无效）
• 无法设置 display: contents 或影响继承链中的 font-size 等属性（部分浏览器支持有限）
• 若投射内容本身带 !important 或内联样式，会覆盖 ::slotted() 规则
• 想控制深层结构样式？要么让使用者加 class，要么放弃 ::slotted，改用 CSS 自定义属性（--my-card-title-color）配合继承

插槽的动态性不在标签本身，而在你如何桥接 Light DOM 变更与 Shadow DOM 更新逻辑。最容易被忽略的是：slotchange 事件不等价于数据变更，assignedNodes() 返回的是快照，不是响应式引用——每次要用都得重新查。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！