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,而是一个功能,但我很想更多地了解它

解决方法

那就是Shadow 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/