Custom Elements 是 Web Components 技术的核心之一，它可以帮助开发者更加自由地组织自己的网页元素。然而，与此同时，我们也会发现，在自己的元素内使用第三方库并不是一件易事，本文将提供一些实用的指导方案。
基础知识
Custom Elements 允许我们通过继承 HTMLElement 或 HTMLButtonElement 等内置元素，并实现自定义的生命周期回调函数，从而创建我们自己的元素。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-- ---
-
------------------- -
-- ---
-
---------------------- -
-- ---
-
------------------------------ --------- --------- -
-- ---
-
----------------- -
-- ---
-
-
----------------------------------- -----------问题与解决方案
在以上基础上，我们可以继续扩展自己的元素。但是，如果我们使用了第三方库，我们就会发现在定义元素时，我们需要以某种方式将该组件及其依赖项打包成一个 JavaScript 包，并引入它。在这里，我们提供几种解决方案。
解决方案一：在元素上添加属性
我们可以将第三方库作为属性添加到自定义元素上：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
---------- - -------------
-- -------- ---------- ------ ---
-- ---
-
-
----------------------------------- -----------这种方式包含了很多缺点：
- 在当前作用域内，
myLib必须至少存在一个全局变量，而这通常无法满足我们的需求。 - 在引入的
myLib这个库发生改变时，我们需要在每个引用了它的元素上做出相应调整，非常不利于维护。 - 直接在元素实例上添加属性的方式非常不规范。
解决方案二：使用 npm，然后依赖注入
-- -------------------- ---- -------
------ ----- ---- ---------
----- --------- ------- ----------- -
------------- -
--------
---------- - ------
-- ---
-
-
----------------------------------- -----------与解决方案一相比，这种方式更具可维护性和可读性。
但是，在一些场景下，这种方式仍然存在问题：
- 如果我们需要将这个组件打包成一个单独的库，并且在未安装依赖的情况下，让它能够正常工作，那么这种方式就没办法处理了。
- 有时，我们想要在但一个库中引用多个第三方库，如果每个元素中都依赖注入一遍，那该怎么办？
解决方案三：使用动态 import()
解决方案三非常简单，使用 import() 方式来导入库：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
--------------------------- -- -
-- ----------
---------- - ------
-- ---
---
-
-
----------------------------------- -----------使用动态 import() 的方法可以在元素首次创建时将库导入，这通常是一个可行的解决方案。
注意：动态
import()目前在一些浏览器中还未完全支持，请在使用前仔细查看兼容性报告。
最佳实践
最佳实践是解决方案的终极形式，请仔细阅读以确保您的元素能够正确工作。
方案一的最佳实践
-- -------------------- ---- -------
------ ----- ---- ---------
----- ----- - --- --------
----- --------- ------- ----------- -
------------- -
--------
----------- - -----
-
----- ------------------- -
-- ---------
-- -------- -
----- -----------------
-
-- ----
-- -------------- -
-- ------------- -------- ---------------
----------- - --- --------
-
-- ---
-
-
----------------------------------- -----------方案二的最佳实践
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
----------- - -----
-
----- ------------------- -
-- ---------
-- -------------- -
-- -----
----- - -------- ----- - - ----- -----------------
-- ----
----------- - --- --------
-
-- ---
-
-
----------------------------------- -----------方案三的最佳实践
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
----------- - -----
-
----- ------------------- -
-- -----
----- - -------- ----- - - ----- -----------------
-- ----
----------- - --- --------
-- ---
-
-
----------------------------------- -----------结论
本文介绍了三种在 Custom Elements 中使用第三方库的解决方案，并提供了最佳实践。对于使用 Web Components 的开发者来说，这些方案应该足够解决大多数开发问题。当然，不同的情况下，不同的方案可能更具优势。请根据个人需求作出选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672394c02e7021665e109f19