在前端开发中，我们经常需要创建自定义组件来满足业务需求。而 Custom Elements 是一种 Web 标准，它允许开发者创建自定义 HTML 元素，以便在页面中使用。在 Custom Elements 中，slot 与 content 是两个重要的概念，本文将介绍它们的使用方法和技巧。
slot
slot 是 Custom Elements 中的一个特殊元素，它允许开发者在自定义组件中定义一个或多个插槽，以便在使用组件时插入内容。一个插槽可以包含任意 HTML 元素，包括其他组件。
定义插槽
在自定义组件的 HTML 模板中，通过 <slot> 元素来定义插槽。例如，下面是一个简单的自定义组件，其中定义了一个名为 "content" 的插槽：
<template>
<div class="custom-component">
<h1>自定义组件</h1>
<slot name="content"></slot>
</div>
</template>在这个组件中，<slot> 元素的 name 属性指定了插槽的名称为 "content"。
使用插槽
在使用自定义组件时，可以在组件标签内插入内容，这些内容将被插入到插槽中。例如，下面是使用上述自定义组件的示例：
<custom-component>
<div slot="content">
<p>这是插入到自定义组件中的内容。</p>
</div>
</custom-component>在这个示例中，
插槽的默认内容
有时，当插槽中没有插入任何内容时，我们需要提供一些默认的内容。这可以通过在 <slot> 元素内添加默认内容来实现。例如，下面是一个定义了默认内容的插槽：
<slot name="content"> <p>这是插槽的默认内容。</p> </slot>
在这个示例中，当插槽中没有插入任何内容时，将显示
元素中的默认内容。
content
除了在自定义组件中使用插槽之外，还可以使用 content 元素来获取自定义组件中的内容。content 元素是一个 Shadow DOM 中的特殊元素，它允许开发者获取组件中的内容并进行操作。
获取组件中的内容
使用 content 元素可以获取自定义组件中的内容。例如，下面是一个自定义组件，其中使用了 content 元素：
<template>
<div class="custom-component">
<h1>自定义组件</h1>
<slot name="content"></slot>
<content></content>
</div>
</template>在这个组件中，<content> 元素将获取组件标签内的内容，并插入到组件中。例如，下面是使用这个自定义组件并插入内容的示例：
<custom-component>
<div slot="content">
<p>这是插入到自定义组件中的内容。</p>
</div>
<p>这是插入到自定义组件中的第二个内容。</p>
</custom-component>在这个示例中，<custom-component> 标签内有两个
元素，它们都将被插入到自定义组件中。其中，第一个
元素被插入到了 "content" 插槽中，第二个
元素被插入到了 <content> 元素中。
操作组件中的内容
使用 content 元素可以获取自定义组件中的内容，并进行操作。例如，下面是一个自定义组件，其中使用了 content 元素，并对获取的内容进行了操作：
-- -------------------- ---- -------
----------
---- -------------------------
--------------
----- ----------------------
---- ------------------------
-------------------
------
------
-----------在这个组件中，
总结
Custom Elements 是一个非常有用的 Web 标准，它允许开发者创建自定义 HTML 元素。在使用 Custom Elements 时，slot 与 content 是两个重要的概念，它们可以帮助我们更好地组织和操作自定义组件中的内容。本文介绍了它们的使用方法和技巧，并提供了示例代码，希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658ae3aceb4cecbf2d03352b