Custom Elements 是 Web Components 中的一个重要特性，可以让开发人员快速定义自己的 HTML 元素，并可以通过自定义事件、属性、方法等实现一些特定的业务逻辑。但是，由于 Custom Elements 是属于 Web Components 的一部分，很多前端框架并没有提供完善的支持，这就使得我们在不同框架中需要使用同一组件时遇到了一些困难。
本文将介绍如何在不同框架中共用同一组件，并提供实际的例子及其实现细节。
不同框架之间的共用问题
在不同前端框架之间共用 Custom Elements 或其他 Web Components 时，主要存在以下两个问题：
- 不同框架的元素命名空间不同，导致无法直接复用。
- 框架内置的样式和组件引用方式等也不尽相同，需要针对不同的框架进行适配。
下面我们通过实例来详细介绍这两个问题。
例子：使用 Vue 和 React 共用同一组件
我们以一个简单的例子为基础，介绍如何在 Vue 和 React 中共用一个名为“hello-world”的 Custom Element。
例子代码
首先，我们得有一个定义了“hello-world”元素的 JavaScript 文件。
-- -------------------- ---- -------
----- ---------- ------- ----------- -
------------- -
--------
----- ------ - ------------------------ ---------
----- ---- - -----------------------------
---------------- - ------- --------
-------------------------
-
-
------------------------------------ ------------上面的代码只是简单地创建了一个 ShadowDOM，并向其中添加了一个标题标签，内容为“Hello, World!”。接着，在我们的 Vue 和 React 项目中，可以直接像使用一般 HTML 元素一样使用“hello-world”。
-- -------------------- ---- -------
---- --- --- ---
----------
-----
------------ --
------
-----------
--------
------ ------- -
----- -------------
----------- -
-------------- ----------------------------------------
-
--
----------- -------------------- ---- -------
-- ----- ---
-------- ----------------- -
----- -------------- - -------------------------------------------------------------------
------------------------ -- -
---------------------------------------------- ------------------------
------ -- -- -------------------------------------------------
-- ----
------ --------------- ---
-在上面的代码中，我们分别在 Vue 和 React 中用到了“hello-world”元素，并在其中通过window.customElements.get('hello-world')来获取到定义在原生 JS 文件中的 HelloWorld 类型，然后将它们注册到了当前框架的组件中。
解决问题
1. 不同框架的元素命名空间不同
为了使得不同框架中的组件能够复用，我们需要为组件进行命名空间的统一，以避免重名的问题。因此，我们需要在组件命名的时候加入一个特定的前缀来区分不同框架。
例如，在 Vue 中可以直接在组件标签中加上自定义的前缀，例如：
<my-hello-world />
而在 React 中，由于不能直接修改元素的名称，因此我们需要在组件定义前为其加上特定的前缀，如下所示：
-- -------------------- ---- -------
----- ---------- ------- ----------- -
------ --- -------------------- -
------ ---------
-
------------- -
--------
----- ------ - ------------------------ ---------
----- ---- - -----------------------------
---------------- - ------- - - ------------------------- - ----
-------------------------
-
-
--------------------------------------- ------------上述代码中，我们定义了一个名为“my-hello-world”的元素，并在其中为它加入了一个“name”属性，用来动态地渲染“Hello, xxx!”这个文字列。之后，我们在 Vue 或 React 中使用的时候，就可以直接调用“my-hello-world”元素。
2. 样式和组件引用方式不同
框架内置的样式表和组件引用方式也是不能直接通用的。在样式表中，每个浏览器和框架都有不同的样式和选择器规则，因此复杂的样式表需要针对不同的框架进行调整。在组件引用中，由于不同框架略有不同的语法规则，因此我们需要将组件注册方法适配到当前框架中。
在 Vue 中，我们可以通过components属性来设置组件的引用方式，如：
-- -------------------- ---- -------
------ ------- -
----- -------------
----------- -
----------------- -------------------------------------------------------
--
-- --------
------ -
-- -
------ -----
--
--这里我们直接使用了window.customElements.get方法来获取到我们定义的组件类。
而在 React 中，我们需要适配组件的使用方式，如下所示：
function HelloWorld(props) {
const implementation = React.useRef(window.customElements.get('my-hello-world').constructor);
React.useLayoutEffect(() => {
window.customElements.define('my-hello-world', implementation.current);
return () => window.customElements.undefine('my-hello-world');
}, []);
return <my-hello-world {...props} />;
}可以看到，在 React 中我们需要借用React.useRef来引用定义好的组件类。然后，通过useLayoutEffect方法将其定义为可用的元素类型，最后再将其通过return语句返回回去。
结论
在本文中，我们介绍了 Custom Elements 在不同框架中如何共用的问题，并提供了实际的例子和代码实现。通过这些例子，我们可以更深入地理解 Custom Elements 的设计思想，并学会如何将不同框架中的组件复用，这将大大提高我们的开发效率。
希望读者们可以通过本文学会如何在现代网页应用中巧妙地使用 Custom Elements。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f62b33c5c563ced5803aa6