fix: prevent error overlay style being overridden (fixes #9969)

[sapphi-red]

Description

Currently, error overlay uses :host to declare styles for the root element.

vite/packages/vite/src/client/overlay.ts

Lines 5 to 6 in 4158b98

	:host {
	position: fixed;

But when a style is declared for that element like *.
https://github.com/vuejs/create-vue/blob/2f2b040e5a73093926be0f69054a9616918ba5b8/template/base/src/assets/base.css#L53-L58
It gets overridden by that.

Outside styles always win over styles defined in shadow DOM.
https://web.dev/shadowdom-v1/#styling-a-component-from-the-outside

For #9969, position: fixed was overridden with position: relative.

fixes #9969

Additional context

---

What is the purpose of this pull request?

• Bug fix
• New Feature
• Documentation update
• Other

Before submitting the PR, please make sure you do the following

• Read the Contributing Guidelines.
• Read the Pull Request Guidelines and follow the Commit Convention.
• Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• Ideally, include relevant tests that fail without this PR but pass with it.

[sapphi-red]

Another way is to set { state: 'attached' } but that still might break ecosystem tests that relies on this.

[patak-dev]

LGTM, let's merge it after we release 3.1 tomorrow