slot 是 web components 中用于内容分发的机制，解决自定义元素内嵌入外部 html 片段的问题；必须配合 customelement 和 shadow dom 使用，通过具名/默认 slot 实现内容插入与 fallback 回退。
slot 是什么，它解决什么问题
slot 是 Web Components 规范中用于内容分发（content distribution）的机制，主要用在自定义元素（customElement）内部，让外部传入的 HTML 片段能被“插入”到指定位置。它不是用来替代 div 或 span 的通用容器，也不能直接在普通 HTML 页面里独立使用——必须配合 customElement + Shadow DOM 才生效。
常见错误现象：Uncaught DOMException: Failed to execute 'attachShadow' on 'Element': This element does not support attaching a shadow root，或 slot 内容完全不渲染，往往是因为没正确创建 Shadow DOM，或把 slot 误写在了非自定义元素里。
如何正确声明和使用 slot
必须先用 attachShadow 创建 Shadow Root，再在其中写 slot 元素；外部使用时通过子节点或 slot 属性匹配。
- 默认 slot：不带
name属性的slot，接收所有未被命名的子节点 - 具名 slot：用
slot="xxx"属性匹配<slot name="xxx"></slot> - slot 可以有 fallback 内容：写在
<slot>这里是备用文本</slot>里，当无内容分发时显示
示例：
class MyCard extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: 'open' });
shadow.innerHTML = `
<style>::slotted(*) { color: blue; }</style><header><slot name="header">默认标题</slot></header><main><slot>默认正文</slot></main><footer><slot name="footer">默认页脚</slot></footer>
`;
}
}
customElements.define('my-card', MyCard);
对应使用方式：
<my-card><h2 slot="header">自定义标题</h2> <p>这是主体内容</p> <small slot="footer">底部说明</small> </my-card>
slot 的作用域和样式限制
slot 分发的是 light DOM 节点，但渲染后“视觉上”出现在 shadow DOM 中——这导致样式穿透和事件冒泡行为容易混淆。
- 外部样式（light DOM）默认无法影响 slot 中分发的内容，除非用
::slotted(*)（注意只能选简单选择器，不能写::slotted(.btn:hover)） - 分发的内容仍保留在 light DOM 树中，所以
document.querySelector仍能拿到，但shadowRoot.querySelector拿不到（它只查 shadow 内部结构） - 事件从分发内容中触发，会正常冒泡到 host 元素（即
my-card），但event.composedPath()会包含 slot 插入点，而非原始位置
兼容性和常见陷阱
IE 完全不支持 slot 和 Shadow DOM；Safari 10.1+、Chrome 53+、Firefox 63+ 支持良好。开发时最容易忽略的是「slot 不是模板引擎」——它不做字符串替换、不解析表达式、不响应数据变化，纯靠 DOM 移动实现分发。
- 动态添加子节点后，需手动调用
slot.assignedNodes()检查是否已分发，不要依赖slot.childNodes.length - 如果 slot 后面紧跟着其他元素（如
<slot></slot><div>xxx</div>），且没有 fallback，可能因布局塌陷显得“消失”，建议加display: block或包裹容器 - 服务端渲染（SSR）环境无法执行
attachShadow，此时 slot fallback 内容会直接显示，务必确保 fallback 文本/结构合理
slot 的核心逻辑藏在浏览器的 DOM 分发算法里，一旦漏掉 attachShadow 或写错 slot 属性名，就彻底失效——它不会报错，只是静默跳过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
