背景
自定义元素是现代前端开发中的重要组成部分。当我们需要创建完全自定义的 HTML 元素时，自定义元素就派上了用场。但是，在 Safari 浏览器中，我们可能会遇到一些问题。本文介绍如何解决在 Safari 中使用自定义元素时出现的问题。
问题
在 Safari 浏览器中，当我们使用自定义元素时，可能会遇到两个问题：
- 自定义元素不被正确解析，只显示空白。
- 自定义元素被解析为未知元素，导致 CSS 样式无法应用。
解决方案
解决这两个问题的方法都是基于一个核心原则：在使用自定义元素之前，必须先注册它们。确保浏览器知道如何解析它们。
注册自定义元素
要注册自定义元素，我们可以使用 customElements 对象的 define() 方法。在该方法中，我们可以指定自定义元素的标签名称，可以指定一个扩展已存在的元素，或者仅指定一个 HTMLElement 派生类。
下面是一个示例：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-
------------------- -
-------------- - ----------- -------------
-
-
----------------------------------- -----------在这个示例中，我们定义了一个名为 MyElement 的类，它扩展了 HTMLElement。connectedCallback 方法将在元素被插入到文档的 DOM 中时被调用。我们使用该方法在自定义元素的内部设置了一些内容。
接下来，我们调用 customElements.define() 方法来将自定义元素注册为名为 my-element 的标签名称。这将确保我们的自定义元素在浏览器中被正确解析和渲染。
添加 polyfill
但不幸的是，customElements 并不是所有浏览器都支持。在 Safari 浏览器中，版本10.0之前的浏览器甚至不支持 customElements.define() 方法。为了解决这个问题，我们可以使用一个 polyfill，这样我们的自定义元素将得到跨浏览器的支持。
webcomponents/polyfills 是一个良好的 polyfill 库。你可以将它作为一个 script 标签添加到你的 HTML 页面中。这个库不仅提供了 customElements，还提供了大量的 Web Components 的 polyfills，如 ShadowDOM、HTML Imports、HTML Templates 等。
使用 polyfill 示例代码
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
------------- ------ -------- -------------
------- ----------------------------------------------------------------------------------------------------------------
-------
------
-------------------------
--------
----- --------- ------- ----------- -
------------- -
--------
-
------------------- -
-------------- - ----------- -------------
-
-
----------------------------------- -----------
---------
-------
-------在这个示例中，我们声明了一个 MyElement 类，并将它注册为自定义元素。然后，我们将这个元素插入到文档的 DOM 中。最后，我们使用 polyfill 库解决了浏览器兼容性问题。
总结
自定义元素是现代前端开发中的一个非常强大的功能。但是，在 Safari 浏览器中，我们可能会遇到一些兼容性问题。通过注册和 polyfill，我们可以轻松地解决这些问题，并确保我们的自定义元素在所有现代浏览器中得到正确解析和渲染。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6498e35b48841e98945d1f65