Web Components 是现代 Web 开发中的一项重要技术，可以让开发人员创建可复用的、封装和定制化的 Web 组件，而且能够通过扩展自定义元素和自定义 Shadow DOM 来实现这一目标。然而，在 Safari 的一些早期版本中，却出现了无法扩展 Shadow DOM 的问题。本文将详细讨论此问题，并介绍解决方案。
问题描述
在 Safari 10.0.1 到 12.0 的版本中，Web Components 库不能够正确扩展 Shadow DOM。在这种情况下，当自定义元素尝试扩展 Shadow DOM 时，元素根节点会被直接插入到文档中，而不是 Shadow DOM 中，导致元素的样式出现问题。这个问题也可以导致 DOM 结构的意外变化，甚至会导致无法工作的 Web 应用程序。
解决方案
支持原生 Shadow DOM
在 Safari 的最新版本中，已经原生支持 Shadow DOM，问题已经被修复。因此，最佳的解决方案是升级到最新版的 Safari 和 WebKit。
Polyfill 引入
如果升级到最新版本的 Safari 和 WebKit 的解决方案不可行，可以考虑使用 polyfill。有一些 polyfill 可以模拟 Shadow DOM，使代码可以在早期的 Safari 版本上运行。
这里介绍一个 polyfill，它可以解决 Safari 的 Shadow DOM 扩展问题：ShadyDOM。ShadyDOM 是 Web Components 中的一个 Shadow DOM Polyfill，可以修复 Safari 问题，并且可以在现代浏览器中使用。
使用时，需要在 JavaScript 中引入 ShadyDOM：
import '@webcomponents/webcomponentsjs';
import { applyPolyfill } from '@webcomponents/webcomponentsjs';
import { ShadyDOM } from '@webcomponents/shadycss/entrypoints/scoping-shim';
applyPolyfill(ShadyDOM);检查代码
如果你在使用 Shadow DOM 扩展的过程中遇到了问题，可以使用浏览器的开发工具来检查文档树，验证你的 DOM 结构是否是预期的。
示例代码
下面是一个示例代码，展示如何使用 ShadyDOM 库，在 Safari 中扩展 Shadow DOM：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ------------------
-------
------
------------------------- ---- ----- ---
---- ---- ---
--------- -------------------------
-------
---- -
------ ----
-
--------
----------- -------------
-----------
---- -- -------- ---
------- --------------
------ ---------------------------------
------ - ------------- - ---- ---------------------------------
------ - -------- - ---- ---------------------------------------------------
------------------------
----------------------------------- ----- ------- ----------- -
------------- -
--------
-- ------ ------ ---
----- -------- - -----------------------------------------------------------------------
----- ---------- - ------------------- ----- ------ ---
---------------------------------
-
---
---------
-------
-------在这个示例中，我们首先定义了一个自定义元素 my-element，并在文档顶部定义了一个模板，该模板包含一个 span 元素和样式。在 script 标记中，首先引入 ShadyDOM polyfill，然后定义 my-element 元素，在构造函数中渲染 Shadow DOM。
总结
在 Safari 中使用 Shadow DOM 扩展的问题，有两种解决方案：升级 Safari 和 WebKit 或者使用 polyfill。对于较早的 Safari 版本，推荐使用 ShadyDOM polyfill 解决问题。不论是哪种解决方案，在开发过程中，正确的 DOM 结构是至关重要的，需要使用开发者工具进行检查。通过这篇文章的学习和指导，希望您能够成功地解决 Web Components 在 Safari 中无法扩展 Shadow DOM 的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c5caf395c405902ee345e8