Menu
How can I select nodes within shadow DOM? Consider the following example:
structure of "unshadowed" DOM
<app-element> #shadow-root <h2></h2> <content> #outside shadow <h2></h2> </content> <ui-button> #shadow-root <h2></h2> </ui-button> </app-element> index.html
<body> <app-element> <!-- OK: querySelect('app-element').querySelect('h2') --> <!-- OK: querySelect('app-element h2') --> <!-- There is no problem to select it --> <h2>app-element > content > h2</h2> </app-element> </body> templates.html
<polymer-element name="ui-button" noscript> <template> <!-- FAIL: querySelect('app-element::shadow ui-button::shadow h2') --> <h2>app-element > ui-button > h2</h2> </template> </polymer-element> <polymer-element name="app-element" noscript> <template> <!-- FAIL: querySelect('app-element::shadow').querySelect('h2') --> <!-- FAIL: querySelect('app-element::shadow h2') --> <!-- FAIL: querySelect('app-element').shadowRoot.querySelect('h2') --> <h2>app-element > h2</h2> <content></content> <ui-button></ui-button> </template> </polymer-element> In comments like "OK: querySelect()" I show selectors I've tried to run from outside any shadowed DOM.
I've already read the following article: http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/?redirect_from_locale=ru and based on the fact that it was said in the article, query like: document.querySelector('app-element::shadow h2'); in JS should work as expected. However in Dart it doesn't work.
What do I wrong?
513
You won't be able to access the shadow DOM from the outside, If you attach a shadow root to a custom element with mode: closed set. We can only access the shadow DOM by the reference returned by attachShadow and it is probably hidden inside a class. Browser-native shadow trees are closed. There's no way to access them.
Any code is able to access the shadow tree of elem . "closed" – elem. shadowRoot is always null . We can only access the shadow DOM by the reference returned by attachShadow (and probably hidden inside a class).
The :host selector allows to select the shadow host (the element containing the shadow tree).
Create a new project. Go to File > New > Project. Here, we name the project Shadow DOM Testing. In the demo website, navigate to the search bar, right-click > Inspect.
Pseudo selector ::shadow and combinator /deep/ doesn't work on firefox.
Use .shadowRoot
var shadowroot = app-element.shadowRoot; shadowroot.querySelector('h2'); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
