HTML expression does not apply all CSS styles

[grod220]

When having code injected into a component via {@html expression}, the rendered HTML does not apply all of the component's CSS styles. In this example, only the first is properly styled:

<style>
	a { color: red; }
</style>

<script>
	let messageHTML = 'Here is an HTML expression without a styled <a href="/">link</a> :('
</script>

<div class="htmlText">
	Here is a normal styled <a href="/">link</a>
</div>
<div class="htmlText">
	{@html messageHTML}
</div>

Live reproduction: https://svelte.dev/repl/c1976e67d38d453dae297e90663c9ece?version=3.4.4

[Conduitry]

This is expected. Svelte can only scope styles that it can statically analyze at compile time. If you need certain styles to be unscoped, you can wrap parts of the selector in :global( ).

A style like div.htmlText :global(a) { color: red; } would scope the div.htmlText part of the selector to this component, but would match any a inside that, regardless of whether it's something Svelte can see while compiling.

[NateBrady23]

I think a note about that here https://svelte.dev/docs#html might be helpful. I struggled with this for a moment.