Custom Elements 是 Web Components 规范的一部分，它允许开发者创建自定义 HTML 元素，并在页面中使用。然而，Custom Elements 目前并不是所有主流浏览器都原生支持的，这就需要我们使用 Polyfill 来实现兼容性。
什么是 Polyfill
Polyfill 是一种技术，用于填充浏览器缺失功能的代码。在 Web 开发中，开发者经常会使用新的 Web API 或者语言特性，然而这些新特性并不是所有浏览器都支持的，这就需要使用 Polyfill 来实现兼容性，让代码在所有浏览器上都能正常运行。
使用 Polyfill 实现 Custom Elements 兼容性
针对 Custom Elements，我们可以使用 webcomponentsjs 这个 Polyfill 库来实现兼容性。它包含了 Custom Elements、Shadow DOM、HTML Imports 和模板标签等 Web Components 规范的 Polyfill 实现。
安装 webcomponentsjs
我们可以通过 npm 来安装 webcomponentsjs：
npm install --save @webcomponents/webcomponentsjs
也可以通过 CDN 来引入：
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.4.3/bundles/webcomponents-sd-ce.js"></script>
使用 webcomponentsjs
引入 webcomponentsjs 后，我们可以在自定义元素类中使用 customElements.define 方法来定义自定义元素。例如：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
------------------------- - -
-------
----- -
-------- ------
------- --- ----- ------
-------- -----
-
--------
---------- -----------
--
-
-
----------------------------------- -----------上面的代码定义了一个名为 my-element 的自定义元素，它会在页面中显示一个带有边框和标题的块级元素。
示例代码
下面是一个完整的示例代码，它定义了一个名为 my-element 的自定义元素，并在页面中使用：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
------------- -------- -------- ------------
------- ----------------------------------------------------------------------------------------------------------------
-------
------
-------------------------
--------
----- --------- ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
------------------------- - -
-------
----- -
-------- ------
------- --- ----- ------
-------- -----
-
--------
---------- -----------
--
-
-
----------------------------------- -----------
---------
-------
-------在浏览器中打开这个 HTML 文件，可以看到页面上显示了一个带有边框和标题的块级元素，这就是我们定义的自定义元素。
总结
Custom Elements 是 Web Components 规范的一部分，它允许开发者创建自定义 HTML 元素，并在页面中使用。然而，Custom Elements 目前并不是所有主流浏览器都原生支持的，这就需要我们使用 Polyfill 来实现兼容性。使用 webcomponentsjs 这个 Polyfill 库，我们可以很容易地在所有浏览器上使用 Custom Elements。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6625b5eec9431a720c20ba6b