前言
Custom Elements 是 Web Components 规范的重要组成部分，利用它可以将页面上的一坨坨复杂的 HTML 和 JavaScript 代码打造成为可复用、易维护的组件。在 Custom Elements 中，使用 slot 可以方便地进行组件的内容分发，从而达到更好的组件封装和表现力。接下来，我们将深入介绍 Custom Elements 如何使用 slot，希望对你有所帮助。
slot 的基础用法
slot 可以理解为“插槽”，用于向组件传递内容。我们可以在组件中定义 slot，比如下面这个简单的例子：
--------- -----------------------
-------
----- -
-------- ------
------- --- ----- ------
-------- -----
-
--------
--------- ------------------- -------------------
-------- --------------------- -----------------
-----------这里的 template 标签中定义了一个自定义元素 my-custom-element，其中有两个 slot，分别为 title 和 content。其中，name 属性指定了 slot 的名称。每个 slot 中包含的内容即为默认内容，如果在使用该组件的时候没有传递内容，则使用默认内容。
接下来的 JavaScript 代码将该模板转换为一个 custom element：
----- --------------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
----- -------- - ---------------------------------------------
---------------------------------------------------------
-
-
------------------------------------------ -----------------这里使用了 attachShadow 方法将 Shadow DOM 附加到自定义元素上，并将模板内容克隆到 Shadow DOM 中。现在，我们就可以在 HTML 中使用自定义元素，并传递内容到 slot 中：
------------------- ---- -------------------- -- -- -------------- ---- ------------------- -- - ---- -- --- -- --- ------ -------- ---- ----------- --------------------
如此一来，我们就可以看到我们定义的 title 和 content 已经被成功地渲染出来了。
slot 的进阶
上面的例子只是 slot 的最基本用法，但是在实际开发中，我们还可以运用一些高级技巧来更好地利用 slot。
具名 slot
具名 slot 允许我们通过名称来匹配 slot 和传递的内容，从而达到更好的组件解耦性。实现方法和基本使用方式与上面相同，只需要传递 name 属性就行了。
--------- ----------------------- --------- ------------------- ------------------- -------- --------------------- ----------------- ------------- ------------------------------ -----------
在 HTML 中的使用方式：
------------------- ---- -------------------- -- -- -------------- ---- ------------------- -- - ---- -- --- -- --- ------ -------- ---- ----------- ---- ------------------- --- --- ---- ------------ --------------------
默认 slot
在有多个 slot 的情况下，我们可以将某个 slot 设为默认 slot，从而在使用的时候省略掉 slot 名称。实现方法非常简单，只需要不加 name 属性即可。
--------- ----------------------- ------------------------ -----------
在 HTML 中的使用方式：
------------------- ---- ---- -- -------- -- --- ------- ----- --------------------
slot 元素的样式
我们可以使用 ::slotted 伪类来定义 slot 元素的样式。不过需要注意的是，这种方式只能够定义 slot 内容的样式，而无法影响到 slot 所在的 shadow DOM。要想影响到 shadow DOM，还需要使用 /deep/ 或 >>> 选择器，这里不再赘述。下面是一个样例代码：
--------------- - ------ ---- -
表示为 slot 中传递的所有 span 元素添加红色字体样式。
总结
Custom Elements 是 Web Components 中的重要组成部分，能够有效提升组件的复用性和维护性。使用 slot 可以轻松实现组件内容的分发，极大地增强了 Custom Elements 的表现力。本文介绍了 slot 的基础用法和进阶应用，希望对你有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/654c32a77d4982a6eb5d0101