13

我今天看到了一些奇怪的东西。查看与帖子相关的图片（下）。我做了一个输入[type="text"]。它是屏幕图片上的“1”。它的 css 看起来像这样；

table tbody input {
    width: 40px;
    border: none;
    height: 16px;
}

只是一个普通的输入，除此之外没有任何边框。

然后，我查看了开发工具，我看到了一些我以前从未见过的东西。“#shadow-root”和输入中的 div。

我知道，开发工具自己添加了一些东西来在原始网页上显示提示。但是，我真的很好奇为什么它会在输入中添加一个 div，以及实际上如何在 webkit 引擎上呈现类似的东西。

上次 Chrome 开发工具有点奇怪，我遇到了一些问题。例如，它加倍了 style.css 文件并忘记加载另一个是 jquery 日历看起来很糟糕的原因（仅在我的浏览器上加载时）。

它可能不是一个错误，而是一个功能，但我很想了解更多关于它的信息

输入在浏览器中可见（它不是直接的临时屏幕）

从开发工具端可以看到这个输入

4

2 回答 2

9

那就是Shadow DOM。

只需单击选项并禁用“ Show Shadow DOM ”选项..

w3c 草案可在https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html找到

关于 Chrome，请参阅http://chemicaloliver.net/programming/inspecting-the-shadow-dom-in-google-chrome-inspector/

于 2013-02-11T19:29:02.993 回答
5

正如 Gaby Petrioli 所指出的，这就是 Shadow DOM。它由浏览器创建，用于为第三方库等提供 HTML 封装接口。

封装是一个 OOP 概念，其中对象可以限制对自己数据的访问，以便第三方代码不能任意清除它。

HTML 缺乏任何封装能力，这对于第三方库（jQuery、twitter 按钮等）来说尤其是个问题。Shadow DOM 的发明是为了为 DOM 的各种子树提供功能封装。这是通过将功能子树与文档树（以及彼此）分开来实现的。影子 DOM 子树的这种分离称为影子边界。CSS 规则和 DOM 查询不跨越阴影边界，因此提供了封装。(1)

正如 Dominic Cooney 所说：这是一个使由 HTML 和 JavaScript 构建的小部件难以使用的基本问题：小部件内的 DOM 树没有从页面的其余部分封装。这种缺乏封装意味着您的文档样式表可能会意外地应用于小部件内部的部分；您的 JavaScript 可能会意外修改小部件内的部分；您的 ID 可能与小部件内的 ID 重叠；等等。(2)

延伸阅读：

Shadow DOM 的基本介绍

(1) 更完整的技术说明——本文第二部分讲解如何自己使用Shadow DOM

(2) Dominic Cooney 的文章：Shadow DOM 101

Shadow DOM - W3C 工作草案 2014 年 6 月 17 日

于 2014-10-20T17:06:14.150 回答