最常见的原因是自定义元素未启用Shadow DOM或未调用attachShadow()，因slot仅在Shadow Root内生效，普通DOM中会被当作文本节点原样渲染。
slot 标签在自定义元素里为什么没生效
最常见的原因是：自定义元素没有启用 Shadow DOM，或者用了 mode: "open" 但没调用 attachShadow()。浏览器只会在 Shadow Root 下解析 <slot>，普通 light DOM 里的 <slot> 会被当作文本节点原样渲染。
实操建议：
- 必须在构造函数或
connectedCallback中调用this.attachShadow({ mode: "open" }) - Shadow DOM 创建后，再把内容（比如
innerHTML或appendChild）写入this.shadowRoot - 不要在
template元素外直接写<slot>—— 它必须出现在 Shadow Root 的 HTML 结构中
如何让多个 slot 区分不同位置的内容
靠 name 属性匹配。父组件传入的子节点如果没有 slot 属性，会落到默认 slot（即没有 name 的 <slot>）；有 slot="header" 的节点，只会进 <slot name="header"></slot>。
注意点：
立即学习“前端免费学习笔记（深入）”；
- 命名 slot 不会 fallback 到默认 slot，不匹配就“消失”（实际是被丢弃）
-
slot属性只能写在 light DOM 子节点上，不能写在 Shadow DOM 内部 - 一个节点只能指定一个
slot值，重复写（如slot="a" slot="b"）以第一个为准
示例：
<my-card> <h2 slot="header">标题</h2> <p>这是主体内容</p> <button slot="footer">确定</button> </my-card>对应 shadow template：
<div class="card"> <header><slot name="header"></slot></header> <main><slot></slot></main> <footer><slot name="footer"></slot></footer> </div>
slotchange 事件监听不到内容更新？
slotchange 只在 slot 分发内容**首次变化时触发一次**，不是响应式监听器。比如后续动态增删 light DOM 子节点，不会再次触发 —— 浏览器不会持续观察。
替代方案：
- 监听父元素的
slot.assignedNodes({ flatten: true })返回值变化（需手动轮询或结合MutationObserver） - 对
<slot>元素使用assignedElements()/assignedNodes()主动查询当前分发到的内容 - 如果只是想“等 slot 渲染完”，可用
requestAnimationFrame或Promise.resolve().then()延迟读取
使用 slot 时容易忽略的样式穿透问题
light DOM 内容进入 slot 后，仍属于原作用域，CSS 选择器不会自动穿透到它身上。比如你在 shadow style 里写 p { color: red; }，对 slot 里传入的 <p> 无效。
解决方式有限且明确：
- 用
::slotted(p)修饰符（仅支持简单选择器，不支持后代、伪类等） - 让使用者自己加 class，或在 light DOM 节点上预设样式
- 避免依赖深度样式控制，把可定制部分暴露为属性（如
header-color）更可靠
复杂交互逻辑（比如 slot 内按钮点击要影响 shadow 内状态）最好通过事件冒泡 + 自定义事件透出，而不是试图从 shadow 里直接操作 slot 子节点 —— 那些节点不属于你。
