I need help using shadcn-vue within a chrome extension, which is rendered using an iFrame

[schenktobi]

I am facing the following Problem:

I want to use shadcn-vue within my chrome extension, which is rendered in an iframe (the content_script)

When trying to use e.g. the Tooltip Components inside the Chrome Extensions Popup (which is not rendered in an iFrame) it works like a charm and I can use all of the functionality.

However, when I want to use the Tooltip inside the content_script (which is rendered in an iFrame) i cannot get it to work.
After doing some investigation, I would suggest that the reason for this is that radix-vue adds EventListeners and other things by referencing the global document. Since the Components are added inside an iFrame's document and not the global document these Listeners and other interactive functionalities do not seem to work.

If I am correct with assuming this as the problem source, is there a way to tell radix-vue to reference a different document for specific components.

I cannot patch the global document, since that is used in multiple functionalities across the chrome Extension.

Thanks in advance for any help. If any questions are open I am happy to answer them.

[schenktobi]

Turns out using ShadowDom does not change the problems I am having. Reason probably being that the element which rely on data-states canot be functional if they are dinamically inject, which is true in my case. Probably because they states and event listeners are added when the script is first loaded, but the other elements are mounted and injected afterwards. Is there a way to manually call initialisation function to also invoke them once some additional components have been rendered to the page?