What are those "#document-fragment" elements within input elements in Chrome Inspector?

Question

Since some time, when I inspect an input in Chrome, I see those strange #document-fragment greyed-out elements. I also notice that sometimes there are more, and sometimes there are less of them.

What are these things? And is there a way to hide them in the inspector?

Answer 1

You see this in your inspector because you have the option activated to "Show Shadow DOM". You find this setting in the general settings tab under the "Elements"

If you deactivate it. These fragments will disappear from your inspector

Shadow DOM is internal to the element and hidden from the end-user. Its nodes are not children of <my-custom-element> or <input> or ... (http://www.polymer-project.org/platform/shadow-dom.html#shadow-dom-subtrees)

You will find more information here:

• Inspector: https://developers.google.com/chrome-developer-tools/docs/settings?hl=en
• Shadow Dom: http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/
• W3: http://www.w3.org/TR/shadow-dom/#shadow-trees