What are these "# document-fragment" elements in input elements in the Chrome Inspector?

Question

Since some time, when I check the input to Chrome, I see those strange #document-fragmentgreyed-out elements . I also notice that sometimes there are more, and sometimes fewer.

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 for "Show Shadow DOM". This option is located on the general settings tab in the "Elements" section.

If you turn it off. These fragments will disappear from your inspector.

Shadow DOM . <my-custom-element> <input> ... (http://www.polymer-project.org/platform/shadow-dom.html#shadow-dom-subtrees)

:

• : 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