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>

我尝试了很多与主机上下文相关的组合：hover但它们似乎都没有效果。

提前感谢您的帮助！

Answer 1

规范没有具体提到这一点，但可以结合：host-context和：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

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

主机上下文和用户状态

2 个答案: