简介
在构建复杂 Web 应用程序界面时，使用可重用的组件是必不可少的。可以通过使用 Custom Elements 来构建自定义组件，这是一种由 Web Components 规范定义的原生浏览器 API。Custom Elements 允许开发者创建独立于现有 HTML 元素的新元素。
使用 Custom Elements
使用 Custom Elements，必须遵循以下步骤：
1. 定义一个新元素类
定义一个新元素类，这可以通过 ES6 类来完成。该类必须继承 HTMLElement 或其子类。
class MyCustomElement extends HTMLElement {
constructor() {
super();
// ...
}
// ...
}2. 注册新元素
借助 customElements.define() 方法，在浏览器的自定义元素注册表中注册新元素。
customElements.define('my-custom-element', MyCustomElement);3. 使用新元素
在 HTML 文件中使用新元素。
<my-custom-element></my-custom-element>
4. 创建 Shadow DOM
为新元素创建 Shadow DOM，这将使元素不受全局样式表的影响。
-- -------------------- ---- -------
----- --------------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
-- ---
-
-- ---
-5. 添加模板和样式
在元素内部添加模板和样式。
-- -------------------- ---- -------
----- --------------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
----- -------- - -----------------------------------
------------------ - -
-------
-- ------ ---- --
--------
---- -------- ---- ---
--
-----------------------------------------------------
-
-- ---
-6. 添加元素行为
添加元素行为，这可以通过方法、属性以及事件监听器实现。
-- -------------------- ---- -------
----- --------------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
----- -------- - -----------------------------------
------------------ - -
-------
-- ------ ---- --
--------
---- -------- ---- ---
--
-----------------------------------------------------
-
------------------- -
-- ---- ----
-
-- ---
-实例
以下是一个示例新元素，它使用 Custom Elements 构建：
-- -------------------- ---- -------
----- --------------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
----- -------- - -----------------------------------
------------------ - -
-------
-------- -
------- --- ----- ------
-------- -----
-
--------
---- ----------------
--------- ----------
------------- -----------
------
--
-----------------------------------------------------
-
------------------- -
----- ------ - ----------------------------------------
-------------------------------- -- -- -
------------------
---
-
-
------------------------------------------ -----------------然后，可以在 HTML 中将它作为一个标准元素使用：
<my-custom-element></my-custom-element>
总结
Custom Elements 是一种非常有用的浏览器 API，它可以使开发者轻松地构建自定义组件。通过遵循上述步骤，可以创建自己的新元素，并使用它们构建复杂的 Web 应用程序界面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ec2f11f6b2d6eab367417c