Replies: 2 comments
-
|
I’m in a situation close to the one described here. But as it is slightly different I explain my use case. We are integrating a vue app in an angular shell. To do so we are exposing the vue app as a web component. And, in vue, web components seems to always have a shadow dom. So, attaching styles to the head does not work for us. We would need to be able to attach it inside the web component shadow dom. |
Beta Was this translation helpful? Give feedback.
-
|
To work around the limitation of relying on Vite or this plugin to import CSS files, I used the Proxy Component for Injecting Styles and Preventing Specificity IssuesThe proxy component gets the root node of where it's mounted using Sample CodeHere's what the code looks like: import { Component, h, onMounted } from 'vue';
import style from '../styles/style.css?inline';
import fontawesome from '@fortawesome/fontawesome-pro/css/all.css?inline';
const styles = [style, fontawesome];
export const federationProxy = (component: Component, props?: Record<string, unknown>): Component => ({
setup: (_, context) => {
const comp = h(component, { ...context.attrs, ...props }, context.slots);
const wrapper = h('div', { class: 'custom-class-name' }, comp);
onMounted(() => {
const el = wrapper.el as HTMLElement | undefined;
if (!el) {
return;
}
const root = el.getRootNode() as ShadowRoot | Document;
for (const css of styles) {
const sheet = new CSSStyleSheet();
sheet.replaceSync(css);
root.adoptedStyleSheets.push(sheet);
}
});
return () => wrapper;
},
});Usage in Federated ModuleTo use this in the federated module, we import the example component and the import ExampleComp from '../views/Example.vue';
import { federationProxy } from './proxy';
const Example = federationProxy(ExampleComp);
export {
ExampleComp
}; |
Beta Was this translation helpful? Give feedback.
-
Hi all!
I really like the work you've been doing with this plugin and I think module federation as a general concepts has immense potential to change how companies build web applications. So thank you very much. Now to my discussion:
I have a host application that runs inside a shadow dom (
<shadow-root>).This plugins (as far as I understand) adds the
jsandcssfiles of the remote module directly to the<head>element of the html document. This is an issue for thecssfiles, since the styling of the shadow dom is isolated.I quickly scanned some of the code, and it seems that there are multiple instances, where stylesheets and javascript files are dynamically added to the
<head>usingdocument.head.appendChild(or something similar):I imagine a method that combines something like
document.currentScriptwithelement.getRootNode()to determine if the application is running inside shadow dom. If so, this plugin would simply append the scripts to the<shadow-root>instad of the<head>element.Here's a totally untested, naive approach to achieve this:
Any inputs on this idea?
Beta Was this translation helpful? Give feedback.
All reactions