javascript/jquery로 그림자 DOM 속성 (폴리머)에 액세스 하시겠습니까?

Question

저는 현재 폴리머의 핵 발판 &을 사용하고 있습니다. 콘텐츠 영역이있는 머리글/세로 막대를 만듭니다. 현재 scrollTop과 같은 content 요소의 특정 속성에 액세스 할 수 없다는 문제가 있습니다. (액세스해야하는 실제 scrollTop 속성은 그림자 DOM에 정의되어 있습니다.)

이것은 사용중인 lazyload jquery 플러그인과 충돌합니다. 플러그인은 window.scrollTop을 검사하지만 scrollTop은 그림자 DOM에 "숨겨져"있기 때문에 내 콘텐츠 (창의 대신 스크롤)의 scrollTop을 확인하도록 플러그인을 변경하면 아무런 영향이 없습니다.

그림자 DOM 요소에 액세스 할 수있는 방법이 있습니까? 내가 찾을 수 있었던 유일한 것은 createShadowroot (또는 호출 된 모든 것)를 사용하여 직접 만든 그림자 DOM 객체에 액세스하는 것이지만 이미 기존/생성 된 섀도우 루트에 액세스하는 방법에 대한 참조를 찾을 수없는 것 같습니다.

<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

ShadowDOM도 (a document)를 기본 구성 요소를 설명하는 shadowRoot 속성을 가지고있는 모든 요소 아래

샘플 번호.

예컨대, some_element.shadowRoot.firstElementChild

또한 예를 들어, 그림자 루트에 도달 querySelector를 사용할 수 있습니다

document.querySelector('core-scaffold::shadow .someclass') 처음 core-scaffold의 그림자 루트에 someclass으로 첫 번째 요소를 찾아 낼 것입니다.