CSS: Support scoping inner elements of a webc file

Assumption about the current state:

If I have the file:

<div>
  <h1>Example</h1>
  <p>Content</p>
</div>

<style webc:scoped>
:host h1 {
	color: aliceblue;
}
:host p {
	color: blanchedalmond;
}
</style>

After compilation I would currently see:

{
	html: "<div class=\"wcl2xedjk\"><h1>Example</h1><p>Content</p></div>",
	css: [".wcl2xedjk h1{color:aliceblue}.wcl2xedjk p{color:blanchedalmond}"],
}

Main concern:

For components that wrap another component, this isn't scoped enough to prevent style leakage. For example if our component above had a child component within it, and that child component also contained an h1 element, then .wcl2xedjk h1 would apply and turn it aliceblue.

Desired behaviour:

In Svelte's CSS scoping, I can write the following:

<div>
  <h1>Example</h1>
  <p>Content</p>
</div>

<style>
h1 {
	color: aliceblue;
}
p {
	color: blanchedalmond;
}
</style>

Which would provide me something along the psuedo-lines of

{
	html: "<div><h1 class=\"kziuyb\">Example</h1><p class=\"wgrhia\">Content</p></div>",
	css: ["h1.kziuyb{color:aliceblue}p.wgrhia{color:blanchedalmond}"],
}

Where the styles are scoped directly to the elements they applied to.

Implementation:

In (my) ideal world this would happen automatically when webc:scoped is applied. Alternatively to keep it opt-in it one could utilize something like a :host pseudo-class wrapping styles:

<style webc:scoped>
:host(h1) {
	color: aliceblue;
}
:host(p) {
	color: blanchedalmond;
}
</style>

Ideally slightly more complex selectors would also be handled, so h1 + p:first-child could become h1.qwerty + p.asdfgh:first-child

Start at the handling of <style webc:scoped> and trace how selectors and rendered elements are transformed. Compare the current descendant scoping with the requested per-element scoping, including nested components and selectors such as h1 + p:first-child. Done means styles no longer leak into child components while the shown selectors retain their intended matches.