vite-plugin-vue-shadow-style

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

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

Usage

Config Bundler

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

import vueShadowStyle from 'vite-plugin-vue-shadow-style';

export default defineConfig({
  plugins: [vue(), vueShadowStyle()],
});

Write SFC

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

<script setup lang="ts"></script>

<template>
  <h1>Vue in Shadow DOM</h1>
</template>

<!-- Add `shadow` attr on style block which you want to inject in runtime -->
<style scoped shadow>
h1 {
  color: red;
}
</style>

<!-- import other files also okay -->
<style src="./style.scss" shadow></style>