使用javascript/jquery访问阴影DOM属性(聚合物)

Access shadow DOM properties (polymer) with javascript/jquery?

本文关键字：属性 聚合物 DOM 阴影 javascript jquery 访问 使用      更新时间：2023-09-26

我目前正在使用聚合物的核心支架&创建带有内容区域的页眉/侧边栏。我目前遇到的问题是无法访问content元素的某些属性，例如scrollTop。(因为我需要访问的实际scrollTop属性是在影子DOM中定义的。)

这与我正在使用的懒惰加载jquery插件冲突。插件正在检查窗口。scrollTop但是改变插件来检查我的内容的scrollTop(滚动而不是窗口)不会有任何影响，因为scrollTop是"隐藏"在阴影DOM。

是否有一种方法来访问影子DOM元素?我唯一能找到的是访问影子DOM对象你自己创建createShadowroot(或无论它被称为什么)，但我似乎找不到任何关于如何访问已经存在/创建的影子根的参考。

示例代码
<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>

每个有ShadowDOM的元素也有一个描述底层元素的shadowRoot属性(作为document)。

e。g, some_element.shadowRoot.firstElementChild

您也可以使用querySelector访问影子根，例如:

document.querySelector('core-scaffold::shadow .someclass')会在第一个core-scaffold的影根中找到第一个包含someclass的元素。

相关文章：