Access shadow DOM properties (polymer) with javascriptjquery? - Stack Overflow

admin管理员组

文章数量:1278853

I'm currently using polymer's core-scaffold & co. to create an header/sidebar with a content area. I'm currently having the problem that I cannot access certain properties of the content element, such as scrollTop. (since the actual scrollTop property that I need to access is defined in the shadow DOM.)

This conflicts with a lazyload jquery plugin I'm using. The plugin is checking the window.scrollTop but changing the plugin to check the scrollTop of my content (that scrolls instead of the window) won't have any affect, since the scrollTop is "hidden" in the shadow DOM.

Is there a way to access the shadow DOM elements? The only thing I've been able to find is accessing shadow DOM objects you created yourself with createShadowroot (or whatever it was called), but I can't seem to find any reference on how to access already existing/created shadow roots.

Sample code below

<core-scaffold>
  <core-header-panel navigation flex mode="seamed">

    <core-toolbar>
    <!--fixed toolbar-->
    </core-toolbar>

    <core-menu theme="core-light-theme">
      <core-item icon="settings" label="item1"></core-item>
      <core-item icon="settings" label="item2"></core-item>
    </core-menu>

  </core-header-panel>

  <div tool>
  <!--fixed header-->
  </div>

  <div id="content">

  <!-- get scrollTop of content? -->
  </div>
</core-scaffold>

I'm currently using polymer's core-scaffold & co. to create an header/sidebar with a content area. I'm currently having the problem that I cannot access certain properties of the content element, such as scrollTop. (since the actual scrollTop property that I need to access is defined in the shadow DOM.)

This conflicts with a lazyload jquery plugin I'm using. The plugin is checking the window.scrollTop but changing the plugin to check the scrollTop of my content (that scrolls instead of the window) won't have any affect, since the scrollTop is "hidden" in the shadow DOM.

Is there a way to access the shadow DOM elements? The only thing I've been able to find is accessing shadow DOM objects you created yourself with createShadowroot (or whatever it was called), but I can't seem to find any reference on how to access already existing/created shadow roots.

Sample code below

<core-scaffold>
  <core-header-panel navigation flex mode="seamed">

    <core-toolbar>
    <!--fixed toolbar-->
    </core-toolbar>

    <core-menu theme="core-light-theme">
      <core-item icon="settings" label="item1"></core-item>
      <core-item icon="settings" label="item2"></core-item>
    </core-menu>

  </core-header-panel>

  <div tool>
  <!--fixed header-->
  </div>

  <div id="content">

  <!-- get scrollTop of content? -->
  </div>
</core-scaffold>

• javascript
• jquery
• polymer
• shadow-dom

Share Improve this question Follow asked Jul 15, 2014 at 17:35 Andreas GalsterAndreas Galster 41566 silver badges1818 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

Every element that has ShadowDOM also has a shadowRoot property which describes the underlying elements (as a document).

e.g, some_element.shadowRoot.firstElementChild

You can also use querySelector to reach in to a shadow root, for example:

document.querySelector('core-scaffold::shadow .someclass') would find the first element with someclass in the shadow-root of the first core-scaffold.

本文标签： Access shadow DOM properties (polymer) with javascriptjqueryStack Overflow