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

【问题标题】：Access shadow DOM properties (polymer) with javascript/jquery?使用 javascript/jquery 访问 shadow DOM 属性（聚合物）？
【发布时间】：2014-09-06 00:37:22
【问题描述】：

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

这与我正在使用的延迟加载 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>

【问题讨论】：

标签： javascript jquery polymer shadow-dom

【解决方案1】：

每个拥有 ShadowDOM 的元素还有一个 shadowRoot 属性，用于描述底层元素（作为 document）。

例如，some_element.shadowRoot.firstElementChild

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

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

【讨论】：