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

我知道如何在标记中查询shadow dom元素，但我想使用data bind动态更改样式，data bind不能在Polymer中应用，所以我应该在js中实现。例如，我使用core scroll header panel组件，我可以使用以下方法查询其背景样式：

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

</style>

但是如何在js中实现它呢？

我已经尝试过了：

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

---

还有其他解决方案吗？

以下是选择元素的方法：

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'。是的，对，这是另一种选择，你叫醒了我，谢谢，真为我感到羞耻~