How to add modular styles to web component in vite during build?

[aditya-databrain]

No description provided.

[CodePirate7]

+1. can anyone help answer?

[christopherjbaker]

Can you provide an example of what you're trying to accomplish here?

[aditya-databrain]

Can you provide an example of what you're trying to accomplish here?

We want to inject the styles in web components during build time.
We are using cssInjectedByJs library to do that but it adds to the head and inside react component useEffect we need to check to get the styles from the head and add it inside the component like this <style>{headStyles}</style>.
So I am asking if we can do this during build time only instead of runtime?

[christopherjbaker]

I think you're saying that you want to add the <style> tag inside the web component (which you would need to do if you were using shadow dom). This can't be done at build time, since it doesn't exist yet. import "....css" solutions usually inject directly into the head without a way to customize this, so we've not been able to make much progress here. Most CSS-in-JS solutions automatically inject into the head, but they can usually be customized. To support that, R2WC has a "hidden" prop that it always adds to components: container. This will be the root node (or shadow node, when relevant). You can interact with this like any other DOM element.

[mockey-jockey]

hi @christopherjbaker below is my code and I need to add styles inside Shadow Dom

import ReactDOM from 'react-dom/client';
import { App } from './app';

import r2wc from 'react-to-webcomponent';

const TestApp = r2wc(App, React, ReactDOM, {
  props: {
    test: 'string',
  },
  shadow: 'open',
});

customElements.define('test-app', TestApp);

In this code i need to add styles here, pls help..

[subramanian-iouring]

hi @christopherjbaker below is my code and I need to add styles inside Shadow Dom

import ReactDOM from 'react-dom/client';
import { App } from './app';

import r2wc from 'react-to-webcomponent';

const TestApp = r2wc(App, React, ReactDOM, {
  props: {
    test: 'string',
  },
  shadow: 'open',
});

customElements.define('test-app', TestApp);

In this code i need to add styles here, pls help..

@mockey-jockey @christopherjbaker
Hi, Facing same issue in shadow DOM.
What is the solution for this?

[bmomberger-bitovi]

hi @christopherjbaker below is my code and I need to add styles inside Shadow Dom

import ReactDOM from 'react-dom/client';
import { App } from './app';

import r2wc from 'react-to-webcomponent';

const TestApp = r2wc(App, React, ReactDOM, {
  props: {
    test: 'string',
  },
  shadow: 'open',
});

customElements.define('test-app', TestApp);

In this code i need to add styles here, pls help..

Do you specifically have to add your styles there? That will make things quite complicated. See my other answer for a more thorough explanation. #147 (comment)