问题描述
Basic Custom Elements 是使用 Web Components 标准创建自定义元素的最基本方式。通过定义一个继承自 HTMLElement 的类并通过 customElements.define() 注册到浏览器中，即可创建一个可以在 HTML 中使用的自定义元素。
然而，在某些浏览器中，如 Internet Explorer 11，Basic Custom Elements 的渲染行为不符合预期。具体表现为：在通过 innerHTML 或 document.createElement() 创建的元素内，customElements.get() 方法无法正确返回自定义元素类。
原因分析
造成该问题的原因是，部分浏览器在 document.createElement() 或 innerHTML 解析自定义元素时，会创建一个空的 Shadow DOM 节点（shadowRoot）作为自定义元素的根节点。由于 Basic Custom Elements 并未定义 Shadow DOM，因此 customElements.get() 返回值为空。
解决方案
解决该问题的方案是，通过定义一个空的 Shadow DOM 根节点来欺骗部分浏览器，让它们认为该自定义元素有 Shadow DOM，从而正确返回 customElements.get() 方法的返回值。
示例代码如下：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
----- ---------- - -------------------
----- ------
---
-
-
----------------------------------- -----------在示例代码中，我们定义了一个新的类 MyElement，构造函数中通过 attachShadow() 方法创建了一个空的 Shadow DOM 根节点，并将它附加到当前元素上。这样，在部分浏览器中，MyElement 实例就有了一个非空的 Shadow DOM，从而可以正确被 customElements.get() 方法返回。
注意事项
在某些浏览器中，必须使用 mode: 'open' 参数创建 Shadow DOM，否则无法正确渲染自定义元素。
以上代码只适用于 Basic Custom Elements。如果你的自定义元素需要使用 Shadow DOM 或其他 Web Components 标准，请勿使用此方法。
如果你需要支持更多的浏览器，建议使用兼容性更好的 Web Components 实现库，如 Polymer 或 LitElement。
总结
通过定义一个空的 Shadow DOM 根节点，可以让 Basic Custom Elements 在部分浏览器中正确渲染，并正常返回 customElements.get() 方法。然而，如果你需要使用更复杂的 Web Components 特性，建议使用兼容性更好的 Web Components 实现库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f2cc2cf6b2d6eab3c6062d