how to remove #shadow-root (user-agent) from html

Question

What is #shadow-root (user-agent)? how to remove it from text boxes?

In Detail
This is my code:

<input type="text" name="pincode" class="form-control frm_pincode" value="" />

But when I inspect it I see like

<input type="text" name="pincode" class="form-control frm_pincode" value="">
  #shadow-root (user-agent)
  <div id="inner-editor"></div>
</input>

Answer 1

Essentially it encapsulates code, making it more manageable. It's not necessarily something you're going to want to remove without making the functionality of the code you did generate unusable.

The following is code is hidden from you by the library you're using so you don't have to worry about coding certain objects. Chrome allows you to see where those #shadow Doms are located in the code.

  #shadow-root (user-agent)
  <div id="inner-editor"></div>

Check out this explanation from the link below:

"In a nutshell Shadow DOM is a new part of the HTML spec which allows developers to encapsulate their HTML markup, CSS styles and JavaScript. Shadow DOM, along with a few other technologies which we’ll cover later, gives developers the ability to build their own 1st class tags and APIs just like the or tag. Collectively, these new tags and APIs are referred to as Web Components."

The link below was key in helping understanding shadow DOM:
http://robdodson.me/blog/2013/08/26/shadow-dom-introduction/

This makes use of the shadow DOM to make creating custom tags possible:
https://www.polymer-project.org/

Finally, there's also an option under Chrome Dev Tools Options to "Show user agent shadow DOM"