javascript - 使用 javascript/jquery 访问影子 DOM 属性( polymer )？

Question

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

这与我正在使用的 lazyload 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>

Answer 1

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

例如，some_element.shadowRoot.firstElementChild

您还可以使用 querySelector 进入影子根，例如:

document.querySelector('core-scaffold::shadow .someclass') 会在第一个 的阴影根中找到第一个带有 someclass 的元素核心支架.