How to get element in user-agent shadow root with JavaScript?

javascript html web-component shadow-dom
Yaroslav Polubedov picture Yaroslav Polubedov · Aug 1, 2016 · Viewed 25.7k times · Source

I need get elements from Shadow DOM and change it. How i can do it?

<div>
     <input type="range" min="100 $" max="3000 $">
</div>

Answer

Supersharp picture Supersharp · Aug 3, 2016

You cannot access a Shadow DOM created by the browser to display a control, that is called a #shadow-root (user-agent) in the Dev Tools. <input> is one example.

You can only access open custom Shadow DOM (the ones that you create yourself), with the { mode: 'open' } option.

element.attachShadow( { mode: 'open' } )

Update

It's true for most UX standard HTML elements: <input>, <video>, <textarea>, <select>, <audio>, etc.

Related questions

Is it possible to access Shadow DOM elements through the parent document?

This question is more aimed at user-created shadow DOM elements, but for accessibility I'll use the date input type for this question: Say for example I have a date input on my page. With a couple of bits edited out, …

Read More
Difference between constructor and connectedCallback in custom elements v1

I am new to web development and recently I have been seeing much debate and talks about Custom Elements v1. They allow you to define your own elements with their own custom behaviors and if Shadow DOM is used, with …

Read More
Polymer and WebComponentsReady event

According to the Polymer docs, the WebComponentsReady event is necessary because... The polyfills parse element definitions and handle their upgrade asynchronously. If you prematurely fetch the element from the DOM before it has a chance to upgrade, you’ll be …

Read More