插槽内容“不见了”是因为name和slot属性字符串不完全匹配。html slot分发是纯字符串精确匹配，大小写、空格、连字符均敏感；同名插槽按顺序一对一绑定；默认插槽仅接收第一个无slot属性的直系子节点；name不支持动态绑定，分发仅在dom连接时发生。
插槽内容“不见了”？八成是 name 和 slot 属性没对上——不是逻辑错，是字符串比对失败。
name 和 slot 必须完全一致（大小写、空格、连字符全算）
HTML 的 slot 分发是纯字符串精确匹配，不忽略任何字符差异。比如：
-
<slot name="header"></slot>只接收<h1 slot="header">标题</h1> -
<h1 slot="Header"></h1>→ 进默认插槽或被丢弃（大小写错） <div slot="header ">（末尾空格）→ 不匹配 <li> <code><section slot="header-2"></section>→ 不匹配（多连字符）- Light DOM 中第一个
<div slot="item">A</div>→ 填入第一个<slot name="item"></slot> - 第二个
<div slot="item">B</div>→ 填入第二个<slot name="item"></slot> - 如果只有 1 个
<slot name="item"></slot>，但有 3 个slot="item"节点，则只取第一个，其余静默丢失 -
<p>正文1</p> <p>正文2</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf"><img src="https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg" alt="html-ppt-to-pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="overflowclass">html-ppt-to-pdf</a> <p class="overflowclass">将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p> </div> <a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>→ 只有第一个<p></p>进去，第二个被丢弃 -
<div slot="header"></div> <p>正文</p>→<p></p>进默认插槽（因为没slot属性） - 嵌套一层就失效：
<div><p>内容</p></div>不会被分发进任何<slot></slot>，必须是自定义元素的直接子节点 -
<slot :name="headerName"></slot>（Vue）→ 实际生成<slot name="headerName"></slot>，字面量字符串 -
<slot name="${slotName}"></slot>（HTML 源码）→ 完全无效，浏览器当普通文本解析 -
el.setAttribute('name', 'footer')→ 不触发重分发，Shadow DOM 分发只在connectedCallback阶段做一次
所有浏览器（Chrome/Firefox/Safari/Edge）都严格执行该规则，不是 Vue 或 React 的行为，是原生 HTML 规范。
多个同名 <slot name="xxx"></slot> 怎么分发
重复声明同名插槽允许，但分发逻辑是“按顺序一对一”：
注意：这不是“广播”，也不是“合并”，更不会报错——内容消失但控制台安静，最难排查。
默认插槽只收第一个无 slot 属性的直系子节点
没写 name 的 <slot></slot> 只匹配且仅匹配 Light DOM 中**第一个**没有 slot 属性的直系子元素：
name 属性不支持动态绑定（别试 :name 或模板字符串）
name 是静态 HTML 属性，运行时无法变更：
真要条件切换，得用多个固定 name 插槽 + v-if 或 display: none 控制显隐——动态名是伪需求，原生机制不支持。
最容易被忽略的是：slot 分发发生在 DOM 连接瞬间，后续改结构或属性都不重新计算；调试时看 slot.assignedNodes() 返回是否为空，比猜更可靠。
