在前端开发中，我们常常需要使用自定义的 HTML 元素来实现一些特定的功能。为了方便使用和维护，我们可以使用 Custom Elements API 来创建自定义元素。而在这些自定义元素中，我们也可以使用被命名的插槽来实现更加灵活的内容分发。
Custom Elements API
Custom Elements API 是一个由 W3C 制定的 Web 标准，它提供了一种创建自定义元素的方式。通过 Custom Elements API，我们可以使用 JavaScript 来定义一个自定义元素，并且可以在 HTML 中使用它。
class MyElement extends HTMLElement {
constructor() {
super();
// ...
}
}
customElements.define('my-element', MyElement);在上面的代码中，我们定义了一个名为 MyElement 的自定义元素，并且使用 customElements.define() 方法将其注册为 my-element。这样，在 HTML 中我们就可以使用这个自定义元素了。
<my-element></my-element>
被命名的插槽
被命名的插槽是指在自定义元素中，我们可以使用 <slot> 元素来定义一个插槽，然后在使用该自定义元素时，可以在插槽中插入任意内容。而且，我们还可以为插槽指定一个名称，以实现多个插槽的分发。
<my-element> <div slot="header">Header</div> <div slot="content">Content</div> <div slot="footer">Footer</div> </my-element>
在上面的代码中，我们定义了一个名为 my-element 的自定义元素，并且在其中使用了三个被命名的插槽，分别为 header、content 和 footer。当我们在 HTML 中使用这个自定义元素时，可以在插槽中插入任意内容。
<my-element> <h1 slot="header">Title</h1> <p slot="content">Content</p> <button slot="footer">OK</button> </my-element>
在上面的代码中，我们使用了 my-element 自定义元素，并且在三个被命名的插槽中插入了不同的内容。这样，在页面中就可以灵活地分发内容了。
示例代码
下面是一个完整的示例代码，演示了如何使用 Custom Elements API 和被命名的插槽来创建一个自定义元素。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ----------------
-------
------
------------
--- ------------------------
-- --------------------------
------- -------------------------
-------------
--------
----- --------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
----- -------- - -----------------------------------
------------------ - -
-------
----- -
-------- ------
------- --- ----- -----
------- -----
-------- -----
-
-------------------------- -
---------- -----
------------ -----
-
--------------------------- -
---------- -----
-
-------------------------- -
------- --- ----- -----
-------- --- -----
----------------- -----
-
--------
----- ---------------------
----- ----------------------
----- ---------------------
--
-----------------------------------------------------
-
-
----------------------------------- -----------
---------
-------
-------在上面的代码中，我们定义了一个名为 MyElement 的自定义元素，并且为它定义了三个被命名的插槽，分别为 header、content 和 footer。在自定义元素的构造函数中，我们创建了一个 Shadow DOM，并且为其添加了一个包含样式和插槽的模板。这样，在使用该自定义元素时，就可以根据需要在插槽中插入不同的内容了。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d34e9fa941bf713463ea81