Shadow root div inside input

Question

I've seen something strange today. Look at the pics related to the post (below). I've made an input[type="text"]. Its the "1" on the screen picture. It's css looks something like that;

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

Just an ordinary input, besides this one doesn't have any border.

Then, I looked at the dev-tools, and I saw something what I've never seen before. The "#shadow-root" and a div inside an input.

I know, that dev-tools adds something by themself to display hints on the original webpage. However, I'm really curious why it adds a div inside an input, and how is that actually possible to render anything like that on webkit engine.

Chrome dev-tools are somehow weird last time, I had some issues with it. For example, it doubled the style.css file and forgets to load another one what was the cause of the terrible look of jquery calendar (only when loaded on my browser).

It's probably not a bug, but a feature, but I'd love to know more about it

Answer 1

That is the Shadow DOM.

Just click at the options and disable the "Show Shadow DOM" options..

The w3c draft can be found at https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html

and in regards to Chrome see http://chemicaloliver.net/programming/inspecting-the-shadow-dom-in-google-chrome-inspector/