[attribute~="value"] selector not working on :host or :host-context

[Sleeckx]

Hello,

the following test case illustrates the problem: http://jsbin.com/rexehifigo/edit?html,output

<dom-module id="my-element">
  <template>
    <style>
      :host {
        display: flex;
      }

      :host .detail {
        flex: 1;
      }

      :host[layout="master-detail"] .master {
        width: var(--master-width, 40%);
      }

      :host[layout~="master-detail"] .master {
        width: var(--master-width, 40%);
      }

      :host-context([layout~="master-detail"]) .master {
        width: var(--master-width, 40%);
      }
    </style>
    <div class="master">MASTER</div>
    <div class="detail">DETAIL</div>
  </template>
  <script>
    Polymer({
      is: 'my-element'
    });
  </script>
</dom-module>

Polymer generates the following custom style for the element:

<style scope="my-element-0">
    my-element.my-element-0[layout="master-detail"] .master.my-element {
      width:40%;
    }

    my-element.my-element-0[layout~="master-detail"].my-element .master.my-element {
      width:40%;
    }

    [layout~="master-detail"] my-element.my-element-0.my-element .master.my-element,
    my-element.my-element-0[layout~="master-detail"].my-element .master.my-element {
      width:40%;
    }
</style>

The first one is generated correctly, the second and third add .my-element after the attribute selector.

Edit: Included :host-context test case.

[MeTaNoV]

Did you try :host-context([layout~="master-detail"]) ?

[Sleeckx]

Yes, it also adds the .my-element class after the attribute selector:

<style scope="my-element-0">
    [layout~="master-detail"] my-element.my-element-0.my-element,
    my-element.my-element-0[layout~="master-detail"].my-element {
      width:40%;
    }
</style>

[equinusocio]

I have the same issue with the ShadowDOM v1 implementation. :host-context([my-attr]) {...} doesn't work anymore. Reference https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom#contextstyling