Javascript vaadin组合框/vaadin组合框覆盖更改背景色/聚合物API

我试图覆盖

vaadin组合框覆盖

元素中的背景色

下面是我想要覆盖的css，更具体地说是后台属性，源代码取自（）

所以我试过这样的方法：

 :root ::content vaadin-combo-box-overlay.vaadin-combo-box-overlay {
                            background: red !important;
                            background-color: red !important;
 }

我也尝试过使用

：host

，但我想应该使用

：root

，因为我在对话框中使用此下拉列表，而覆盖组件似乎不是对话框的子组件。我试过上面提到的不同组合，但没有成功

我还想知道为什么背景没有参数化，因为文本颜色是：

 #selector .item {
      cursor: pointer;
      padding: 13px 16px;
      color: var(--primary-text-color);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

为

--主文本颜色指定不同的值

我可以更改文本颜色

---

谢谢。

你可以用javascript这样做

    ready: function() {
      var domElem=Polymer.dom(this).node.$.YOUR-VAADIN-ELEMENT-ID.$.overlay.style.backgroundColor="red";
    }

或

希望有一个工作的CSS选择器，但我不能在CSS设置断点，以找出正确的选择器

谢谢你，帕特里克

我没想过要这样做

这就是我所做的，一个骇人的解决方案

ready : function(){
                var combo = this.$$('#comboid');
                combo.addEventListener('vaadin-dropdown-opened'', function() {
                    var overlay = Polymer.dom(this.root).querySelector('#overlay');
                    overlay.style.backgroundColor = primaryBackground;
                });
            },

---

我只有在组合展开时才能访问覆盖，因此在值更改侦听器中，组合将展开。

您应该使用

dom模块

来设置通风部件的样式，请参见下面的示例：

<dom-module id="combo-box-overlay-styles" theme-for="vaadin-combo-box-overlay">
    <template>
        <style>
            [part~="content"] {
                background-color: red;
            }
        </style>
    </template>
</dom-module>

[部分~=“内容”]{
背景色：红色；
}

---

请在此处阅读更多内容

注意，文档非常糟糕，因此您必须将其中所有地方的答案以及随机堆栈溢出答案拼凑在一起。@electrovir这是不幸的事实

ready : function(){
                var combo = this.$$('#comboid');
                combo.addEventListener('vaadin-dropdown-opened'', function() {
                    var overlay = Polymer.dom(this.root).querySelector('#overlay');
                    overlay.style.backgroundColor = primaryBackground;
                });
            },

<dom-module id="combo-box-overlay-styles" theme-for="vaadin-combo-box-overlay">
    <template>
        <style>
            [part~="content"] {
                background-color: red;
            }
        </style>
    </template>
</dom-module>