Slot内容不更新是设计使然，因其仅做一次性节点投射；需用<template slot>+表达式、slotchange事件+requestUpdate()或Lit的@state配合assignedNodes()手动触发更新。
Slot内容不更新？检查是否误以为插槽是响应式通道
插槽（<slot>）本身不触发重绘，它只做一次性的节点投射。父组件中修改了传入的文本或数据，但子组件里<slot>包裹的内容没变——这不是 bug，是设计如此。
常见错误现象：<my-card>{{ title }}</my-card> 中 title 变了，但卡片内部 <slot name="header"></slot> 仍显示旧值；控制台无报错，DOM 也没刷新。
- 插槽分发的是 DOM 节点引用，不是响应式代理。静态 HTML 片段（比如直接写在标签体里的文本）在挂载时就被“固化”了
- 若需动态响应，必须把内容包在
<template>里，并用表达式驱动，例如<template slot="header">{{ title }}</template> - Web Components 中没有模板编译层，所以得靠
slotchange事件 + 手动调用requestUpdate()或重渲染影子 DOM
Web Components 中如何监听 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）配合继承
