使用 Shadow DOM 的缺点是什么？

Question

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

Answer 1

Shadow DOM 特性既可以被视为优点，也可以被视为缺点：

如果您愿意，样式隔离是一个好处，但如果用户想要使用全局 CSS 样式表中的 Shadow DOM 设置组件样式，则它是一个缺点。

DOM 阴影在某些情况下是一个好处，但如果外部脚本/库或扩展需要解析或选择内容，则它是一个缺点。

有许多 3rd 方库（或扩展）不能处理 Shadow DOM 内容，因为它们不是为处理它而设计的，或者需要一些额外的配置来处理 Shadow DOM。

例子：

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

此外，解析 HTML 的扩展程序将在 Shadow DOM 边界被阻止：如果您不想窥探，这是一个好处，如果您将它们视为有用的服务，则是一个缺点。

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

示例：

• TinyMCE 集成

结论

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

• 如果您需要与一些不兼容的第三方组件或库进行交互，请不要使用 Shadow DOM。

Answer 2

嗯嗯，这个技术的规范还没有稳定下来，很多浏览器都不支持。 我称之为缺点。

请参阅： https : //developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow

现在我想说； 在大多数情况下避免使用，除非您想尝试新的东西并且它不适用于生产环境。