Styling by ":host.someclass" -- styling is ignored in shadow dom components

[Nashorn]

When using :host selector for styling components, you might try a rule like this:

:host.hidden {
    display:none;
}

When your component has the .hidden class, the css rule above works:

<my-component class="WebComponent MyComponent hidden"></my-component>

When your component is in the shadow and has the .hidden class, the css rule above is ignored:

<my-component class="WebComponent MyComponent hidden" shadow></my-component>

SOLUTION:

This is by w3c specification. Your css rule is invalid for shadow dom. The correct syntax is:

:host(.hidden) {
    display:none;
}

The problem is, when not running in shadow, :host(.hidden) is ignored, you'll have to
alter the rule again for non shadow dom.

:host.hidden {
    display:none;
}

[TODO: Fix issue in onTransformStyle()]

NOTE:
The rule, :host(.hidden) is not the same as :host .hidden.

:host .hidden {     /*targets a childNode inside host, with class "hidden", and works as expected*/
    display:none;
}

[Nashorn]

Fix at framework level. TODO: Move this additional transform into onTransformStyle:

SAMPLE INPUT:
var t = `:host(.test) #button {}`;

TRANSFORM:

var r = /\:host\(([^\)]*)\)/;
t=t.replace(r, function(a1,a2) {
    console.log(arguments)
    return `:host${a2}`
})

OUTPUT:
:host.test #button {}

[Nashorn]

FIXED.