vaadin-combo-box/vaadin-combo-box-overlayの背景色を変更する/ポリマーAPI

Question

vaadin-combo-box-overlay要素にある背景色を無効にしようとしています。私はまた、

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

：ここ

は、私が上書きしたいCSS、より具体的にbackgroundプロパティ、（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; 
    ....... 
    } 

は、だから私のようなものを試してみたです私は: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

ありがとうございました！

私はこのようにしようとは考えていませんでした。

ここで私がやったことは、ハッキーな解決策です。

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

コンボが展開されているので、値変更リスナーにコンボが展開されるだろうとき、私は唯一のオーバーレイへのアクセス権を持っています。

Answer 2

あなたはそのようなjavascriptで行うことができます。

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

OR

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にブレークポイントを設定カントでしょう！