Question

我目前正在使用聚合物的核心支架＆amp;合。创建带有内容区域的标题/侧边栏。我目前遇到的问题是我无法访问内容元素的某些属性，例如scrollTop。（因为我需要访问的实际scrollTop属性是在shadow DOM中定义的。）

这与我使用的lazyload jquery插件冲突。该插件正在检查window.scrollTop，但更改插件以检查我的内容的scrollTop（滚动而不是窗口）不会有任何影响，因为scrollTop是＆＃34;隐藏＆＃34;在影子DOM。

有没有办法访问shadow 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')会在第一个someclass的影子根中找到core-scaffold的第一个元素。

使用javascript / jquery访问shadow DOM属性（聚合物）？

1 个答案: