Style scoping bug when moving to v0.11.x

[cssandstuff]

Given two webc components
c-red.webc

<div webc:root="override">
  <slot></slot>
</div>

<style webc:scoped>
  :host {
    background-color: red;
  }
</style>

c-blue.webc

<div webc:root="override">
  <slot></slot>
</div>

<style webc:scoped>
  :host {
    background-color: blue;
  }
</style>

and their usage:
page.webc

<c-red>Hi I am red</c-red>
<c-blue>Hi I am blue</c-blue>

<c-red>
  I am red.
  <c-blue>Hi I am blue</c-blue>
  still red
</c-red>

<c-blue>
  I am blue.
  <c-red>Hi I am red</c-red>
  still blue
</c-blue>

Prior to v0.11
would result in:

<div class="wpqw-v5wk">
  Hi I am red
</div>
<div class="wxarocnxj">
  Hi I am blue
</div>

<div class="wpqw-v5wk">
  I am red.
  <div class="wxarocnxj">Hi I am blue</div>
  still red
</div>

<div class="wxarocnxj">
  I am blue.
  <div class="wpqw-v5wk">Hi I am red</div>
  still blue
</div>

.wxarocnxj{background-color:blue}
.wpqw-v5wk{background-color:red}

but after moving to v0.11
it results in the same html but extra/borked css styles, it seems like the :host selector leaks upwards (if that makes any sense).

.wxarocnxj{background-color:blue}
.wpqw-v5wk{background-color:blue}
.wpqw-v5wk{background-color:red}
.wxarocnxj{background-color:red}

[cssandstuff]

I guess the clearer description is that if you style using :host in a component and you're using that component inside another (via a slot) then the :host css for that component makes its way into the parent somehow.

[rijkvanzanten]

I just noticed the same behavior. Looks like the scoping of the styles is "scoped" to the outer parent component, meaning that things like

<style webc:scoped>
  div {
    color: red;
  }
</style>

suddenly have nasty side-effects if you're working with nested webc components

[zachleat]

apologies, I think this may be the regression introduced in v0.11 and fixed with #152 but I will investigate further.

[zachleat]

I did confirm that this is fixed by #152 with the test case you supplied, thank you!

Shipping with v0.11.2 today.

[rijkvanzanten]

Thanks @zachleat! Killing it as always 🚀

[zachleat]

Thank you @rijkvanzanten!!