Search code examples
google-chromeweb-inspectordocumentfragment

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


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?


Solution

  • 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

    Chrome inspector settings

    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: