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

【问题标题】：How to use js to query shadow dom element in Polymer?Polymer中如何使用js查询shadow dom元素？
【发布时间】：2015-04-18 08:45:29
【问题描述】：

我知道如何在<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中实现呢？

【问题讨论】：

标签： javascript html css polymer shadow-dom

【解决方案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。

【讨论】：

是的，但是
你不能改变切换类来改变颜色吗？您还可以同时从过渡和任何其他样式属性更改中受益；）header.className = 'mystyle'.
是的，对，那是另一种选择，你把我吵醒了，谢谢，真丢人~

【解决方案2】：

我试过了：

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

还有其他解决方案吗？

【讨论】：