如何用js查询Polymer中的shadowdom元素？

Question

我知道如何在<style>标签中查询阴影dom元素，但我想使用数据绑定动态改变样式，数据绑定不能应用于<style> ] 在 Polymer 中，所以我应该在 js.For 示例中实现它，我使用 core-scroll-header-panel 组件，我可以使用以下方式查询其背景样式：

<style>
    core-scroll-header-panel::shadow #headerBg {
          background: #5cebca;
        }

</style>

但是如何在js中实现呢？

Answer 1

我试过了:

document.querySelector('core-scroll-header-panel::shadow #headerBg');

还有其他解决方案吗？

Answer 2

这是 select 您的元素的方法：

var shadow = document.querySelector('core-scroll-header-panel').shadowRoot;
var header = shadow.querySelector('#headerBg');

Note that it will return one single element. If you need to loop over multiple element you may use querySelectorAll as you probably know.

然后您可以照常更改背景颜色：

header.style.backgroundColor = "#5cebca";

但是，不建议直接在 JavaScript 中更改颜色，您应该使用 CSS。

header.className = "my_css_class";

请注意，它将 return 一个元素。如果您需要遍历多个元素，您可能知道可以使用 querySelectorAll。

How to use js to query shadow dom element in Polymer?