svelte/documentation/docs/04-styling/04-nested-style-elements.md

title
Nested <style> elements

There should only be 1 top-level <style> tag per component.

However, it is possible to have a <style> tag nested inside other elements or logic blocks.

In that case, the <style> tag will be inserted as-is into the DOM; no scoping or processing will be done on the <style> tag.

<div>
	<style>
		/* this style tag will be inserted as-is */
		div {
			/* this will apply to all `<div>` elements in the DOM */
			color: red;
		}
	</style>
</div>