<slot>: 插槽标签

最后更新：2026-10-13

<slot>插槽标签

在 Web Components 的影子 DOM 中定义“插槽”，标记可放置宿主内容的占位点；配合 name 可实现具名内容分发。

<slot name="title"></slot>

该元素支持全局属性及以下专有属性：

属性	值	描述
`name`		插槽名称，宿主用对应 slot="名称" 的内容填充；省略为默认插槽。

编辑下方代码，在 playground 中查看实时效果：

浏览器	Chrome	Edge	Firefox	Safari	Opera
<slot>	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
所有主流浏览器均支持

提示： slot 只在影子 DOM / Web Components 中起作用；普通页面直接使用没有任何分发效果。

Qslot 是做什么用的？

A<slot> 是 Web Components 的「占位插槽」：在自定义组件的 Shadow DOM 里挖坑，使用组件时把真实内容填进去。如 <slot name='title'> 对应使用方的 slot='title' 内容，实现内容与组件结构分离。

Qslot 没有被填充时会显示什么？

A显示插槽内的回退内容（fallback）：写在 <slot>默认文字</slot> 标签之间的内容，只有使用方没提供对应内容时才渲染。这让组件有合理的默认态。

Qslot 和 template 必须一起用吗？

A通常搭配——<template> 定义 Shadow DOM 结构，slot 在其中挖坑；但 slot 也可以在 JS 创建的 shadow root 里使用。反过来，template 单独用（客户端模板）不需要 slot。两者是 Web Components 体系里分工不同的伙伴。

更多案例即将上线，敬请期待。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。