vite-plugin-shadow-style
What it does
This plugin allows you to inject css styles into the shadow root of your web components.
How to install
Just run a simple
npm i -D vite-plugin-shadow-styleHow to use it
Declare your entry point like this:
export function defineEntry() {
class MyComponentEntry extends HTMLElement {
public static Name = "my-component";
private mountPoint!: HTMLDivElement;
constructor() {
super();
}
connectedCallback() {
this.mountPoint = document.createElement("div");
// This is the important part, where you're creating a style tag to
// inject into the shadow root.
const style = document.createElement("style");
style.innerHTML = SHADOW_STYLE;
const shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot.appendChild(this.mountPoint);
shadowRoot.appendChild(style);
ReactDOM.createRoot(this.mountPoint).render(<MandGBreakdown />);
}
}
window.customElements.get(MyComponentEntry.Name) ||
window.customElements.define(MyComponentEntry.Name, MyComponentEntry);
}
defineEntry();At this point, you'll probably get errors regarding SHADOW_STYLE not being
defined. To obviate this, you can create a globals.d.ts file in your project's
root folder and add the following to it:
declare const SHADOW_STYLE: string;Now, all you'll need to do is load the plugin in your vite configuration, as the
last item in the plugins array:
import { shadowStyle } from 'vite-plugin-shadow-style';
export default defineConfig({
build: {
rollupOptions: {
plugins: [
react(),
typescript({
noEmit: true,
allowImportingTsExtensions: true,
}),
// Here it goes!
shadowStyle(),
],
},
minify: true,
sourcemap: true,
outDir: "dist",
},
});