vite-plugin-vue-shadow-style

Plugin to inject Vue setup SFC style to shadow root.

Typically, the framework injects the style into the document head when assets are loaded, indicating that it is static. However, in the shadow DOM, the style should be injected dynamically into the shadow root where the component is rendered.

This plugin will recognize the style blocks with the shadow attribute and help you inject them into the shadow root in runtime.

Install

1npm install vite-plugin-vue-shadow-style --save-dev
2yarn add vite-plugin-vue-shadow-style -D
3pnpm add vite-plugin-vue-shadow-style -D

Usage

Config Bundler

1import { defineConfig } from 'vite';
2import vue from '@vitejs/plugin-vue';
3
4import vueShadowStyle from 'vite-plugin-vue-shadow-style';
5
6export default defineConfig({
7  plugins: [vue(), vueShadowStyle()],
8});

Write SFC

This plugin use composition API to inject style to shadow root, so you should use <script setup> to write your component.

1<script setup lang="ts"></script>
2
3<template>
4  <h1>Vue in Shadow DOM</h1>
5</template>
6
7<!-- Add `shadow` attr on style block which you want to inject in runtime -->
8<style scoped shadow>
9h1 {
10  color: red;
11}
12</style>
13
14<!-- import other files also okay -->
15<style src="./style.scss" shadow></style>