slot 标签的作用是什么
slot 标签在 Web 组件中的核心角色
在 Web 组件的影子 DOM 结构中，slot 标签充当一个占位符，允许父级内容被分发并呈现到自定义元素内的指定位置。通过分发内容，开发者可以实现模板的可插拔性，提升组件的复用性和灵活性。
另一层含义是，插槽机制将外部内容与内部结构解耦，使得组件不必预先知道具体的显示文本或子节点，从而实现可自定义的外部界面。
默认插槽与具名插槽的差异
默认插槽允许未指定 slot 属性的子节点进入同一个展示区，简化内容分发的场景，适用于简单的组件布局。如果没有命名插槽，所有子节点都会进入默认插槽的位置。
具名插槽通过在外部内容上设定 slot="name" 属性，将内容分发到相应的插槽位置，达到更加精确的布局控制。具名插槽的灵活性使得复杂的 UI 结构更加可维护。
Web 组件插槽的用法全解析
在影子 DOM 中定义插槽的位置
在自定义元素的模板里，使用 <slot>，以及带 name 的变体来定义分发目标，<#slot> 的出现位置决定了内容的呈现区域。影子 DOM 中的插槽布局直接影响到可视结构。
通过明确的命名插槽，可以在同一个影子 DOM 中实现多处占位，便于将不同的外部内容分发到不同的位置。命名插槽是实现复杂布局的关键。
<template id="card-template"><style>.card { border: 1px solid #ddd; border-radius: 6px; padding: 12px; }.card-header{ font-weight: bold; font-size: 1.2em; }.card-content{ padding: 8px 0; }.card-footer{ color: #666; font-size: 0.9em; }</style><div class="card"><div class="card-header"><slot name="header">默认标题</slot></div><div class="card-content"><slot>默认内容</slot></div><div class="card-footer"><slot name="footer"></slot></div></div>
</template>
如何将外部内容分发到插槽
在使用自定义元素时，向具名插槽提供内容可以通过在外部节点上设置 slot 属性实现名称匹配，达到精准分发的效果。通过 slot 属性，外部内容与内部占位符建立绑定。
下面示例展示了如何将外部内容分发到 header、footer 和默认内容的位置。
<my-card><h1 slot="header">欢迎来到我的卡片</h1><p>这是卡片的主体内容。</p><div slot="footer">版权所有 © 2025</div>
</my-card>
具名插槽的回退内容与默认情况
若某个具名插槽没有提供外部内容，影子 DOM 中的回退内容将会显示，确保组件在没有外部注入时也能保持合理显示。回退内容是保持鲁棒性的关键。
回退内容通常写在具名插槽的起始标签里，作为保底展示。确保 UI 的完整性，避免空白区域。
<slot name="header">默认头部</slot>实现跨浏览器兼容性与注意事项
现代浏览器普遍支持 Shadow DOM 与插槽，但在老版本浏览器中，需要 polyfill 来实现同等功能。加载顺序、样式作用域以及插槽伪类选择器都可能影响渲染效果。
在设计时应考虑到潜在的样式冲突，使用 影子 DOM 的样式封装，并通过插槽的命名确保逻辑清晰。
完整示例：带插槽的自定义元素实现
示例代码：HTML 模板
以下模板展示了一个带有默认内容、具名头部和尾部插槽的卡片组件的结构。模板分离有助于维护和重用。
<template id="my-card-template"><style>.card { border: 1px solid #ddd; border-radius: 6px; padding: 12px; }.card-header{ font-weight: bold; font-size: 1.2em; }.card-content{ padding: 8px 0; }.card-footer{ color: #666; font-size: 0.9em; }</style><div class="card"><div class="card-header"><slot name="header">默认标题</slot></div><div class="card-content"><slot>默认内容</slot></div><div class="card-footer"><slot name="footer"></slot></div></div>
</template>
示例代码：自定义元素与使用
通过定义自定义元素并将模板粘贴到影子 DOM，可以实现具名插槽与默认插槽的组合，满足多场景需求。自定义元素的生命周期也会影响插槽内容的分发时机。
class MyCard extends HTMLElement {constructor() {super();const shadow = this.attachShadow({ mode: 'open' });const template = document.getElementById('my-card-template');shadow.appendChild(template.content.cloneNode(true));}
}
customElements.define('my-card', MyCard);
示例代码：外部使用
在页面中使用该自定义元素时，按需提供具名插槽和默认内容，确保 UI 的可自定义性与稳定性。slot 属性的正确使用是关键。
<my-card><span slot="header">欢迎来到我的卡片</span><p>这是卡片的主体内容。</p><span slot="footer">版权所有 © 2025</span>
</my-card>
运行效果与要点回顾
渲染结果中，标题区域显示来自 header 插槽的内容，主体区域显示默认插槽的内容，若外部提供了内容，则会替换默认内容。通过具名插槽实现内容的高精度分发，从而实现灵活的 UI 组合。
