在 Web 开发中，构建复杂的 Web 组件是一项重要而繁琐的任务。Custom Elements 的出现让组件的创建变得异常简单， Custom Elements 是 Web 平台的一项新特性，是前端工程师不可错过的技术之一。
什么是 Custom Elements
Custom Elements 允许开发者自定义 HTML 标签，比如 <my-element> ， 注册 Custom Elements 后， 这个自定义元素可以被作为原生 HTML 元素一样使用，即可使用自定义命令配置自定义元素， 监听内部 DOM，响应事件等。
Custom Elements 的基础使用
使用 Custom Elements 的第一步是要继承 HTMLElement 类，并通过 defined() 函数将自定义元素在浏览器中注册。 以下是定义一个简单的 Custom Elements 的基本代码。
-- -------------------- ---- -------
--------- -----
------
------
----- ------------- --
------------ ------ ----------------
------- ----------------------- -----------------------
-------
------
-------------------------
-------
--------- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
-
------------------- -
------------------------- - ---------- ------ ---------------
-
-
----------------------------------- -----------上述代码中， MyElement 继承了 HTMLElement 类，并且重写了 constructor 和 connectedCallback 函数。constructor 初始化了 Shadow DOM，而 connectedCallback 在元素被插入 DOM 树时被调用， 它用 innerHTML 方法将“ Hello Custom Element!”插入到 Shadow DOM 的根元素中。
Custom Elements 高级使用
Custom Elements 的高级用法涉及到在 Custom Elements 中使用 React 组件、增强 Custom Elements 的交互，以及使 Custom Elements 适应性ス多种浏览器。
在 Custom Elements 中使用 React 组件
使用 ReactDOM.render()将 React 组件渲染到 Custom Elements 中是一种非常简单的方式。在此例子中，开发者可以创建一个简单的 React 组件，并将它在 Custom Elements 中进行渲染。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
----- --------- ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
-
------------------- -
----- ----- - - ----- ------- -------- --
------------------------- ---------- --- -----------------
-
-
----------------------------------- -----------增强 Custom Elements 的交互
Custom Elements 需要添加事件监听器来响应用户行为。在使用 Custom Elements 时，可以使用自定义事件库，如 CustomEvent。以下是一个处理 Custom Event 的示例：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
------------------------- - -------------- -------------
----------------- - -----------------------------
-
------------------- -
---------------------------------------
-------------------------- -------------------
-
-------------- -
---------------------- ----------------------- -
------- - -------- ------ ------ ---------- -
----
-
-
----------------------------------- -----------在该示例中，当按钮被单击时会触发自定义的 my-event 事件。事件包含一个 message 属性，可以在页面中的事件监听器中进行访问。
使 Custom Elements 适应性多种浏览器
Custom Elements 能够在现代浏览器中工作，通过使用 webcomponents.js 中的 Custom Elements 和 Shadow DOM 的 Polyfill，你可以让 Custom Elements 在更多浏览器中工作，从而提供更好的浏览器支持。
总结
Custom Elements 是一项十分强大的 Web 开发技术，可以使组件化开发变得更加高效。在本文中我们学习了如何使用 Custom Elements 的基础知识和高级知识，希望您能够在日后的工作中灵活应用 Custom Elements，提高组件的开发效率。
参考资料
- Using Custom Elements
- React components with Custom Elements
- Custom Events in JavaScript
- webcomponents.js
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646bf7c2968c7c53b0b10883