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

[ABDULMUNAFZ]

You can render a stylesheet <link> inside each custom element's shadow root, and import the CSS URL rather than importing it as an SFC <style src>.

For example, in PmDayEvents.ce.vue:

<script setup>
import sharedCssUrl from './assets/pm-common.css?url'
</script>

<template>
  <link rel="stylesheet" :href="sharedCssUrl">
  <div class="your-component">...</div>
</template>

Register it with defineCustomElement as usual. Remove the corresponding shared <style src="..."> from each SFC, otherwise you still include that CSS in the injected styles as well. Repeat the link for independently served icon/component stylesheets if needed. A link only in the document head will not style the contents of these shadow roots.

I tested a two-element example with Vite 6.0.3, Vue 3.5.13, and plugin-vue 5.2.1: in dev both shadow roots linked /shared.css; in production app preview both linked the same hashed CSS asset. Both had the expected computed text color and no inline style tags. Reproduction and exact checks: https://gist.github.com/ABDULMUNAFZ/e4191899652156cd3d931e9f3b2d68c7

For your library/module build, deployment needs attention: my ES-library build emitted shared.css separately and referenced /shared.css with the default base. Serve it at that URL, set the deployment base appropriately, or let the consumer supply the deployed stylesheet URL. Do not assume it resolves relative to the library JS file.

The shared URL permits normal browser caching, rather than guaranteeing one network request under all cache settings. External links can briefly show unstyled content, and I did not test CSS HMR for the ?url approach—reload after edits if needed.

References: Vite URL imports, Vue custom-element styles.

AI-assisted, with the development and production browser checks described above run locally.