¿Cómo obtener el elemento en la raíz de sombra del agente de usuario con JavaScript?

html web-component

Question

Necesito obtener elementos de Shadow DOM y cambiarlo. ¿Cómo puedo hacerlo?

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

Answer 1

Aquí hay un ejemplo:

var container = document.querySelector(''#example'');
//Create shadow root !
var root = container.createShadowRoot();
root.innerHTML = ''<div>Root<div class="test">Element in shadow</div></div>'';

//Access the element inside the shadow !
//"container.shadowRoot" represents the youngest shadow root that is hosted on the element !
console.log(container.shadowRoot.querySelector(".test").innerHTML);

Manifestación:

var container = document.querySelector(''#example'');
//Create shadow root !
var root = container.createShadowRoot();
root.innerHTML = ''<div>Root<div class="test">Element in shadow</div></div>'';

//Access the element inside the shadow !
console.log(container.shadowRoot.querySelector(".test").innerHTML);

<div id="example">Element</div>

Espero que esto ayude.

Answer 2

No puede acceder a un Shadow DOM creado por el navegador para mostrar un control, que se llama #shadow-root (user-agent) en Dev Tools. <input> es un ejemplo.

Solo puedes acceder a Shadow DOM personalizado abierto (los que creas tú mismo), con la opción { mode: ''open'' } .

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

Actualizar

Es cierto para la mayoría de los elementos HTML estándar UX: <input> , <video> , <textarea> , <select> , <audio> , etc.