web-dev-qa-db-fra.com

Comment obtenir un élément dans la racine fantôme de l'agent utilisateur avec JavaScript?

J'ai besoin d'obtenir des éléments de Shadow DOM et de le changer. Comment je peux le faire?

<div>
     <input type="range" min="100 $" max="3000 $">
</div>
javascripthtmlweb-componentshadow-dom
11
Yaroslav Polubedov

Voici un exemple:

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);

Démo:

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>

J'espère que cela t'aidera.

10
Ismail RBOUH

Vous ne pouvez pas accéder à un DOM fantôme créé par le navigateur pour afficher un contrôle, appelé #shadow-root (user-agent) dans les outils de développement. <input> en est un exemple.

Vous ne pouvez accéder qu'à ouvrir DOM Shadow personnalisé (ceux que vous créez vous-même), avec le { mode: 'open' } option.

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

Mise à jour

C'est vrai pour la plupart des éléments HTML standard UX: <input>, <video>, <textarea>, <select>, <audio>, etc.

18
Supersharp