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 因为我在对话框中使用此下拉列表，而覆盖组件则没有似乎是对话框的子项。我尝试了与上面提到的不同的组合，但没有成功。

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

 #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 中设置断点来找出正确的选择器!