使用Shadow DOM的缺点有哪些？

Question

在教程中，我们只看到了Shadow DOM的好处，但是也应该存在一些缺点。在哪些情况下应该避免使用Shadow DOM？

- ganqqwerty

---

好的，如果你的目标浏览器是Chrome，我看不出真正的缺点。由于Polymer的存在，Chrome有动力全面支持它 :) - Kasia

根据你的观点，优点可能变成缺点。 - Supersharp

@Supersharp 好的，除了兼容性问题，我应该在哪些情况下避免使用 Shadow DOM？ - ganqqwerty

Answer 1

Shadow DOM功能既有优点也有缺点：

样式隔离是一种优点，如果您需要它的话，但如果用户想要使用全局CSS样式表为影子DOM组件设置样式，则是一种缺点。

DOM遮蔽在某些情况下是有益的，但如果外部脚本/库或扩展需要解析或选择内容，则是一种缺点。

由于许多第三方库（或扩展程序）不支持Shadow DOM内容，因此存在许多问题，因为它们未设计用于处理它，或者需要进行一些额外的配置才能与Shadow DOM一起使用。

例如：

• Disqus评论集成
• CodeMirror编辑器集成
• Wiris数学编辑器集成

另外，解析HTML的扩展程序将被阻止在Shadow DOM边界处：这是一种优点，如果您不想被监视，但如果您认为它们是有用的服务，则是一种缺点。

事件传播在Shadow DOM内部和外部是不同的。 因此，您可能会在处理UI事件时遇到一些困难。

例如：

• TinyMCE集成

结论

• 仅在需要CSS样式或DOM隔离时使用Shadow DOM。

• 如果需要与某些不符合规范的第三方组件或库交互，请勿使用Shadow DOM。

- Supersharp

---

有其他方法可以隔离CSS（例如CSS模块），不会像Shadow DOM那样引起太多副作用。这难道是Shadow DOM的唯一好处吗？ - SaroGFX

Answer 2

这项技术的规范尚未稳定，并且不受许多浏览器支持，这可以称为一个缺点。

详见：https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow

目前我会建议：在大多数情况下应避免使用，除非您想尝试新技术并且不用于生产环境。

更新：到现在为止，所有现代浏览器都支持此功能。

- KIKO Software

---

他们确实有polyfills。 - Niklas

所以它在各个方面都很完美，但是太新了？ - ganqqwerty