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

我目前使用聚合物的核心脚手架& co。创建一个带有内容区域的标题/边栏。我目前遇到的问题是我无法访问内容元素的某些属性，例如scrollTop。（因为我需要访问的实际scrollTop属性是在影子DOM中定义的。）使用javascript/jquery访问影子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>

来源

2014-07-15 Andreas Galster

具有ShadowDOM还具有shadowRoot属性描述该底层元素（作为document）每个元件。

e.g，some_element.shadowRoot.firstElementChild

您还可以使用querySelector在达到一个影子根，例如：

document.querySelector('core-scaffold::shadow .someclass')会发现的第一个元素在第一core-scaffold的影子根someclass。

来源

2014-07-15 17:42:36

这工作完美，非常感谢:)！ –

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

回答

相关问题