How to query elements within shadow DOM from outside in Dart?

Question

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?

score 39 · Answer 1 · answered Jun 14 '16 at 12:05

39

Pseudo selector ::shadow and combinator /deep/ doesn't work on firefox.

Use .shadowRoot

var shadowroot = app-element.shadowRoot;
shadowroot.querySelector('h2');

answered Jun 14 '16 at 12:05

Aniruddha

596
1
5
12

1

And were removed in Chrome 63. – Steven Vachon May 22 '19 at 17:29
I want to add that this works for accessing child elements within your StencilJS components too! So in my case, it looks like this: `const myCarousel = this.host.shadowRoot.querySelector(`#myCarousel`);` where host is `@Element() host: HTMLElement;`. Thanks! – Omar Mar 29 '21 at 20:59

score 14 · Accepted Answer · edited May 23 '17 at 11:55

Update2 (from comments)

If you use a custom main, ensure that Polymer is properly initialized before you try to interact with your Polymer elements (see how to implement a main function in polymer apps for more details).

I usually suggest to avoid a custom main and create an app-element (or whatever name you prefer) and put your initialization code into attached (ensure to call super.attached();) or in ready() (doesn't need the super call).

Original

It seems in this case it's not in the shadow DOM but a child.

This should work:

querySelector('h2');

It's only in the shadow DOM when it is within your elements <template>...</template> not when you wrap it in the tag of your custom element.

<polymer-element name="some-element">
  <template>
    <!-- this becomes the shadow DOM -->
    <content>
     <!-- 
       what gets captureD by the content element becomes a child or some-element
       -->
     </content>
  </template>
</polymer-element>

<body>
  <some-element>
    <!-- these elements here are captured by the 
         content tag and become children of some-element -->
    <div>some text</div>
  </some-element>
</body>

Update

If you want to search

inside the shadow DOM of the current element

shadowRoot.querySelect('h2');

inside the shadow DOM of an element inside the shadow DOM

shadowRoot.querySelector('* /deep/ h2');
shadowRoot.querySelector('ui-button::shadow h2');

from outside the current element

import 'dart:html' as dom;
...
dom.querySelector('* /deep/ h2');
// or (only in the shadow DOM of <app-element>)
dom.querySelector('app-element::shadow h2');
dom.querySelector('app-element::shadow ui-button::shadow h2');
// or (arbitrary depth)
dom.querySelector('app-element /deep/ h2');

Where is your `querySelector...` code? In main, in the `AppElement` class, where in the class? — Günter Zöchbauer, Apr 14 '15 at 18:30
Using CSS everything works as expected: pseudo selector like `::shadow` and combinator `/deep/` affect the elements. However it doesn't make sense when I use Dart's `querySelect(All)` functions. Only h2 inside `` tag is reachable. What's wrong? — Timur Fayzrakhmanov, Apr 14 '15 at 18:35

score 0 · Answer 3 · edited Mar 27 '20 at 21:44

Vanilla only helper function using reduce method

function queryShadow([firstShadowSelector, ...restOfTheShadowSelectors], itemSelector) {
    const reduceFunction = (currShadow, nextShadowSelector) => currShadow.shadowRoot.querySelector(nextShadowSelector);    
    const firstShadow = document.querySelector(firstShadowSelector);
    const lastShadow = restOfTheShadowSelectors.reduce(reduceFunction,firstShadow);
    return lastShadow && lastShadow.querySelector(itemSelector);
}

and use it like this

const shadowSelectorsArr = ['vt-virustotal-app','file-view', '#report', 'vt-ui-file-card', 'vt-ui-generic-card'];
const foundDomElem = queryShadow(shadowSelectorsArr, '.file-id');
console.log(foundDomElem && foundDomElem.innerText);

score 0 · Answer 4 · answered Apr 07 '22 at 19:14

For people wanting an easy to use solution

function $$$(selector, rootNode=document.body) {
    const arr = []
    
    const traverser = node => {
        // 1. decline all nodes that are not elements
        if(node.nodeType !== Node.ELEMENT_NODE) {
            return
        }
        
        // 2. add the node to the array, if it matches the selector
        if(node.matches(selector)) {
            arr.push(node)
        }
        
        // 3. loop through the children
        const children = node.children
        if (children.length) {
            for(const child of children) {
                traverser(child)
            }
        }
        
        // 4. check for shadow DOM, and loop through it's children
        const shadowRoot = node.shadowRoot
        if (shadowRoot) {
            const shadowChildren = shadowRoot.children
            for(const shadowChild of shadowChildren) {
                traverser(shadowChild)
            }
        }
    }
    
    traverser(rootNode)
    
    return arr
}

Use it like this:

var nodes = $$$('#some .selector')

// use from a custom rootNode
var buttonsWithinFirstNode = $$$('button', nodes[0])

It will traverse all the elements within the rootNode, so it won't be fast but it is easy to use.

How to query elements within shadow DOM from outside in Dart?

4 Answers4

Linked