How to get Svelte to treat a <style> element like any other HTML element?

[LeaVerou]

My use case is that I wanted to use expressions in a <style> element to generate custom CSS (that cannot be generated via CSS variables since it's applied to the root).
Presumably, there must be a way to tell Svelte "hey, treat this just like any other HTML element and do not process its contents as you'd do for a <style> element".

The docs made it sound like putting it in a <div> would do that, but that doesn't work, the expressions get ignored too.

So far this is the only thing that has worked, but it's clumsy AF:

<svelte:element this={'style'}>
	:root &lbrace;
		color-scheme: {colorScheme};
	&rbrace;
</svelte:element>

(I’m aware I can do the same thing via DOM manipulation, this has become a quest in itself at this point 😁 )

[Prinzhorn]

Are you looking for @html?

{@html `
	<style>
		:root {
			color-scheme: ${colorScheme};
		}
	</style>	
`}

[LeaVerou]

Oh I guess that could work and is more elegant than my <svelte:element> solution. It still feels like a workaround rather than a primary solution though.

[geoffrich]

I did a little bit of history digging, and it seems like expressions in non-top-level styles did work in Svelte v1 (ages ago!), but the feature was removed in Svelte v2: #1339

Part of the reason it was removed seemed to be the trickiness of parsing {value} expressions in CSS and distinguishing between an interpolation and normal CSS curly brace usage.

I guess it could be a valid feature request to make this work again, though it may be closed for some of the reasons in the above issue. Until then, the best workaround is probably #10686 (comment)