什么是 Custom Elements
Custom Elements 是 Web 组件化的一种实现方式，它新增了一种在 Web 上自定义组件的方法。Custom Elements 允许开发者在 Web 上定义新的 HTML 标签，并实现自己的标签行为。
自定义组件可以自定义属性、方法、事件等等，而且可以和原生组件方式一样被使用。
为了创建自定义的组件，在 Custom Elements 规范中提供了两个新的 JavaScript API：CustomElementRegistry 和 HTMLElement。使用它们，你可以轻松地创建自己的自定义元素。
Slot 插槽的作用
Slot 插槽是 Custom Elements 的一种重要功能。其作用是允许自定义标签内的内容在运行时动态替换，从而实现自定义组件的更高度的可定制化。
下面是一个过渡性例子，我们定义了一个自定义元素 my-button，该元素包含了一个按钮样式和一个文本内容。我们要做的就是使得文本内容可以在运行时动态替换。
<my-button> <span slot="label">确定</span> </my-button>
如上所示，使用 slot 插槽，我们可以将文本“确定”传递给 my-button 元素。
在 my-button 的定义中，我们可以使用 slot 插槽声明一个或多个插槽：
-- -------------------- ---- -------
----- -------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
-------------------- - -
-------
------ -
-------- -----
----------------- -----
------ ------
------- -----
-
--------
--------
----- --------------------
---------
--
-
-
---------------------------------- ----------细节和技巧
- 多个 slot
如果自定义元素中有多个位置需要动态插入内容，我们可以声明多个插槽：
<my-element> <span slot="header">头部</span> <span slot="content">主体...</span> <span slot="footer">底部</span> </my-element>
在自定义组件中的插槽也要对应使用多个名称：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
-------------------- - -
--------
----- ---------------------
---------
------
----- ----------------------
-------
--------
----- ---------------------
---------
--
-
-
----------------------------------- ------------ slot 填充默认值
在一些情况下，我们需要给 slot 插槽提供默认值，避免在没有动态传入内容时出现过多的空格。
<my-element> <!-- 没有设置 slot="content" 值时，会显示默认文案 --> </my-element>
自定义组件中可以在插槽上使用一个带有值的属性，如下：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
-------------------- - -
-----
----- --------------------------
------
--
-
-
----------------------------------- -----------带有值的属性可以防止输出的空字符串。
- 复杂度递增
我们可以构建递增的复杂度，从而建立更复杂的 UI。例如，你可以定义一个有两个 slot 的自定义组件，并将其中一个 slot 嵌套到另一个 slot 中：
<my-element>
<span slot="title">
<span slot="inner-title">标题</span>
</span>
<span slot="content">内容</span>
</my-element>JavaScript 中，我们需要先定义外部的 slot 并引用内部的 slot：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
-------------------- - -
-----
----- -------------
--------- -------------------------------
-------
- ---- ---- - --------- - -
------
--
-
-
----------------------------------- ------------ 控制渲染顺序
在使用 slot 插槽时，需要注意渲染顺序。当我们使用 slot 时，上下文不能保证是很明显的。可以使用 CSS 来控制这个渲染顺序，CSS 的 order 属性可以控制元素顺序。
-- -------------------- ---- ------- ---- ----- - -------- ----- - ------------------ - ------ --- ----- -- - ---------------- ----------------- - ----- -- --
总结
通过使用 slot 插槽，我们可以让自定义元素更加的灵活和自由。高度灵活的自定义组件可以帮助我们更快地构建 Web 应用程序，从而提高了开发效率。在使用时，我们可以多练习，灵活使用插槽，让自定义组件具备更多的特性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649b82e248841e98948486be