Use Shadow Root instead of iframe for content script

[maenkhouseh]

Is there a plan to use shadow root instead of iframe in content script?

Can you give me some help on how to implement that using your amazing repo?

Many thanks in advance

[mubaidr]

This has been on my mind for some time, but unfortunately, I did not have time to research/ implement this. I will try to devote some time to this when I get time.

Keeping this open

[mubaidr]

Implemented in: 6687624

[maenkhouseh]

Thanks a lot for the implementation. but there is no shadow root attached to the basic container.

It should have such a pattern:

const host = document.querySelector("#host"); const shadow = host.attachShadow({ mode: "open" }); const span = document.createElement("span"); span.textContent = "I'm in the shadow DOM"; shadow.appendChild(span);

[maenkhouseh]

and of course the content script style is currently mixing with page style and inheriting style from main page, the shadow root correct usage will solve that

[mubaidr]

You should check shadow-dom branch for implementation: https://github.com/mubaidr/vite-vue3-browser-extension-v3/tree/shadow-dom

Taiwindcss working fine (so far), but daisy ui does not seem to work.

[maenkhouseh]

Sounds good, I ll give it a test

[mubaidr]

Plus, in the master branch, we also have updated iframe based implementation, which dds styles to iframe. So, it should also solve problem with webpage styles merging issue.