search

samrum / vite-plugin-web-extension

A vite plugin for generating cross browser platform, ES module based web extensions.
MIT License
323 stars 33 forks source link

How to add global styles to the shadow root? #140

Closed MartinMalinda closed 4 months ago

MartinMalinda commented 4 months ago

HI, thanks for this great plugin and perhaps sorry for a naive question.

I'm using Vue and together with it I have some scoped styles. They work just fine.

But then I have some global styles, together with normalizr that I want to apply to the shadow root. Ia this possible?

If I just do 

import "/~/style.scss";

In main.ts that affects the entire page, not just the shadow root.. so I'm messing with the main DOM. Is there a better way?

Thanks!

MartinMalinda commented 4 months ago

I'm going with this approach

I think it works well, apart from rem units still not working well for me in shadow root.. but maybe they are not supposed to.

import styles from "/~/style.scss?inline";

const shadowHost = document.querySelector(".my-app-container");
const shadowRoot = shadowHost?.shadowRoot;
if (shadowRoot) {
  (shadowHost as HTMLElement).style.fontSize = "16px";
  const styleEl = document.createElement("style");
  styleEl.textContent = styles;
  shadowRoot.prepend(styleEl);
}