Enable :root selector for native-shadow-only CSS

[nolanlawson]

Originally we disallowed using the :root selector because it doesn't work in synthetic shadow DOM. Trying to use it in CSS results in the error:

Error: CssSyntaxError: LWC1009: /.../x/app/app.css:1:1: Invalid usage of unsupported selector ":root".

Now that we have disableSyntheticShadowSupport, though, we could conceivably relax this rule for CSS that only targets native shadow DOM. Or we could have the selector somehow throw an error at runtime only when rendered in synthetic shadow DOM. Edit: nah, let's just rely on disableSyntheticShadowSupport.

[nolanlawson]

Marking as "up for grabs." Steps to implement:

First, only throw this error if disableSyntheticShadowSupport is false:

lwc/packages/@lwc/style-compiler/src/selector-scoping/validate.ts

Lines 26 to 32 in 01187f1

	// Ensure the selector doesn't use an unsupported selector.
	if (UNSUPPORTED_SELECTORS.has(value)) {
	throw root.error(`Invalid usage of unsupported selector "${value}".`, {
	index: sourceIndex,
	word: value,
	});
	}

Then pipe in disableSyntheticShadowSupport to this function as necessary.

Then add a test in the fixtures with the flag enabled to ensure that :root and :host-context() both work (the latter is Chromium-only, but no need for us to block it if you are targeting native shadow).