使用javascript / jquery訪問shadow DOM屬性（聚合物）？

Question

我目前正在使用聚合物的core-scaffold＆co。 創建帶有內容區域的標題/側邊欄。 我目前遇到的問題是我無法訪問內容元素的某些屬性，例如scrollTop。 （因為我需要訪問的實際scrollTop屬性是在shadow DOM中定義的。）

這與我正在使用的lazyload jquery插件沖突。 該插件正在檢查window.scrollTop但是更改插件以檢查我的內容的scrollTop（滾動而不是窗口）將不會產生任何影響，因為scrollTop在shadow DOM中“隱藏”。

有沒有辦法訪問陰影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的元素也都有一個shadowRoot屬性，該屬性描述了底層元素（作為document ）。

例如， some_element.shadowRoot.firstElementChild

您還可以使用querySelector進入陰影根，例如：

document.querySelector('core-scaffold::shadow .someclass')會在第一個core-scaffold的shadow-root中找到第一個帶有someclass元素。