Question

我知道如何查询<style>标签中的shadow dom元素，但是我想使用data-bind动态更改样式，data-bind不能应用于Polymer中的<style>，所以我应该在js中发生。例如，我使用core-scroll-header-panel组件，我可以使用以下方式查询其背景样式：

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

</style>

但如何在js中实现呢？

Answer 1

以下是选择元素的方法：

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

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

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

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

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

header.className = "my_css_class";

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

Answer 2

我试过了：

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

还有其他解决方案吗？

如何使用js查询Polymer中的shadow dom元素？

2 个答案: