对于大多数现代浏览器来说，自定义元素已经成为了一个很方便且强大的前端技术。通过自定义元素，我们可以使用任意的 HTML 标签来实现完全自定义的组件。但是在 IE 11 中，自定义元素却无法正常工作。本文将会介绍这个问题的原因，并提供一些解决方案。
问题原因
在 IE 11 中，自定义元素需要使用 registerElement() 方法 进行注册。然而，这个方法只在最新版本的 Chrome、Safari 和 Firefox 中被支持，在 IE 11 中并不支持。
因此，在 IE 11 中，我们需要使用 Polymer 这样的第三方库来实现自定义元素。Polymer 会尽可能地兼容各种浏览器，并提供一致的 API。
解决方案
使用 Polymer
Polymer 是由 Google 维护的一个开源项目，它充分利用了 Web Components 技术，并提供了一套完善的 API 来创建自定义元素。
下面是一个使用 Polymer 创建自定义元素的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------- ------ ------- ---------------
------- ------------------------------------------------------------------------------------------------------
------- -----------------------------------------------------------------------------------
-------
------
---------------------------------------
----------- -----------------------
----------
--------- ----------
-----------
--------
---------
--- -------------------
---
---------
-------------
-------
-------在这里，我们通过 dom-module 标签来创建自定义元素，并在 Polymer() 函数中进行注册。Polymer 还提供了丰富的生命周期函数和事件，可以方便地对自定义元素进行管理和使用。
使用 MutationObserver
如果你不想使用 Polymer，也可以使用 MutationObserver 这个 API 来对自定义元素进行监听和管理。
下面是一个使用 MutationObserver 监听自定义元素的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------------- ---------------
-------
------
---------------------------------------
--------
-------- ------------------------------- -
------------------------------------ -
--- ----- - ------------------------------------------------
---------------------------- -
-- ---------------------------- --- -------------------- -
------------------- ------- -------- ------
-
---
---
-
--- -------- - --- ---------------------------------------
------------------------------- - ---------- ----- -------- ---- ---
---------
-------
-------在这里，我们通过创建一个 MutationObserver 对象来监听 document.body 中的子节点的变化。当发现一个自定义元素被添加到页面中时，我们可以调用相应的函数来进行处理。
总结
在 IE 11 中，自定义元素无法直接使用 registerElement() 方法进行注册。但我们可以使用 Polymer 或 MutationObserver 等工具来对自定义元素进行支持。这些解决方案可以帮助我们兼容各种浏览器，并提供一致的开发 API，从而更加方便地实现自定义组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6497dd1848841e98944e42a4