Question

我今天看到了一些奇怪的事情。看看与帖子相关的照片（下方）。我做了一个输入[type =“text”]。它是屏幕图片上的“1”。它的css看起来像那样;

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

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

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

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

Chrome dev-tools上次有些奇怪，我遇到了一些问题。例如，它将style.css文件加倍并忘记加载另一个文件导致jquery日历的可怕外观（仅当加载到我的浏览器上时）。

这可能不是一个错误，而是一个功能，但我想知道更多关于它的信息

Input visible in browser (it's not straight, adhoc screen)

This input visible from the dev-tools side

Answer 1

那是 Shadow DOM 。

只需点击选项并停用“ 显示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/

Answer 2

正如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）

进一步阅读：

Basic introductory description of the Shadow DOM

(1) A more complete technical description - the second part of this article explains how to use the Shadow DOM yourself

(2) Dominic Cooney's article: Shadow DOM 101

Shadow DOM - W3C Working Draft 17 June 2014

输入中的阴影根div

2 个答案: