什么是 Custom Elements？
Custom Elements 是 Web Components 的四个技术规范之一，它允许你自定义 HTML 元素并且使其可以具有自定义行为和属性。
在 Custom Elements 中，你可以定义一个自定义元素，就像定义一个普通的 HTML 元素一样，例如：
class MyElement extends HTMLElement {
constructor() {
super();
}
}
customElements.define('my-element', MyElement);这将定义出一个名为 my-element 的自定义元素，你可以在 HTML 中使用它，例如：
<my-element></my-element>
为什么要使用 Custom Elements？
使用 Custom Elements 可以将自定义功能封装在一个 HTML 元素中，使得代码更加模块化，易于理解和维护。此外，它还可以提高重用性和可互操作性，使得你的代码可以跨浏览器和框架使用。
Custom Elements 的常见问题解答
1. 如何定义 Custom Element？
定义 Custom Element 需要继承自 HTMLElement 或其子类，通过定义 constructor 和 connectedCallback 等方法来定义元素行为和属性，如下所示：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
----------------------- ----------
-
------------------- -
----------------------- ------------
-
-
----------------------------------- -----------2. 如何给 Custom Element 添加属性？
你可以使用属性访问器（attribute accessors）来添加属性，如下所示：
-- -------------------- ---- -------
----- --------- ------- ----------- -
--- ----- -
------ -------------------------
-
--- -------- -
------------------------ -----
-
-
----------------------------------- -----------你可以在 HTML 中设置属性，例如：
<my-element foo="bar"></my-element>
3. 如何给 Custom Element 添加样式？
你可以在 Shadow DOM 中使用样式来定义 Custom Element 的外观，例如：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------------ ---------
----- ----- - --------------------------------
----------------- - -
----------- -
------ ----
-
--
------------------------------
----- --- - ------------------------------
--------------------------------
--------------- - ------- --------
----------------------------
-
-
----------------------------------- -----------4. 如何监听 Custom Element 的事件？
你可以在 connectedCallback 方法中添加事件监听器，例如：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------------- -
------------------------------ -- -- -
----------------------- ----------
---
-
-
----------------------------------- -----------5. 如何为 Custom Element 添加方法？
你可以在 Custom Element 中定义方法，例如：
class MyElement extends HTMLElement {
foo() {
console.log('foo');
}
}
customElements.define('my-element', MyElement);然后，你可以通过元素的实例来调用方法，例如：
const myElement = document.querySelector('my-element');
myElement.foo();使用技巧
将样式和 HTML 模板分离
为了使代码更加模块化和易于维护，你可以将样式和 HTML 模板分离，例如：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------------ ---------
----- ----- - --------------------------------
----------------- - -----------------
------------------------------
----- ------- - ----------------------------------------------- ------
--------------------------------
-
------ --- -------- -
------ -
----------- -
------ ----
-
--
-
------ --- ---------- -
------ -----------------------------------
-
-
---------------------------- - -
---- -------------------
-------------
------
--
----------------------------------- -----------使用 TypeScript
使用 TypeScript 可以使得你的代码更加具有可读性和可维护性，例如：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------ ------------------ - --------
---- -------
------------- -
--------
----- ---------- - ------------------------ ---------
----- ----- - --------------------------------
----------------- - -----------------
------------------------------
----- ------- - ----------------------------------------------- ------
--------------------------------
------------------------------ -----------------------------
-
------- ------------- -
----------------------- ----------
-
------------------- -
----------------------- ------------
-
------------------------------ ------- --------- ------- --------- ------- -
---------------------- ------- ------- ---- ----------- -- --------------
-
------ --- -------------------- -
------ --------
-
------ --- -------- -
------ -
----------- -
------ ----
-
--
-
------ --- ---------- -
------ -----------------------------------
-
-
---------------------------- - -
---- -------------------
-------------
------
--
----------------------------------- -----------使用 Webpack 打包
使用 Webpack 可以将自定义元素打包成一个 JavaScript 文件，并在浏览器中使用，例如：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------------ ---------
----- ----- - --------------------------------
----------------- - -----------------
------------------------------
----- ------- - ----------------------------------------------- ------
--------------------------------
------------------------------ -----------------------------
-
------- ------------- -
----------------------- ----------
-
------------------- -
----------------------- ------------
-
------ --- -------- -
------ -
----------- -
------ ----
-
--
-
------ --- ---------- -
------ -----------------------------------
-
-
---------------------------- - -
---- -------------------
-------------
------
--
----------------------------------- -----------然后，你可以使用 Webpack 打包代码，并在浏览器中使用，例如：
import MyElement from './my-element.js';
customElements.define('my-element', MyElement);总结
Custom Elements 是一个非常有用的技术，可以使得你的代码更加模块化和易于维护，同时还可以提高重用性和可互操作性。在使用 Custom Elements 的过程中，你需要注意定义元素、添加属性、样式、事件、方法等细节，并且可以使用技巧来保证代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6493e23c48841e989417610a