호스트 컨텍스트와 사용자 상태

Question

호스트 컨텍스트와 요소 사용자 상태를 결합 할 수 있는지 알고 싶습니다. 예를 들어 는 :

<polymer-element name="my-element"> 
    <template> 
     <style> 
      :host(:hover) { 
       background-color: blue; // For all other situations 
      } 

      :host-context(my-app) { 
       // TODO: Apply darkblue ONLY when my-element is hosted within my-app 
       // and the user state of my-element is hover. 

       background-color: darkblue; 
      } 
     </style> 
     Hello 
    </template> 
    <script src="my-element.js"></script>  
</polymer-element> 

나는 호스트 컨텍스트 조합을 많이 시도 : 마우스를하지만 그들 중 누구도 제대로 작동하지 않습니다.

미리 도움 주셔서 감사합니다.

Answer 1

사양은 특히이 언급하지 않는하지만 모두 결합 할 수 있습니다 : 정확한 결과를 얻기 위해 호스트 선택 : 호스트 컨텍스트와.

<polymer-element name="my-element"> 
    <template> 
     <style> 
      :host(:hover) { 
       background-color: blue; // For all other situations 
      } 

      :host-context(my-app):host(:hover) { 
       background-color: darkblue; 
      } 
     </style> 
     Hello 
    </template> 
    <script src="my-element.js"></script>  
</polymer-element> 

Answer 2

the spec 통해 읽는 것은 가능하지 않을 수 있습니다. 그러나 다음을 수행 할 수 있습니다.

<polymer-element name="my-element"> 
    <template> 
     <style> 
      :host(:hover) { 
       background-color: blue; // For all other situations 
      } 

      :host-context(my-app)::shadow #wrapper:hover { 
       background-color: darkblue; 
      } 
     </style> 
     <div id="wrapper">Hello</div> 
    </template> 
    <script src="my-element.js"></script>  
</polymer-element>