Open dwighthouse opened 4 months ago
Say you have a webc component for your header:
<header webc:root="override"> <h1 @raw="this.$data.settings.siteTitle"></h1> </header> <style webc:scoped> :host { color: #fff; & h1 { padding-bottom: 0.5rem; } } </style>
The output of the HTML is as you would expect, with a generated class name at the top level:
<header class="w5lbk0hec"> <h1>My Cool Site</h1> </header>
However, the bundled CSS that is generated incorrectly adds the generated class name to the front of every nested selector:
.w5lbk0hec { color: #fff; .w5lbk0hec & h1 { padding-bottom: 0.5rem } }
The correct output should be this, without the created class in front of the &:
.w5lbk0hec { color: #fff; & h1 { padding-bottom: 0.5rem } }
I have thus far found no workaround besides just not using scoping at all.
Ideas?
Say you have a webc component for your header:
The output of the HTML is as you would expect, with a generated class name at the top level:
However, the bundled CSS that is generated incorrectly adds the generated class name to the front of every nested selector:
The correct output should be this, without the created class in front of the &:
I have thus far found no workaround besides just not using scoping at all.
Ideas?