Custom Elements 是 Web Components 的核心技术之一，通过使用它可以创建自定义的 HTML 元素和组件，可以让开发者轻松地扩展和重用现有的 HTML 标准。在前端开发领域中，Custom Elements 的应用非常广泛，在各种常见的框架中也得到了很好的支持。
如何创建 Custom Elements
创建一个 Custom Element 需要以下步骤：
- 定义元素类（Element Class）继承自 HTMLElement：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-- ---
-
------------------- -
-- ---
-
-- 注册自定义元素：
window.customElements.define('my-element', MyElement);- 在 HTML 中使用自定义元素：
<my-element></my-element>
框架中的应用
React 中使用 Custom Elements
在 React 中使用 Custom Elements 要稍微复杂一些，我们需要使用另外一个库——react-custom-elements 来连接两个不同的世界。
首先，我们需要使用 react-custom-elements 包装自定义元素的类，使其成为一个可渲染的组件：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ ----------------- ---- ------------------------ ----- --------- ------- ----------- - -- --- - -- ----------------------- ----- ----------- - ----------------------------- ------ ------- ------------
然后，我们就可以在 React 中像使用普通组件一样使用自定义元素了：
function App() {
return (
<div>
<h1>Welcome to my app</h1>
<MyComponent />
</div>
);
}Vue 中使用 Custom Elements
在 Vue 中使用 Custom Elements 要比在 React 中简单许多。Vue 2.x 和 Vue 3.x 分别提供了两种不同的方案。
在 Vue 2.x 中使用 Custom Elements
在 Vue 2.x 中，我们可以通过将自定义元素包装成 Vue 组件来实现：
-- -------------------- ---- ------- ------ --- ---- ------ ----- --------- ------- ----------- - -- --- - ----- ----------- - ------------ -------- ---------- --- --------------------------- -------------
这样，我们就可以在 Vue 中像使用普通组件一样使用自定义元素了：
<template>
<div>
<h1>Welcome to my app</h1>
<my-element></my-element>
</div>
</template>在 Vue 3.x 中使用 Custom Elements
在 Vue 3.x 中，由于引入了 Composition API，我们可以更加简单地创建 Custom Elements，只需要使用 defineCustomElement 函数即可：
-- -------------------- ---- -------
------ - ------------------- - ---- ------
------ - --- - ---- ------
----- --------- ------- ----------- -
------------- -
--------
------------ - --
-
------------------- -
--------------
-
-------- -
-------------- - -
------- ---------------------------------------------
--------- -------------------
--
-
----------- -
---------------
--------------
-
-
----- ----------- - -------------------------------
----------------------------------- -------------然后，我们就可以在 Vue 中像使用普通组件一样使用自定义元素了：
<template>
<div>
<h1>Welcome to my app</h1>
<my-element></my-element>
</div>
</template>总结
通过 Custom Elements 技术，开发者可以轻松地创建自定义 HTML 元素和组件。而在框架中的应用也非常广泛。在 React 中使用 Custom Elements 需要使用 react-custom-elements 库进行包装，而在 Vue 中则更加简单直接，Vue 2.x 将其包装成 Vue 组件，而 Vue 3.x
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651ba3a795b1f8cacd34728a