插槽是内容定位协议而非搬运工，其健壮性取决于对空内容、命名冲突、事件流断裂和样式穿透边界的预判。
HTML 插槽（<slot></slot>）本身不强制要求内容格式，但内容能否被正确分发，完全取决于组件作者对 <slot></slot> 的定义方式和使用上下文——不是浏览器限制你，而是自定义元素的实现逻辑在约束你。
插槽没内容时会显示什么？
如果组件里写了 <slot>默认文本</slot>，且外部没传任何内容，就会渲染“默认文本”。但注意：<slot></slot> 不会自动忽略空白、换行或注释；一段纯空格+换行也会被视为“有内容”，导致默认文本不显示。
- 常见错误：父组件里写成
<my-card>\n </my-card>，看着像空，实际传入了换行符和缩进空格 - 解决办法：把子内容写在一行，或用
slot.assignedNodes({ flatten: true })检查真实分发节点 - 兼容性注意：IE 完全不支持
<slot></slot>，所有逻辑需降级处理（如用属性替代）
多个具名插槽怎么确保内容不乱套？
具名插槽靠 name 属性匹配，但名字拼错、重复、或未声明就使用，都会导致内容“消失”——它不会报错，只是默默不渲染。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 必须在自定义元素模板中明确定义
<slot name="header"></slot>，外部才能用<p slot="header">标题</p> - 一个
<slot name="xxx"></slot>只能接收一个同名的slot属性节点；多个同名节点只会分发第一个 - 动态生成内容时，
slot属性值必须是字符串字面量，不能是绑定表达式（如 Vue 中要用v-bind:slot或v-slot，原生 Web Components 不支持响应式 slot 名）
插槽内容里的事件监听为什么失效？
插槽内容是在父组件作用域中定义的，但渲染后 DOM 节点被移动到子组件 shadow DOM 内部。这意味着：父组件绑定的事件监听器默认无法捕获子组件 shadow 树内的冒泡事件（除非显式设置 composed: true）。
- 例如：父组件写
<button onclick="alert(1)">点我</button>放进<slot></slot>，点击仍会触发——因为内联 handler 是在节点上直接注册的；但用addEventListener绑定的监听器可能收不到事件 - 推荐做法：在子组件内部监听
slotchange事件，再遍历assignedNodes()主动委托事件，或统一用自定义事件通信 - 别依赖 CSS 选择器跨 shadow boundary 操作插槽内容——样式隔离是默认行为，
::slotted(*)只能控制顶层样式，无法穿透多层嵌套
真正容易被忽略的是：插槽不是“内容搬运工”，它是“内容定位协议”。你写的每一处 <slot></slot> 都在定义一个契约接口，而这个接口的健壮性，取决于你是否预判了空内容、命名冲突、事件流断裂和样式穿透边界这四类现实问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
