使用javascript / jquery访问shadow DOM属性(聚合物)?
我目前正在使用聚合物的core-scaffold&co。 创建带有内容区域的标题/侧边栏。 我目前遇到的问题是我无法访问内容元素的某些属性,例如scrollTop。 (因为我需要访问的实际scrollTop属性是在shadow DOM中定义的。)
这与我正在使用的lazyload jquery插件冲突。 该插件正在检查window.scrollTop,但更改插件以检查我的内容的scrollTop(滚动而不是窗口)将不会产生任何影响,因为scrollTop在shadow DOM中“隐藏”。
有没有办法访问阴影DOM元素? 我唯一能找到的就是访问你自己用createShadowroot创建的阴影DOM对象(或任何它被称为),但我似乎找不到任何关于如何访问已存在/创建的阴影根的参考。
示例代码如下
具有ShadowDOM的每个元素也都有一个shadowRoot
属性,该属性描述了底层元素(作为document
)。
例如, some_element.shadowRoot.firstElementChild
您还可以使用querySelector
访问阴影根,例如:
document.querySelector('core-scaffold::shadow .someclass')
会在第一个core-scaffold
的shadow-root中找到第一个带有someclass
元素。