如何使用JS在Polymer中查询Shadow DOM元素？

Question

我知道如何在<style>标签中查询影子dom元素，但我想使用data-bind动态更改样式。在Polymer中，无法在<style>中应用data-bind，因此我应该在js中实现它。例如，我使用core-scroll-header-panel组件，可以使用以下代码查询其背景样式：

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

</style>

但如何在JS中实现呢？

- Jim

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，您可能已经知道这一点。

- vinyll

---

是的，但数据绑定不能应用于<style>标签中，我希望根据内容更改背景，所以我不得不这样做。但还是谢谢。 - Jim

你能不能改成切换类名来改变颜色呢？同时，你还可以利用过渡效果和其他样式属性的改变哦 ;) header.className = 'mystyle'。 - vinyll

没错，那是另一种选择，你把我吵醒了，谢谢，真丢脸~ - Jim

Answer 2

我已经试过了：

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

还有其他的解决方案吗？

- Jim