What is DOMElement.shadowRoot?

Question

What is DOMElement.shadowRoot? What does it do? Why does it return null? What can it be used for?

document.body.shadowRoot

I tried searching but I can't understand what it does.

https://developer.mozilla.org/en-US/docs/Web/API/Element/shadowRoot — phuzi, Jun 30 '21 at 11:15
The third paragraph in the accepted answer sums it up pretty well, [What is shadow root](https://stackoverflow.com/questions/34119639/what-is-shadow-root) — Reyno, Jun 30 '21 at 11:19

score 0 · Accepted Answer · answered Jun 30 '21 at 11:24

It's a container for the "internal DOM" (i.e. the shadow DOM) of native elements such as <input> or <button> (or custom elements made with the web components APIs).

When you inspect <input> you only see the <input> itself:

But you can turn on a flag in the Chrome Dev Tools to enable the visibility of the shadow DOM:

You can now see how the <input> is "implemented" by the browser. For example the placeholder is contained within a <div> element:

What is DOMElement.shadowRoot?

1 Answers1