Web Components中slot标签的作用详解

slot 必须配合 attachShadow() 才能生效

浏览器遇到 时，默认不会进行任何处理。只有当它位于一个已经挂载了 Shadow Root 的自定义元素内部时，才会生效。

常见的错误用法包括：在普通页面中直接写入 ，或者在自定义元素类中声明了 slot 却没有调用 attachShadow() 方法。

正确的做法是在构造函数中显式创建 Shadow DOM：

constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = ``;
}

如果使用了 { mode: 'closed' } 参数，JavaScript 将无法访问 shadowRoot 属性，但 slot 的渲染功能仍然正常。这可能导致在调试时无法查看到节点，从而误判为“slot 没有生效”。

具名 slot 和默认 slot 的匹配规则

slot 的匹配规则非常严格：

• 只会匹配带有 slot="header" 属性的元素（例如

  标题

  ）。它不会匹配 slot="Header"（大小写敏感）、slot="header-text"（字符串不完全相同）或动态表达式。
• 没有设置 slot 属性的元素（例如

  正文

  ）只会进入第一个没有 name 属性的默认 。
• 如果存在多个并列的、无 name 的默认 ，只有第一个会接收内容，其余将被忽略。
• 如果出现多个同名的 ，Light DOM 中每个带有 slot="item" 属性的元素会按照顺序依次填入对应的 slot 位置，而不是进行复制或广播。即第一个 slot="item" 元素进入第一个 ，以此类推。

::slotted() 样式选择器的使用限制

使用 ::slotted() 伪元素选择器为投射内容添加样式时，有明确的限制：

• ::slotted(h2) 是有效的，它可以选中直接投射进来的
  元素。
• ::slotted(div h2) 或 ::slotted(h2 span) 是无效的，因为 ::slotted() 不支持后代选择器。
• ::slotted(*) 使用通配符也是无效的，不被支持。
• 合法的写法包括：::slotted([slot="footer"]) 或 ::slotted(.btn)。

这些样式规则必须写在 Shadow DOM 内部的 标签中，不能放在外部的 Light DOM 或全局 CSS 文件里。

需要理解的是，被投射的内容本身仍然保留在 Light DOM 中。其原始的样式和事件传播路径不受 Shadow DOM 的直接影响，仅能通过 ::slotted() 进行有限的外观样式干预。

内容未显示的根本原因

一个容易被忽略的关键点是：内容本身并没有消失，只是被浏览器跳过了渲染流程。

一旦发生 slot 匹配失败，或者外部元素不是自定义元素的直系子元素（例如被额外的