Html 阴影根div内部输入

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

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

只是一个普通的输入，而且这个没有任何边界

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

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

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

这可能不是一个bug，而是一个特性，但我很想了解更多

这就是阴影DOM

只需单击选项并禁用“显示阴影DOM”选项

w3c草案可在以下网址找到：

---

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

封装是一种面向对象的概念，其中对象可以限制对自己数据的访问，这样第三方代码就不能任意删除数据

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

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

进一步阅读：

---

您好，这里有点晚了，但我遇到了一个问题，阴影DOM（#Shadow root）在页面顶部添加了一条分隔线。我已经关闭了shadowdom选项，有什么想法吗？@andufo这里讨论的shadowdom仅指开发人员工具。你怎么知道你的问题是阴影DOM而不是实际的HTML/CSS？@gaby-aka-g-petrioli我已经做了几次检查，这肯定只发生在Chrome上。有些东西在@andufo后面加了5行空白，如果你能把它放到网上某个我可以看的地方。@gaby-aka-g-petrioli当然可以，