CSS not injected

[Chrisdo82]

Hi, I have a custom css file imported for my components. It seems that they get ignored when I register the component as a web component. How can I inject it into the web component?

[kopach]

Hi @Chrisdo82, thanks for using this lib and your contribution. Could you, please, provide a working example showing your issue in, e.g., https://codesandbox.io or similar? Also note, if build your React components using CRA scripts (or similar way), CSS defined with styles property of component might be extracted into separate *css files, make sure to include them into your destination app. As alternative — use https://styled-components.com/ library, which works great with current lib as it doesn't extract CSS separately but keeps it bundled within *.js file.

[jun4rui]

Hi, I have a custom css file imported for my components. It seems that they get ignored when I register the component as a web component. How can I inject it into the web component?

hi bro, i think you can set the web component to element so the css will take effect

Below is a demo of the code, it is not documented in readme.md

//Add a third hidden parameter to registerAsWebComponent
registerAsWebComponent(App,'webc-footer','element')

The third parameter can be: '' (default), shadow dom close 'open', shadow dom open 'element', no shadow dom

[Vulwsztyn]

Thanks @jun4rui