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

8

Ich verwende derzeit das Core-Scaffold von Polymer & amp; 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 Lazyload-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 statt 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? Die einzige Sache, die 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 / p>

Beispielcode unten

%Vor%     
Andreas Galster 15.07.2014, 17:35
quelle

1 Antwort

11

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

z. B. some_element.shadowRoot.firstElementChild

Sie können auch querySelector verwenden, um auf eine Schattenwurzel zuzugreifen, zum Beispiel:

document.querySelector('core-scaffold::shadow .someclass') würde das erste Element mit someclass in der Schattenwurzel des ersten core-scaffold finden.

    
Scott Miles 15.07.2014, 17:42
quelle