slot写了却不显示，是因为未满足三个硬性前提：自定义元素必须已注册、需调用attachshadow({mode:'open'})、且必须写在shadow dom内部；缺一即静默失效，不报错不警告。
slot为什么写了却不显示？三个硬性前提缺一不可
slot 标签不是普通 HTML 标签，它只在 Shadow DOM 环境下生效，且必须同时满足三个条件：自定义元素已注册、attachShadow({ mode: 'open' }) 已调用、<slot></slot> 写在 Shadow DOM 内部（比如 shadowRoot.innerHTML 或 template.content 中）。任意一条不满足，内容就静默消失——浏览器既不报错也不警告。
- 没调
attachShadow()→<slot></slot>被当作文本标签忽略 -
<slot></slot>写在 Light DOM（如直接放在里）→ 完全无效 - 用了
{ mode: 'closed' }→shadowRoot无法访问，assignedNodes()返回空，但渲染可能正常（调试时极易误判）
直系子元素被忽略？检查 Light DOM 结构层级
slot 分发只扫描自定义元素的**第一层子节点**。哪怕多包一层 <div> 或换行符产生的文本节点，都会导致匹配失败。
<ul>
<li>✅ 正确：<code><my-card><h2 slot="header">标题</h2></my-card>
<my-card><section><h2 slot="header">标题</h2></section></my-card>（<h2></h2> 是孙节点）<my-card>\n <h2 slot="header">标题</h2>\n</my-card> 中的换行符会成为第一个子节点，<h2></h2> 实际是第二个子节点name 和 slot 属性不匹配？大小写和空格都算数
具名插槽的匹配是严格字符串比对，区分大小写、不忽略首尾空格、不支持通配符或模糊查找。
-
<slot name="header"></slot>只接收<h2 slot="header"></h2>，slot="Header"、slot="header "（末尾空格）、slot="header-text"全部失效 - 没写
name的<slot></slot>默认 name 是"default"，只收所有未带slot属性的直系子元素（如<p>正文</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8272" title="anything-to-html"><img src="https://img.php.cn/upload/skill/000/000/081/179195588450431.jpg" alt="anything-to-html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="overflowclass">anything-to-html</a> <p class="overflowclass">将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。</p> </div> <a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>） - 多个同名
<slot name="item"></slot>时，每个 slot 按顺序接收一个匹配节点，不是复制也不是广播
怎么确认内容真被投进去了？别只看页面，查 assignedNodes()
渲染正常 ≠ 内容已分配。很多问题表面“显示了”，实则 assignedNodes() 返回空数组，说明分发逻辑根本没触发。必须在 slotchange 事件中查，不能在 connectedCallback 里立刻调。
- 监听：
slot.addEventListener('slotchange', () => console.log(slot.assignedNodes({ flatten: true }))) -
assignedNodes()默认不展开嵌套结构，{ flatten: true }才能拿到最终投射的所有节点（含 fallback 里的） -
assignedElements()只返回元素节点，适合过滤掉文本节点 - 注意：
slot.assignedNodes()返回的是快照，DOM 变更后需重新调用
真正麻烦的不是语法写错，而是它不报错、不提示、不警告——内容“消失”时，得同步排查自定义元素定义、Shadow DOM 构建时机、Light DOM 层级、属性拼写这四点，漏一个就卡住。
