Custom Elements 是 Web Components 标准的一部分，可以让开发者自定义 HTML 标签并封装复杂的 UI 组件。在前端开发中，快速定制 Custom Elements 组件的方法显得尤为重要，它可以帮助我们一次性实现 UI 封装，降低项目的维护成本。
Custom Elements 的基本使用
在使用 Custom Elements 之前，我们需要定义一个继承于 HTMLElement 的自定义元素类，并为其指定标签名和模板。例如，我们可以定义一个名为 <custom-element> 的自定义元素：
<custom-element></custom-element>
为了定义一个 Custom Elements 组件，我们需要使用 ES6 的 Class 语法，继承自 HTMLElement 类：
class CustomElement extends HTMLElement {}我们还需要使用 Custom Elements API 将元素类注册为自定义元素：
window.customElements.define('custom-element', CustomElement);这样，我们就可以在 HTML 中使用 <custom-element> 这个标签了。不过，这个标签并没有任何内容，我们需要为其添加一些内容。
快速定制 Custom Elements 组件
1. 添加 Shadow DOM
Shadow DOM 可以让我们将自定义元素的样式和内容封装在一个独立的作用域内，避免样式和内容的污染。我们可以使用 Custom Elements API 中的 attachShadow 方法为 Custom Elements 组件添加 Shadow DOM 。
class CustomElement extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
}创建 Shadow DOM 后，我们还需要在其中添加我们的 DOM 结构和样式。通常情况下，我们可以在 Custom Elements 组件的构造函数中定义组件的模板：
-- -------------------- ---- -------
----- ------------- ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
------------------------- - -
-------
-- --- -- --
--------
-----
---- -- ---- -- ---
------
--
-
-2. 使用插槽
插槽是 Web Components 中的另一个强大特性，可以让我们在组件内部插入外部 DOM 元素。我们可以使用标准的 <slot> 元素定义插槽：
-- -------------------- ---- -------
----- ------------- ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
------------------------- - -
-------
-- --- -- --
--------
-----
-------------
------
--
-
-这样，我们就可以在 HTML 中将任意元素插入到 <custom-element> 元素中，例如：
<custom-element> <h1>Hello world!</h1> </custom-element>
3. 添加属性与方法
我们还可以为 Custom Elements 组件添加一些自定义属性和方法，来让组件更加灵活。例如：
-- -------------------- ---- -------
----- ------------- ------- ----------- -
------ --- -------------------- -
------ ----------
-
------------- -
--------
------------------- ----- ------ ---
------------------------- - -
-------
-- --- -- --
--------
-----
----------------------
-------------
------
--
-
------------------- -
------------------- ------- ----- -- --------
-
------------------------------ --------- --------- -
---------------------- ------- ------- ---- ----------- -- ---------------
-
--- ------- -
------ -------------------------- -- -------- -------
-
--- ------------ -
-------------------------- -------
-
-在上面的代码中，我们通过 get 和 set 方法定义了一个自定义属性 title ，并在组件的构造函数中使用该属性来设置元素的标题。同时，我们还定义了一个观察器函数 observedAttributes 来监听属性的变化，并在 attributeChangedCallback 中进行处理。而 connectedCallback 方法则是在 Custom Elements 组件被加入到页面中时被调用。
总结
Custom Elements 是 Web Components 标准的一部分，它可以让开发者自定义 HTML 标签并封装复杂的 UI 组件。在本文中，我们介绍了快速定制 Custom Elements 组件的方法，包括添加 Shadow DOM、使用插槽以及添加属性与方法。这些方法可以帮助我们一次性实现 UI 封装，提高项目的可维护性和可扩展性。
示例代码
完整代码如下：
-- -------------------- ---- -------
----- ------------- ------- ----------- -
------ --- -------------------- -
------ ----------
-
------------- -
--------
------------------- ----- ------ ---
------------------------- - -
-------
-- -
------ ----
-
--------
-----
----------------------
-------------
------
--
-
------------------- -
------------------- ------- ----- -- --------
-
------------------------------ --------- --------- -
---------------------- ------- ------- ---- ----------- -- ---------------
-
--- ------- -
------ -------------------------- -- -------- -------
-
--- ------------ -
-------------------------- -------
-
-
---------------------------------------------- ---------------使用方法：
<custom-element title="My title"> <h1>Hello world!</h1> </custom-element>
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651f96b095b1f8cacd7211e1