배경색 변경/배경색 변경/폴리머 API

Question

vaadin-combo-box-overlay 요소에있는 배경색을 덮어 쓰려고합니다. 여기

은 ( https://github.com/vaadin/vaadin-combo-box/blob/master/vaadin-combo-box-overlay.html)

에서 촬영 나는 무시하려면 CSS, 더 구체적 배경 속성, 소스

: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; 
} 

I 've는 :host으로 시도했지만,이 드롭 다운을 대화 상자에 사용하고 오버레이 구성 요소가 대화 상자의 하위로 보이지 않기 때문에 :root을 사용해야합니다. 위에서 언급 한 것과 같이 다른 조합을 시도해 보았습니다. 배경은 텍스트 색상과 같은 파라미터되지 않는 이유가 궁금하네요 또한

이다 : 나는 텍스트 색상을 변경할 수있어 --primary-text-color에 대해 다른 값을 지정

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

..

감사합니다 .

Answer 1

감사합니다. Patrick !!

나는이 방법으로 시도하려고하지 않았습니다.

내가 한 일은 해킹 된 해결책이다.

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

그런 자바 스크립트로 할 수 있습니다.

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에서 설정 한 중단 점을 기운 다!