发表新帖
发表新帖

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

前端 未结
关注
3 1605
清歌不尽
清歌不尽 2020-12-10 11:39

How can I select nodes within shadow DOM? Consider the following example:

structure of \"unshadowed\" DOM


  #sha
相关标签:
3条回答
  • 小鲜肉
    2020-12-10 11:52

    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');
    0 讨论(0)
  • 一向
    2020-12-10 11:57

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

    Use .shadowRoot

    var shadowroot = app-element.shadowRoot;
shadowroot.querySelector('h2');
    0 讨论(0)
  • 臣服心动
    2020-12-10 12:06

    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);
    0 讨论(0)
 看不清?
提交回复
热议问题