@pospisk/shadow-vue

Mirror Framework/Vite/PrimeVue styles into a Shadow DOM host and neutralize head styles so your light DOM stays untouched.

Install

npm i @pospisk/shadow-vue

bun i @pospisk/shadow-vue

pnpm add @pospisk/shadow-vue

yarn add @pospisk/shadow-vue

Usage

Inside the main.ts file:

import { installVueCssLinkMarker, createShadowHost } from "@pospisk/shadow-vue";
installVueCssLinkMarker(); // this has to be at the top

import { createApp } from 'vue';
import PrimeVue from 'primevue/config';
import Aura from '@primeuix/themes/aura';

import './style.css';
import App from './App.vue';

const host = document.getElementById('app')!;
const { shadow, appRoot } = createShadowHost(host);

const overlayContainer = (() => {
    const el = document.createElement('div');
    el.setAttribute('data-overlay-root', '');
    shadow.appendChild(el);
    return el;
})();

const app = createApp(App);

app.use(PrimeVue, {
    theme: {
        preset: Aura,
    }
});

// Provide the overlay container app-wide so components can bind :appendTo
app.provide('primevue-overlay-container', overlayContainer);

app.mount(appRoot as any);