8

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

这与我正在使用的延迟加载 jquery 插件冲突。该插件正在检查 window.scrollTop 但更改插件以检查我的内容（滚动而不是窗口）的 scrollTop 不会有任何影响，因为 scrollTop 在影子 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>
4

1 回答 1

11

每个拥有 ShadowDOM 的元素也有一个shadowRoot描述底层元素的属性（作为 a document）。

例如，some_element.shadowRoot.firstElementChild

您还可以使用它querySelector来访问影子根，例如：

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

于 2014-07-15T17:42:36.290 回答