当我们有iframe时为什么要使用Shadow DOM？

Question

我听说过shadow DOM，它似乎解决了Web小部件开发中的封装问题。 DOM和CSS规则被封装，这有利于维护。但那不是iframes的用途吗？ iframe有什么问题使得W3C有必要提出Shadow DOM或HTML5 Web组件？

Answer 1

今天，iframe通常用于确保单独的范围和样式。示例包括Google的地图和YouTube视频。

但是，iframe旨在在当前HTML文档中嵌入另一个完整文档。这意味着从父文档访问iframe中给定DOM元素中的值是一件麻烦的设计。 DOM元素位于完全独立的上下文中，因此您需要遍历iframe的DOM以访问您正在查找的值。将此与Web组件进行对比，Web组件提供了一种优雅的方式来公开用于访问自定义元素值的干净API。

想象一下，使用一组5个iframe创建一个页面，每个iframe包含一个组件。每个组件都需要一个单独的URL来托管iframe的内容。生成的标记将使用iframe标记，从而产生具有低语义含义的标记，这也是读取和管理的笨重。相比之下，Web组件支持为每个组件声明丰富的语义标记。这些标签在HTML中作为一等公民运行。这有助于读者（换句话说，维护开发人员）。

总之，虽然iframe和shadow DOM都提供了封装，但只有shadow DOM被设计用于Web组件，因此避免了iframe发生的过度分离，设置开销和笨重的标记。

Answer 2

iframes仅用作封装对象......

  

除了SVG（稍后会详见），今天的Web平台   只提供一种内置机制来隔离一块代码   另一个 - 它不漂亮。是的，我在谈论iframe。对于   大多数封装需求，帧太重和限制。

Shadow DOM允许您通过创建DOM的另一个克隆或其中的一部分来提供更好，更简单的封装。

例如，假设您构建了一个跨网站使用的小部件（就像我一样）。 你的小部件可能会受到页面上的css的影响并且看起来很糟糕，而使用Shadow DOM它不会:)

以下是关于该主题的优秀文章：

What The Heck is Shadow DOM /