vaadin-combo-box / vaadin-combo-box-overlay change background color / Polymer API

Question

I'm trying to override the background color present in vaadin-combo-box-overlay element.

Here is the css that I want to override, more specifically the background property, source taken from (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;
  .......
    }

So I've tried something like:

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

Also I've tried with :host but I guess it should be used :root because I use this dropdown in a dialog, and the overlay component doesn't seem to be a child of the dialog. I've tried different combinatons as the one mentioned above without any success.

Also I'm wondering why the background is not parameterized as the text color is:

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

Specifying a different value for --primary-text-color I'm able to change the text color..

Thanks.

Answer 1

Thanks Patrick !!

I wasn't thinking about to do try it this way.

Here's what I did, a hacky solution though.

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

I only have access to the overlay when the combo is expanded, so in the value change listener the combo would be expanded.