当我们有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

iframe 仅用作封装对象...

除了 SVG（稍后会详细介绍），今天的 Web 平台仅提供一种内置机制来将一大块代码与另一块代码隔离——而且它并不漂亮。是的，我说的是 iframe。对于大多数封装需求，框架太重且限制性强。

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

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

这是一篇关于该主题的优秀文章：

Shadow DOM 到底是什么/