Zugriff Schatten DOM-Eigenschaften (Polymer) mit Javascript/jquery?

Question

Ich verwende derzeit Polymer Core-Gerüst & co. um eine Kopfzeile/Seitenleiste mit einem Inhaltsbereich zu erstellen. Ich habe derzeit das Problem, dass ich nicht auf bestimmte Eigenschaften des Inhaltselements wie scrollTop zugreifen kann. (Da die aktuelle scrollTop-Eigenschaft, auf die ich zugreifen muss, im Schatten-DOM definiert ist.)

Dies steht im Konflikt mit einem Jquery-Plugin, das ich verwende. Das Plugin überprüft das window.scrollTop, aber das Ändern des Plugins, um den scrollTop meines Inhalts zu überprüfen (der anstelle des Fensters scrollt) hat keine Auswirkungen, da der scrollTop im Schatten-DOM "versteckt" ist.

Gibt es eine Möglichkeit, auf die Schatten-DOM-Elemente zuzugreifen? Das Einzige, was ich finden konnte, ist den Zugriff auf Schatten-DOM-Objekte, die Sie selbst mit createShadowroot (oder wie auch immer es genannt wurde) erstellt habe, aber ich finde keinen Hinweis darauf, wie ich auf bereits existierende/erstellte Schattenwurzeln zugreifen kann.

Beispielcode unten

<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

Jedes Element hat, das auch eine ShadowDOM shadowRoot Eigenschaft hat, die die darunter liegenden Elemente (als document) beschreibt.

z.B. some_element.shadowRoot.firstElementChild

Sie können auch querySelector verwenden, um einen Schatten Wurzel zu erreichen, zum Beispiel:

document.querySelector('core-scaffold::shadow .someclass') das erste Element mit someclass im Schatten-Wurzel des ersten core-scaffold finden würde.