You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
While writing some Shadow DOM based custom elements I run into the case where I need to use the :host() function pseudo-class in order to style a child element.
In spec v0 I used to write the following code:
:host {
&.foo {
...
}
}
This would compile to :host.foo {... and works fine.
Now with v1 of the spec I have to use the function pseudo-class to do the same:
:host() {
&.foo {
...
}
}
However, as expected, this compiles to the incorrect css :host().foo.
I tried going around this by creating a mixin that would interpolate the arguments and generate correct css. However this will never be possible for the following sass code:
:host {
&.foo {
&[disabled] {
...
}
}
}
The result of the above code should be :host(.foo[disabled]) {...
Are there any plans to support this scenario? Or is there a way around?
Maybe add an exception for parent selectors in combination with :host to automatically generate a function pseudo-class?
The text was updated successfully, but these errors were encountered:
This has slightly changed since #2908 and the first example now results in .foo as does dart sass.
It's not 100% clear what the expected behavior OP is looking for (examples with explicit example input and expected output would help). But I'm also quite sure that we do handle it the same as dart sass. So closing this as "not in sass". Feature request for the sass language in general should be posted at https://github.com/sass/sass. Thanks!
While writing some Shadow DOM based custom elements I run into the case where I need to use the :host() function pseudo-class in order to style a child element.
In spec v0 I used to write the following code:
This would compile to
:host.foo {...
and works fine.Now with v1 of the spec I have to use the function pseudo-class to do the same:
However, as expected, this compiles to the incorrect css
:host().foo
.I tried going around this by creating a mixin that would interpolate the arguments and generate correct css. However this will never be possible for the following sass code:
The result of the above code should be
:host(.foo[disabled]) {...
Are there any plans to support this scenario? Or is there a way around?
Maybe add an exception for parent selectors in combination with :host to automatically generate a function pseudo-class?
The text was updated successfully, but these errors were encountered: