HTML中slot标签在Web Components中的作用

今日不肯埋头，明日何以抬头！每日一句努力自己的话哈哈~哈喽，今天我将给大家带来一篇《HTML中slot标签在Web Components中的作用》，主要内容是讲解等等，感兴趣的朋友可以收藏或者有更好的建议在评论提出，我都会认真看的！大家一起进步，一起学习！

slot是Web Components中仅在Shadow DOM生效的内容分发机制，必须调用attachShadow()创建影子根，且外部内容须为自定义元素的直系子元素；具名slot严格按name字符串匹配，::slotted()仅支持直系子元素选择器。

slot 不是通用 HTML 标签，它只在 Web Components 的 Shadow DOM 环境中起作用——没调用 this.attachShadow()，写了也白写。

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

• 浏览器看到 时，不会做任何事，除非它位于一个已挂载 Shadow Root 的自定义元素内部
• 常见错误：在普通页面里直接写 ，或在未调用 attachShadow() 的自定义元素类里声明它
• 正确做法必须在构造函数中显式创建：

  constructor() {
  super();
  this.attachShadow({ mode: 'open' });
  this.shadowRoot.innerHTML = `<slot name="header"></slot>`;
  }

• 如果用了 { mode: 'closed' }，JS 无法访问 shadowRoot，但 slot 渲染仍正常——只是调试时查不到节点，容易误判为“没生效”

具名 slot 和默认 slot 的匹配规则很严格

• 只匹配

  标题

  ，不匹配 slot="Header"（大小写敏感）、slot="header-text"（字符串不等同）、slot="{{name}}"（不支持表达式）
• 没带 slot 属性的元素（如

  正文

  ）只会进入第一个无 name 的
• 多个无 name 的 并列时，只有第一个接收内容，其余被忽略
• 同名 出现多次时，Light DOM 中每个 slot="item" 元素会按顺序填入对应 slot（不是复制广播），即第 1 个 slot="item" → 第 1 个 ，以此类推

::slotted() 样式只能作用于投射进来的直系子元素

• ::slotted(h2) 有效，::slotted(div h2) 或 ::slotted(h2 span) 无效（不支持后代选择器）
• ::slotted(*) 无效，通配符不被支持
• ::slotted([slot="footer"]) 或 ::slotted(.btn) 是合法写法
• 这些样式必须写在 Shadow DOM 内部的
  

  密码登录在这里

  微信扫码登录或注册

  

  打开微信扫一扫，快速登录/注册

  登录即同意 用户协议 和 隐私政策

  微信登录更方便

  • 密码登录
  • 注册账号

  

  忘记密码

  登录

  

  注册

  登录即同意 用户协议 和 隐私政策

  返回登录

  • 重置密码

  发送验证码

  重置密码