Stencil: Scoped (IE11) style generated for ::slotted selector is wrong

[gtranter]

Stencil version:
1.7.2

I'm submitting a:
[x ] bug report

Current behavior:
Style applied using the ::slotted() selector function does not work in IE11.

Expected behavior:
When applying style using the ::slotted() selector function, the style should be applied to the element in browsers that do not have shadow dom support such as IE11.

Steps to reproduce:
Run the example below.

Related code:
Component:

import { Component, h } from '@stencil/core';

@Component({
    tag: 'my-slot-test',
    styles: ':host ::slotted(span) { color: red; }',
    shadow: true
})
export class MulticolumnListRow {
    render() {
        return (
            <slot />
        );
    }
}

Usage:

<my-slot-test><span>This text should be red</span></my-slot-test>

Other information:
This problem existed in v0.18.1 as well, where debugging was a little easier and it was clear that the generated CSS was wrong. I'm not sure if v1.7 does the same thing, but this might help debug the problem. The scoped class names added to the elements did not match the CSS in hierarchy:

DOM

<my-slot-test class="sc-my-slot-test-h sc-my-slot-test-s hydrated">
    <!---->
    <span>
        This text should be red
    </span>
</my-slot-test>

And the generated style code looked like:

.sc-my-slot-test-h .sc-my-slot-test-s > span{
    color:red
}

There is a space between .sc-my-slot-test-h and .sc-my-slot-test-s which changes the selector to be directed at .sc-my-slot-test-s as a descendant of .sc-my-slot-test-h. which is of course not the case - the two clases are on the same element.

[gtranter]

Any word on this? It's really making things difficult for us. Could someone confirm that the bug I've identified in v0.18.1 is the same bug that causes the problem in v1.x? Any information would be appreciated - it might help us devise a workaround until the problem can be fixed.

[stanley85]

Try :host(::slotted(span)) { color: red; } since the host selector has different notation on self-reference itself

[gtranter]

Thanks very much! That works but then breaks Chrome etc. (using shadow dom). But I was able to figure it out from there. I ended up with (SASS):

:host {
    ::slotted(span), // for shadow
    &::slotted(span) { // for non-shadow
        color: red;
    }
}

Thanks again!

[stanley85]

Sass is a great choice :)

[hnipps]

I'm experiencing the same issue in MS Edge 42.

Thanks for the workaround @gtranter !