Web Components 是一种新的 Web 技术标准，它由 Custom Elements、Shadow DOM 和 HTML Templates 三大部分组成。其中，Shadow DOM 可以实现组件化的思想，和 React、Vue 等现代前端框架的组件化有异曲同工之妙，并且 Shadow DOM 中的 slot 可以将组件内部的元素分发到组件外部，这为 Web Components 的可复用性带来了很大的提升。
什么是 slot
在 Shadow DOM 中，如果我们希望将组件内部的元素暴露到组件外部，以供开发者灵活使用，就可以使用 slot 进行分发。slot 实际上是一种占位符，开发者可以在组件标签内部插入自己的内容，这些内容会自动替换掉 slot 的位置，从而实现组件内部与外部的互动。
如何使用 slot
假设我们有一个自定义组件 my-component，它的模板如下：
<template>
<div>
<header>我是头部</header>
<slot></slot>
<footer>我是底部</footer>
</div>
</template>上述模板中，我们使用了一个 slot 占位符，表示该组件内部的元素将会被分发到这个位置。在使用组件的时候，我们可以在组件标签内部插入自己的内容，并且这些内容会自动替换掉 slot 的位置。例如：
<my-component> <div>我是自定义内容</div> </my-component>
上述代码中，我们在 my-component 标签内部插入了一个 div 元素，它会替换掉组件内部的 slot，最终的渲染结果如下：
<div> <header>我是头部</header> <div>我是自定义内容</div> <footer>我是底部</footer> </div>
从上面的代码可以看到，使用 slot 分发内容非常简单，只需要在组件内部添加一个 slot 占位符，然后在组件标签内部插入自己的内容即可。
slot 的进阶用法
除了基本的使用方式外，slot 还有一些高级用法，可以让我们更加灵活地分发内容。
命名 slot
通过给 slot 添加一个 name 属性，我们可以为每个 slot 起一个名字，从而实现多个 slot 的情况。例如：
<template>
<div>
<header><slot name="header"></slot></header>
<main><slot></slot></main>
<footer><slot name="footer"></slot></footer>
</div>
</template>上述代码中，我们使用了三个不同的 slot，分别为 header、main 和 footer，通过 name 属性进行命名。在使用组件的时候，我们可以对这些 slot 进行赋值：
<my-component> <p slot="header">我是头部</p> <div>我是自定义内容</div> <p slot="footer">我是底部</p> </my-component>
上述代码中，我们分别指定了 header 和 footer 两个 slot 的内容，main slot 则使用了默认值，即组件标签内部插入的元素。最终的渲染结果如下：
<div> <header><p>我是头部</p></header> <main><div>我是自定义内容</div></main> <footer><p>我是底部</p></footer> </div>
通过使用命名 slot，我们可以更加精确地控制组件内部不同元素的渲染方式，提高组件的复用性和灵活性。
默认 slot
默认 slot 是指在没有指定 name 属性的情况下，使用的 slot，它可以无需指定名称，系统会自动将元素分配到默认 slot 中。例如：
<template>
<div>
<header><slot></slot></header>
<footer><slot></slot></footer>
</div>
</template>上述代码中，我们使用了默认 slot 进行分发，没有指定任何名称。在使用组件的时候，我们可以直接在组件标签内部插入自己的内容，这些内容会自动分配到默认 slot 中：
<my-component> <p>我是头部</p> <p>我是底部</p> </my-component>
上述代码中，我们在组件标签内部插入了两个 p 元素，它们会分别渲染到 header 和 footer 两个 slot 中，并且这两个 slot 均使用了默认 slot。最终的渲染结果如下：
<div> <header><p>我是头部</p></header> <footer><p>我是底部</p></footer> </div>
通过使用默认 slot，我们可以实现比较灵活的组件结构和复用。
总结
通过本文的介绍，我们了解了 slot 的基本用法和进阶技巧，可以使用 slot 进行任意组件内部和外部的内容分发，从而提高组件的复用性和灵活性。在实际项目中，我们可以根据自己的需求，灵活运用 slot，以实现更好的组件化效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d0eeaab5eee0b5257f35cb