How to get element in shadow root with JavaScript?

问题:

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

回答1:

Here is an example:

var container = document.querySelector('#example'); //Create shadow root ! var root = container.createShadowRoot(); root.innerHTML = '
Root
Element in shadow
';  //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); 

Demo:

var container = document.querySelector('#example'); //Create shadow root ! var root = container.createShadowRoot(); root.innerHTML = '
Root
Element in shadow
';  //Access the element inside the shadow ! console.log(container.shadowRoot.querySelector(".test").innerHTML);

Element

I hope this will help you.

回答2:

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. 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' } ) 

文章来源: How to get element in shadow root with JavaScript?