slot本身不提升渲染性能，仅是内容分发机制；未启用Shadow DOM（需在constructor或connectedCallback中调用this.attachShadow({mode:'open'}））会导致slot内容静默丢弃、不渲染也不报错。

slot 本身不提升渲染性能，它只是内容分发机制；用错或漏用反而导致内容静默丢弃、调试困难、重复 DOM 操作。

为什么写了slot却没显示内容？

最常见原因是没启用 Shadow DOM。浏览器对 Light DOM 中的 slot 完全无视——不报错、不警告、不渲染，只当普通标签处理。

• 必须在自定义元素的 constructor 或 connectedCallback 中调用 this.attachShadow({ mode: 'open' })
• 不能对 <div>、<code><p></p> 等原生元素调用 attachShadow()，会直接抛 DOMException
• 重复调用 attachShadow() 会报错：“Shadow root has already been attached”

slot 的内容匹配规则有多严？

匹配是精确字符串比对，大小写、首尾空格、连字符全部敏感，不支持模糊或通配。


财经HTML高端海报生成
复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP
下载
• <slot name="header"></slot> 只接收 <h2 slot="header">Title</h2>
• slot="Header"、slot="header "（末尾空格）、slot="header-text" 全部不匹配，内容被丢弃
• 无 name 的 <slot></slot> 隐式名为 "default"，但只接收**第一个**无 slot 属性的直系子节点；后续同级节点不会“轮转”进第二个空 <slot></slot>

怎么确认插槽真被填充了？

别靠肉眼判断渲染结果。视觉上“看起来正常”，不代表内容进了插槽。

立即学习“前端免费学习笔记（深入）”；

• 在自定义元素内部，执行 this.shadowRoot.querySelector('slot').assignedNodes() —— 返回空数组？说明分发根本没触发
• 不要在 connectedCallback 立即查 assignedNodes()，此时内容尚未分配，必为空
• 监听 slotchange 事件才是可靠时机：slot.addEventListener('slotchange', () => { console.log(slot.assignedNodes()); })
• assignedNodes({ flatten: true }) 可展开 fallback 内容，但默认不展开

真正容易被忽略的是：slot 本身不渲染，也不出现在最终 DOM 中；它只起“路由”作用。一旦漏掉 attachShadow 或写错层级关系，问题不会报错，只会无声消失——而你可能花几小时检查 CSS 或 JS 逻辑。