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

Question

我听说过shadow DOM，它似乎解决了web widget开发中的封装问题。DOM和CSS规则被封装起来，便于维护。但这不就是iframe的用途吗？iframes存在哪些问题，使得W3C有必要提出Shadow DOM或HTML5 Web组件？

Answer 1

iframes仅用作封装对象...

除了SVG (稍后将详细介绍)之外，今天的

平台只提供了一种将一块代码与另一块代码隔离的内置机制--这并不美观。是的，我说的是iframes。对于大多数封装需求，帧太重且限制太多。

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

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

这里有一篇关于这个主题的优秀文章：

What The Heck is Shadow DOM/

Answer 2

今天，iframe通常用于确保单独的作用域和样式。例如谷歌的地图和YouTube视频。

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

想象一下使用一组5个iframes创建一个页面，每个iframes包含一个组件。每个组件都需要一个单独的URL来托管iframe的内容。由此产生的标记将会被iframe标签弄得乱七八糟，从而产生语义意义较低的标记，而且阅读和管理起来也很笨拙。相比之下，web组件支持为每个组件声明丰富的语义标记。这些标记在HTML中充当一等公民。这有助于读者(换句话说，维护开发人员)。

总而言之，虽然iframe和影子DOM都提供了封装，但只有影子DOM被设计用于web组件，从而避免了iframe中出现的过度分离、设置开销和笨重的标记。