Access shadow DOM properties (polymer) with javascript/jquery?

Question

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>

Answer 1

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.