输入中的阴影根div

Question

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

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

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

然后,我看了开发工具,我看到了一些我以前从未见过的东西."#shadow-root"和输入中的div.

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

Chrome开发工具上次有些奇怪,我遇到了一些问题.例如,它将style.css文件加倍并忘记加载另一个文件导致jquery日历的可怕外观(仅在我的浏览器上加载时).

这可能不是一个错误,而是一个功能,但我很想知道更多

Answer 1

这就是Shadow DOM.

只需单击选项并禁用" 显示Shadow DOM "选项即可.

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

关于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)

进一步阅读:

Shadow DOM的基本介绍性描述

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

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

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