Truy cập thuộc tính DOM bóng (polymer) bằng javascript/jquery?

Question

Tôi hiện đang sử dụng lõi giàn giáo của polymer & co. để tạo tiêu đề/thanh bên với khu vực nội dung. Tôi hiện đang gặp sự cố mà tôi không thể truy cập các thuộc tính nhất định của phần tử nội dung, chẳng hạn như scrollTop. (vì thuộc tính scrollTop thực tế mà tôi cần truy cập được xác định trong DOM bóng tối.)

Điều này xung đột với một plugin jquery lười biếng tôi đang sử dụng. Plugin đang kiểm tra window.scrollTop nhưng thay đổi plugin để kiểm tra scrollTop của nội dung của tôi (cuộn thay vì cửa sổ) sẽ không có bất kỳ ảnh hưởng nào, vì scrollTop bị "ẩn" trong DOM bóng.

Có cách nào để truy cập vào phần tử DOM bóng không? Điều duy nhất tôi có thể tìm thấy là truy cập vào các đối tượng shadow DOM mà bạn đã tạo cho mình với createShadowroot (hoặc bất cứ cái gì nó được gọi), nhưng dường như tôi không tìm thấy bất kỳ tham chiếu nào về cách truy cập các gốc bóng đã tồn tại/đã tạo.

Mẫu mã dưới đây

<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

Mỗi phần tử có ShadowDOM cũng có một tài sản trong đó mô tả các yếu tố cơ bản (như là một document) shadowRoot.

ví dụ, some_element.shadowRoot.firstElementChild

Bạn cũng có thể sử dụng để đạt được querySelector vào một gốc bóng, ví dụ:

document.querySelector('core-scaffold::shadow .someclass') sẽ tìm thấy những yếu tố đầu tiên với someclass trong bóng tối-thư mục gốc của core-scaffold đầu tiên.