slot属性不是传参机制，它仅静态分发light dom中的真实节点到shadow dom指定位置，不传递数据、不触发响应式、不解析属性或文本，需手动监听slotchange并调用assignednodes()获取内容。
slot属性不是传参机制，它不传递数据只分发节点
很多人误以为slot是类似 React props 或 Vue :prop 的“传参”方式，其实完全不是。它不序列化、不转换、不触发响应式更新，只是把 Light DOM 中的**真实 DOM 节点**按规则投影（project）到 Shadow DOM 的指定位置。所谓“传参”，本质是节点引用的静态绑定，没有运行时开销，也没有数据拷贝——但这也意味着你不能靠它传字符串、对象或函数。
常见错误现象：<my-form><input slot="field" data-value="user@example.com"></my-form> 写了data-value，但组件内部没读取逻辑，这个值就永远静默存在，不会自动变成 JS 变量。
- slot 分发发生在 DOM 插入后、渲染前，由浏览器引擎原生完成，无 JS 执行成本
- 动态修改
slot属性值（如el.setAttribute('slot', 'new-name')）会触发重分发，但仅限于已挂载的节点；未插入 DOM 的元素改了也无效 - 大量节点配对（比如 50+ 个
slot="item"对应 50+ 个<slot name="item"></slot>）会导致assignedNodes()返回长列表，遍历时需注意性能
想从 slot 元素里取值？必须手动遍历 assignedNodes()
浏览器不会帮你解析slot内容里的属性或文本。要拿到data-value、textContent或子元素结构，得在slotchange事件里调用slot.assignedNodes({ flatten: true })，然后自己过滤处理。
容易踩的坑：assignedNodes()返回的是 NodeList（非实时集合），且包含文本节点（换行、空格也会算）。直接forEach可能报错，必须先判类型：
slot.addEventListener('slotchange', () => {
const nodes = slot.assignedNodes({ flatten: true });
for (const node of nodes) {
if (node.nodeType === Node.ELEMENT_NODE && node.hasAttribute('data-value')) {
console.log(node.dataset.value); // ✅
} else if (node.nodeType === Node.TEXT_NODE) {
const text = node.textContent.trim();
if (text) console.log('纯文本:', text); // ✅ 注意 trim()
}
}
});
- 别用
querySelector在 shadowRoot 里找投射进来的内容——它不在 shadowRoot 下，还在 Light DOM 里 -
{ flatten: true }必须加，否则嵌套<slot></slot>里的内容不会被展开 - 在
connectedCallback里立刻调assignedNodes()大概率返回空数组，因为分发还没发生；得等slotchange触发后再查
slot 属性写错位置或大小写，内容直接丢弃不报错
slot属性生效有硬性前提：它必须出现在**自定义元素的直系子元素**上，且值与<slot name="xxx"></slot>的name**严格字符串匹配**（区分大小写、首尾空格、连字符）。写错就静默失效，页面空白，控制台也不报错。
典型失效场景：
-
<my-card><div><h2 slot="title">标题</h2></div></my-card>→<h2></h2>是孙节点，被丢弃 -
<my-card>\n <h2 slot="Title">标题</h2>\n</my-card>→ 换行符是第一个子节点，slot="Title"因大小写不匹配失败 -
<my-card><p slot="header ">标题</p></my-card>→slot值末尾有空格，匹配不上name="header"
验证是否成功分发，唯一可靠方式是监听具体<slot></slot>上的slotchange事件，再查assignedNodes()，而不是看页面有没有渲染出来。
样式穿透和事件冒泡仍走 Light DOM 路径
slot 投影的内容视觉上出现在 Shadow DOM 里，但它的样式作用域、事件路径、DOM 查询都属于 Light DOM。这意味着：
-
::slotted(h2)能生效，但::slotted(h2 span)不行——::slotted()不支持后代选择器 - 点击投射进来的
<button></button>，事件冒泡路径是：button → Light DOM 父元素 → document，**不会经过 shadowRoot** - 如果需要统一控制样式，推荐用 CSS 自定义属性（
--my-color）配合:host，而不是依赖::slotted()
真正容易被忽略的点是：内容始终保留在 Light DOM 中。<slot></slot>只是窗口，不是搬运工。所有基于 DOM 树的操作（比如closest()、matches()、表单提交收集），都得按 Light DOM 的原始结构来理解，而不是当成 shadowRoot 的子节点处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
