polymer - 主机上下文和用户状态

我想知道是否可以将主机上下文与元素用户状态结合起来。
例如:

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

我尝试了很多主机上下文和 :hover 的组合，但它们似乎都不起作用。

提前感谢您的任何帮助!

最佳答案

规范没有具体提到这一点，但可以结合 :host-context 和 :host 选择器来获得正确的结果。

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

关于polymer - 主机上下文和用户状态，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27527993/