slot是vue的内容分发机制，分为默认插槽、具名插槽和作用域插槽三类，原理是父组件决定子组件中slot元素的显示内容与方式，通过vm.$slot存储并渲染。
slot 属性是 Light DOM 中子元素“声明归属”的唯一方式，它不移动节点，只告诉 Shadow DOM：这个节点该塞进哪个 <slot name="xxx"></slot> 里。
为什么写了 slot="header" 还是没显示
最常见原因是匹配失败，不是浏览器出错，而是契约没对上：
-
slot属性值必须与<slot name="header"></slot>的name值**完全一致**：大小写、空格、连字符都不能差——slot="Header"或slot="header-text"都不会命中 - 外部元素必须是自定义元素的**直系子元素**：
<my-card><div><h2 slot="header">标题</h2></div></my-card>中的<h2></h2>是孙节点，直接被忽略 -
<slot name="header"></slot>必须已存在于 Shadow DOM 模板中，且该模板已插入到this.shadowRoot里；没挂 Shadow Root，slot属性纯属无效字符串
slot 属性和默认插槽的关系
具名插槽和匿名插槽互不干扰，但分发顺序有隐含规则：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 所有带
slot属性的元素，只尝试匹配同名<slot name="xxx"></slot>，**不会 fallback 到匿名<slot></slot>** - 没写
slot属性的元素（如<p>正文</p>），只会塞进第一个无name的<slot></slot>；后面再多几个<slot></slot>，也不会继续分发 - 多个同名
<slot name="item"></slot>时，每个 slot 会按顺序收到一个匹配节点（不是复制，是分发）；如果只有 1 个<p slot="item"></p>，第二个<slot name="item"></slot>就是空的
动态设置 slot 属性行不行
不行。原生 Web Components 中，slot 属性必须是静态字符串字面量：
-
<p slot="{{ dynamicName }}"></p>或<p :slot="name"></p>在普通 HTML 中无效，浏览器不解析表达式 - Vue 用户需用
v-slot:xxx或v-bind:slot（Vue 2）/#xxx（Vue 3）；React 完全没有slot属性概念，靠children和 props 传入 - 若真需运行时切换归属，得在组件内用
assignedNodes()手动遍历，再根据条件把节点 append 到不同容器中——这已脱离 slot 原生机制
容易被忽略的边界行为
slot 属性看起来简单，但实际生效依赖一整套 Shadow DOM 生命周期：
- 节点带
slot属性，但还没被解析进 DOM 树（比如刚 createElement 后立即 append），此时slotchange不会触发，assignedNodes()可能为空 - 用
display: none隐藏了带slot属性的元素，它仍会被分发——slot只看是否存在，不检测可见性或是否渲染 -
slot属性对注释、文本节点也生效：<my-card><!-- 注释 --><h2 slot="header">标题</h2> </my-card>中的注释会被当作内容传入匿名 slot，可能干扰 fallback 判断
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
