slot属性仅在shadow dom分发阶段起作用，未调attachshadow()则无效；常见不显示原因是name大小写不匹配、外部节点非直系子元素、多个无name的仅首个多余全空，需监听slotchange事件并用assignednodes({flatten:true})确认分发。
slot 属性本身不参与模板渲染，它只在 Shadow DOM 分发阶段起作用；没调 attachShadow()，写了也白写。
为什么写了 slot="header" 却什么都没显示
不是样式或 JS 错误，而是分发契约根本没对上：
-
slot="header"和<slot name="Header"></slot>大小写不一致 → 匹配失败，内容静默丢弃 - 外部节点被包裹了一层，比如
<my-card><section><h2 slot="header">标题</h2></section></my-card>→<h2></h2>是孙节点，不是直系子元素，直接忽略 - 自定义元素没调
this.attachShadow({ mode: 'open' })→slot属性在普通 DOM 中纯属无效字符串，浏览器不处理 - 写了多个无
name的<slot></slot>→ 只有第一个接收未匹配内容，其余全空
如何确认内容真被分发进来了
别只靠肉眼或 querySelector 看渲染结果，因为投影不改变节点物理位置：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 返回的是原始 Light DOM 节点引用，但必须等分发完成才能读取；在
connectedCallback里直接调assignedNodes()，大概率返回空数组 - 正确时机是监听
slotchange事件：shadowRoot.querySelector('slot[name="header"]').addEventListener('slotchange', () => { ... }) - 需要获取嵌套结构（比如 fallback 里的内容）时，必须传
{ flatten: true }，否则只返回直系分配节点 - Firefox 63 以下不支持
slotchange，得用MutationObserver监听slot元素的childList
::slotted() 样式为什么总不起作用
不是选择器写错了，而是规则本身就不支持深层穿透：
-
::slotted(h2)✅ 有效；::slotted(div h2)❌ 无效 —— 只能匹配投射进来的**直系子节点**，中间不能有层级 -
::slotted([slot="footer"])✅ 可用；::slotted(.footer h2)❌ 不生效 -
shadowRoot.querySelector('::slotted(h2)')永远返回null——::slotted()是伪元素，不是真实可查的 DOM 节点 - Light DOM 内容默认不受 Shadow DOM 样式隔离保护，外部全局 CSS 依然生效；想控制它，必须显式用
::slotted()或 CSS 自定义属性
真正容易被忽略的，是分发发生在浏览器渲染流水线的投影阶段，不是 JS 同步执行的结果 —— 所以任何依赖“立刻拿到分发后结构”的逻辑，都得绕开 DOM 查询，改用事件或异步回调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
