slot是原生Web Components内容分发的核心机制，依赖Shadow DOM；未渲染需检查attachShadow、父级内容位置、具名插槽匹配及投射时机。
slot 元素本身不是“影响”内容分发，它就是内容分发的实现机制——没有 slot，原生 Web Components 就无法做内容分发。
为什么写了 slot 却没看到内容？
常见现象：自定义元素里写了 <slot></slot>，但父级传入的 HTML 没渲染出来。
- 检查是否漏掉
attachShadow({ mode: 'open' })—— 没 Shadow DOM，slot完全不生效 - 确认父级内容确实写在自定义标签内部，而不是用
innerHTML动态插入（后者绕过 slot 投射） - 若用了具名插槽（
<slot name="header"></slot>），父级必须配<h1 slot="header">标题</h1>，name 值严格匹配，大小写敏感 - 默认插槽只接收“未带
slot属性”的子节点；一旦某个子节点写了slot="xxx"，它就只进对应具名插槽，不会 fallback 到默认插槽
slot 和 Vue 的 <slot> 是一回事吗？
名字一样，但运行时完全不同。
- 原生
slot是浏览器内置机制，发生在 Shadow DOM 渲染阶段，不依赖任何框架，也不参与 Vue 的响应式系统 - Vue 的
<slot>是编译时语法糖，最终被编译成渲染函数里的renderSlot()调用，内容在 Vue 实例作用域内编译，能访问data、props等 - 混用时要注意：在 Vue 组件的
template里写<slot>，走的是 Vue 插槽；在shadowRoot.innerHTML里写<slot>，走的是原生插槽 —— 两者不会互通 - 想在自定义元素里用 Vue 插槽？不行。想在 Vue 组件里用原生
slot？可以，但得手动 attachShadow 并管理投射，Vue 不接管这部分
内容没分发，slot.assignedNodes() 却返回空数组？
这说明内容投射失败，不是逻辑问题，是时机或结构问题。
立即学习“前端免费学习笔记（深入）”；
-
assignedNodes()必须在 slot 已完成投射后调用，比如在connectedCallback之后、或监听slotchange事件里取值 - 如果父级内容是通过
v-if或v-show控制显隐，且初始为 false，那首次连接时assignedNodes()就是空的 —— 它不响应后续 DOM 变更 -
slot只投射 light DOM 的直接子节点，嵌套一层<div><p>文本</p></div>，<p>不会进入 slot，<div>才会 - 注意
flatten: true参数：slot.assignedNodes({ flatten: true })可展开嵌套的 slot，但仅适用于多层插槽嵌套场景，日常很少用
真正容易被忽略的一点：slot 的内容分发是静态声明式的，它不重新解析、不执行脚本、不触发自定义元素升级 —— 你塞进去一个 <my-button></my-button>，它只是个普通 HTML 元素节点，不会变成实例，除非它本来就在 light DOM 里且已 upgrade 过。
