Accesso alle proprietà DOM shadow (polimero) con javascript/jquery?

Question

Attualmente sto usando il core-scaffold del polimero & co. per creare un'intestazione/barra laterale con un'area di contenuto. Attualmente sto riscontrando il problema di non poter accedere a determinate proprietà dell'elemento di contenuto, ad esempio scrollTop. (poiché la proprietà scrollTop effettiva a cui ho bisogno di accedere è definita nel DOM ombra)

Ciò è in conflitto con un plug-in jquery lazyload che sto utilizzando. Il plugin sta controllando window.scrollTop ma cambiare il plugin per controllare lo scrollTop del mio contenuto (che scorre al posto della finestra) non avrà alcun effetto, dato che scrollTop è "nascosto" nel DOM ombra.

C'è un modo per accedere agli elementi DOM ombra? L'unica cosa che sono riuscito a trovare è accedere agli oggetti DOM shadow creati da te con createShadowroot (o come si chiamava), ma non riesco a trovare alcun riferimento su come accedere alle radici shadow già esistenti/create.

codice di esempio

<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

Ogni elemento che ha ShadowDOM ha anche una proprietà shadowRoot che illustra gli elementi di base (come document).

per esempio, some_element.shadowRoot.firstElementChild

È possibile anche utilizzare querySelector arrivare a una radice ombra, ad esempio:

document.querySelector('core-scaffold::shadow .someclass') troverebbe il primo elemento con someclass all'ombra radice del primo core-scaffold.