Externalize CSS in Vue 3 web components

[franck102]

Hi all,
I am using Vite in module mode to build a Vue 3 project that defines 4 web components with shadow root enabled. The components share lots of common CSS, which currently is inlined as <style> tags into each shadow root, and thus is loaded once for each component on a page.
I'd like to try using tags in the shadow DOM hoping the browser will download the CSS only once, however I can't figure out how to configure Vite to achieve this?
I have searched existing issues & discussions but I can't find a clear explanation of how to control how Vite treats imported styles. Ideally I'd like this to work in dev mode.

Currently the project looks like this:

main.ts

import {DayEventsElement} from "@/dayEvents";
import {ServiceCardElement} ...

export { DayEventsElement, ServiceCardElement... }

dayEvents.ts:

const DayEventsElement = defineCustomElement(PmDayEvents)
window.customElements.define('pm-day-events', DayEventsElement);
export { DayEventsElement }

PMDayEvents.vue

<template>...</template><script>...</script>

<style src="@/assets/css/bootstrap-icons-min.css"/>
<style src="@/assets/css/pm-element.css"/>
<style src="@/assets/css/pm-common.css"/>

Any help with this would be greatly appreciated... thanks!
Franck