我今天看到了一些奇怪的东西。看看下面的帖子相关的图片。我做了一个输入[type=“text”]。它的屏幕图片上的“1”。它的css看起来像这样;
table tbody input {
width: 40px;
border: none;
height: 16px;
}只是一个普通的输入，除此之外，这一个没有任何边界。
然后，我看了看开发工具，我看到了一些我以前从未见过的东西。“#shadow-root”和输入中的div。
我知道，dev-tools会自己添加一些东西来显示原始网页上的提示。但是，我真的很好奇为什么它会在输入中添加一个div，以及它实际上是如何在webkit引擎上渲染这样的东西的。
Chrome开发工具有点奇怪，上次我遇到了一些问题。例如，它把style.css文件翻了一番，却忘记加载另一个文件。这就是jquery日历糟糕的原因（只有在我的浏览器上加载时）。
这可能不是一个bug，而是一个特性，但我很想知道更多关于它的信息
2条答案
按热度按时间yquaqz181#
这就是 * 影子DOM*。
只需单击选项并禁用“显示阴影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/
deyfvvtc2#
正如Gaby Petrioli所指出的，这就是Shadow DOM。它由浏览器创建，为第三方库等提供HTML封装接口。
封装（也称为作用域）是一个OOP概念，其中对象可以限制对它们自己数据的访问，以便第三方代码不能任意清除它。
HTML缺少任何封装功能，这对于第三方库来说尤其是个问题（jQuery、twitter按钮影子DOM的发明***是为了为DOM的各种子树提供功能封装。这是通过保持功能子树与文档树分离来实现的（以及彼此）。这种影子DOM子树的分离称为影子边界。CSS规则和DOM查询不会跨越影子边界，因此提供了封装。（1）***
正如多米尼克·库尼所说：以下是一个基本问题，它使得基于HTML和JavaScript构建的小部件难以用途：小部件内部的DOM树并没有封装在页面的其他部分中，这种封装的缺失意味着文档样式表可能会意外地应用到小部件内部的部分; JavaScript可能会意外地修改小部件内部的部分;您的ID可能与小部件内的ID重叠;等等。（2）
影子DOM解决了现代Web开发中的以下问题：
This article by MDN解释了如何/为什么自己使用影子DOM。教程here。
进一步阅读：
Google Developer's updated article on ShadowDOM (2020)
MDN - Web Components (including Shadow DOM)
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 - now OUTDATED (See Google article above)
Shadow DOM - W3C Working Draft 17 June 2014