javascript - vaadin-combo-box/vaadin-combo-box-overlay 更改背景颜色/Polymer API

Question

我正在尝试覆盖 vaadin-combo-box-overlay 元素中的背景颜色。

这是我要覆盖的 css，更具体地说是背景属性，来源取自 ( https://github.com/vaadin/vaadin-combo-box/blob/master/vaadin-combo-box-overlay.html)

:host {
      position: absolute;
      @apply(--shadow-elevation-2dp);
      background: #fff;
      border-radius: 0 0 2px 2px;
      top: 0;
      left: 0;
  .......
    }

所以我试过类似的方法:

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

我也尝试过 :host 但我想应该使用 :root 因为我在对话框中使用了这个下拉列表，而覆盖组件没有似乎是对话的 child 。我尝试了与上面提到的不同的组合，但没有成功。

另外我想知道为什么背景没有像文本颜色那样被参数化:

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

为 --primary-text-color 指定不同的值我可以更改文本颜色..

谢谢。

Answer 1

你可以像那样用 javascript 来做。

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

或

ready: function() {
          var css = '#selector .item { background-color:red; }';
          var style = document.createElement('style');
              style.type = 'text/css';
              style.appendChild(document.createTextNode(css));
          Polymer.dom(this).node.$.tourSelector.$.overlay.$.selector.appendChild(style);
        }

想要一个可用的 CSS 选择器，但我无法在 CSS 中设置断点来找到正确的选择器!