slot是Web Components中用于内容分发的原生占位符，必须在封装可复用容器组件（如卡片、模态框）且需保留用户HTML结构和事件绑定时使用。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
slot 是什么，什么时候必须用它
slot 是 Web Components 规范中用于内容分发（content distribution）的机制，本质是“占位符”——它不渲染自身，只告诉浏览器：“这里该放父组件传进来的 HTML”。你写自定义元素（比如 <my-card></my-card>），又想让使用者自由填内容，就绕不开 slot。
常见误判：以为只有 Vue/React 才有插槽概念。其实原生 HTML 自带，且 <slot> 元素本身不会出现在最终 DOM 中（除非 fallback 内容被激活）。
使用场景很明确：
- 封装可复用的容器组件（如卡片、模态框、标签页）
- 需要保留用户原始 HTML 结构和事件绑定（比如在
slot里放<button onclick="...">，事件仍有效） - 避免用
innerHTML注入带来的 XSS 风险或事件丢失
单个默认 slot 怎么写才不丢内容
默认 slot 不带 name 属性，匹配所有未被命名的子节点。但容易出问题的是：父级直接写文本，或子元素顺序错乱。
实操要点：
- 父组件中，纯文本节点（如
<my-card>Hello</my-card>）会被浏览器自动包裹成Text节点，能被默认slot捕获 - 但如果父组件写了多个顶层元素（如
<my-card><h2>Title</h2><p>Desc</p></my-card>），它们都会进入默认slot，顺序不变 - 关键陷阱：若自定义元素内部没写
<slot></slot>，所有传入内容会被**完全丢弃**（不是隐藏，是彻底不渲染） - 可以加 fallback：
<slot>默认文案</slot>—— 当父级没传内容时才显示
具名 slot 怎么配对，name 值大小写敏感吗
具名插槽靠 slot="xxx" 属性和 <slot name="xxx"></slot> 匹配。匹配规则简单粗暴：字符串完全相等，**区分大小写**，且不支持空格或特殊字符（建议只用小写字母 + 连字符）。
典型错误现象：
- 父组件写
<my-layout><div slot="header">...</div></my-layout>，但子组件里写的是<slot name="Header"></slot>→ 不匹配，内容消失 - 用了
slot="main-content"，但<slot name="main_content"></slot>→ 下划线 ≠ 连字符，不匹配 - 多个同名
slot在同一个自定义元素里？只第一个生效，其余被忽略
一个安全写法示例（自定义元素内部）：
<div class="layout"> <header><slot name="header">默认头部</slot></header> <main><slot name="main">默认主体</slot></main> <footer><slot name="footer">默认底部</slot></footer> </div>
slotchange 事件怎么监听，为什么常监听不到
slotchange 是 <slot> 元素上的原生事件，触发时机是“分配给它的内容发生变更”，比如动态增删子节点、或首次完成内容分发。
但很多人监听失败，原因很实在：
-
slotchange不冒泡，必须直接绑定在<slot>元素上（不能委托到父容器） - 首次渲染时的内容分发**不会触发**该事件（规范如此），只有后续变更才触发
- 如果用
appendChild往自定义元素里加节点，需确保加在自定义元素**内部**（即 shadow DOM 内），否则不会触发分配逻辑 - 监听前要确认
<slot>已挂载，比如在connectedCallback里加监听，别在构造函数里
正确监听姿势：
class MyCard extends HTMLElement {
connectedCallback() {
const slot = this.shadowRoot.querySelector('slot');
slot.addEventListener('slotchange', () => {
console.log('内容变了，现在有', slot.assignedNodes().length, '个节点');
});
}
}
真正麻烦的地方在于：slot 的内容分发是异步的，assignedNodes() 返回的节点可能还没完成样式计算或布局，做 DOM 测量时得小心 timing。 
