HTML中slot标签在自定义影子DOM中的内容分发规则-html教程-PHP中文网

slot匹配只认直系子元素，嵌套一层即失效；name与slot属性须完全一致（大小写、空格、连字符均敏感）；无slot属性的元素仅匹配首个匿名slot；assignednodes()需配合slotchange事件及{flatten:true}参数才可靠获取投射节点。

html中slot标签在自定义影子dom中的内容分发规则

slot匹配只认直系子元素，嵌套一层就失效

外部内容必须是自定义元素的直接子节点，否则浏览器根本不会尝试分发。slot属性再对也白搭。

<my-card><h2 slot="title">标题</h2></my-card> ✅ 能进 <slot name="title"></slot>
<my-card><div><h2 slot="title">标题</h2></div></my-card> ❌ <h2></h2> 是孙节点，被忽略
即使用了 shadowRoot.querySelector('slot').assignedNodes()，返回也是空数组——不是 bug，是规则

name 和 slot 属性必须完全一致，大小写、空格、连字符都不能错

匹配是纯字符串比对，不模糊、不容错、不 trim。写错一个字符，内容就被静默丢弃。

<slot name="footer"></slot> 只匹配 <p slot="footer">版权</p>，不匹配 <p slot="Footer"></p>、<p slot="footer "></p> 或 <p slot="footer-text"></p>
具名 <slot name="icon"></slot> 写两次？第一个接收内容，第二个始终为空——浏览器不广播，也不 fallback
没写 slot 属性的元素（如 <p>正文</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件"><img src="https://img.php.cn/upload/manual/000/000/010/170901721079108.gif" alt="使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件" class="overflowclass">使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件</a> <p class="overflowclass">如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更</p> </div> <a rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>）只尝试塞进第一个无 name 的 <slot></slot>，后面再多 <slot></slot> 也收不到

slotchange 事件不自动触发，assignedNodes() 必须等分发完成

在 connectedCallback 或 firstUpdated 里直接调 slot.assignedNodes()，几乎总是空数组。这不是时机问题，是分发还没开始。

正确做法：监听 slotchange 事件，且必须绑定到具体 <slot></slot> 元素上：shadowRoot.querySelector('slot[name="title"]').addEventListener('slotchange', handler)
该事件不冒泡，不能在 shadowRoot 上监听；首次渲染也不触发，只响应后续增删
要获取 fallback 里的节点或深层投射内容，必须传 { flatten: true }，否则只返回直系分配节点
Firefox 63 以下不支持 slotchange，得用 MutationObserver 监听 slot 的 childList

::slotted() 样式只能选直系子节点，后代选择器全无效

::slotted() 不是普通 CSS 选择器，它被浏览器硬性限制为单层匹配。想穿透两层？不行。

✅ ::slotted(h2)、::slotted([slot="footer"])、::slotted(.btn)
❌ ::slotted(div h2)、::slotted(h2 span)、::slotted(*) —— 全部不生效
shadowRoot.querySelector('::slotted(h2)') 永远返回 null，因为它是伪元素，不可查
如果需要控制嵌套结构样式，要么让外部传入带 class 的节点，要么在组件内用 assignedNodes({ flatten: true }) 手动遍历加 class