使用javascript / jquery访问shadow DOM属性（聚合物）？ [英] Access shadow DOM properties (polymer) with javascript/jquery?

问题描述

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

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

有没有办法访问shadow DOM元素？我唯一能找到的就是访问你自己用createShadowroot（或者它所调用的任何东西）创建的阴影DOM对象，但我似乎找不到任何关于如何访问已经存在/创建的阴影根的参考。 / p>

以下示例代码

 < core-scaffold> 
< core-header-panel navigation flex mode =seamed> 
 
< core-toolbar> 
<！ - 固定工具栏 - > 
< / core-toolbar> 
 
< core-menu theme =core-light-theme> 
< core-item icon =settingslabel =item1>< / core-item> 
< core-item icon =settingslabel =item2>< / core-item> 
< / core-menu> 
 
< / core-header-panel> 
 
< div tool> 
<！ - 固定标题 - > 
< / div> 
 
< div id =content> 
 
<！ - 获取scrollTop的内容？ - > 
< / div> 
< / core-scaffold> 
  

解决方案

每个拥有ShadowDOM的元素也都有 shadowRoot 描述基础元素的属性（作为文档）。

例如， some_element.shadowRoot.firstElementChild

您还可以使用 querySelector 进入阴影根，例如：

document.querySelector（'core-scaffold :: shadow .someclass' ）会在第一个 core-scaffold someclass c>。

I'm currently using polymer's core-scaffold & co. to create an header/sidebar with a content area. I'm currently having the problem that I cannot access certain properties of the content element, such as scrollTop. (since the actual scrollTop property that I need to access is defined in the shadow DOM.)

This conflicts with a lazyload jquery plugin I'm using. The plugin is checking the window.scrollTop but changing the plugin to check the scrollTop of my content (that scrolls instead of the window) won't have any affect, since the scrollTop is "hidden" in the shadow DOM.

Is there a way to access the shadow DOM elements? The only thing I've been able to find is accessing shadow DOM objects you created yourself with createShadowroot (or whatever it was called), but I can't seem to find any reference on how to access already existing/created shadow roots.

Sample code below

<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>

解决方案

Every element that has ShadowDOM also has a shadowRoot property which describes the underlying elements (as a document).

e.g, some_element.shadowRoot.firstElementChild

You can also use querySelector to reach in to a shadow root, for example:

document.querySelector('core-scaffold::shadow .someclass') would find the first element with someclass in the shadow-root of the first core-scaffold.

这篇关于使用javascript / jquery访问shadow DOM属性（聚合物）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！