Host Context and User State

Question

I would like to know if it is possible to combine host-context with user states of elements. For instance:

<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>

I tried many combinations with the host context and: hover, but none of them work.

Thanks for any help in advance!

Answer 1

The specification does not specifically mention this, but to get the right result, you can combine both the host context and the host selector.

<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

Reading through a specification that is not possible. However, the following can be done.

<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>