Incorporate global styles in Angular Elements | Angular Community | Page 1

worn ridge Mar 7, 2023, 2:14 PM

I have quite a substantial Angular application from which I have to export a component as a web component. I'm looking into Angular Elements but I'm running into problems with styling rules.

We have a lot of app-wide styling in global scss (partials) but these are not used when compiling the web component. The encapsulated styling (e.g. the stylesheets for the web-component and it sub-components) are compiled correctly.

Does anyone have any experience with this? It would be a large endeavor (and quite redundant) to declare the global styling again in my web-component scss.

Is it possible to include global styling? I haven't found any concise documentation or options on stackoverflow so any help/suggestions would be greatly appreciated!

stray lodge Mar 7, 2023, 7:02 PM

You could use critters to render the component and extract the CSS in a build step https://github.com/GoogleChromeLabs/critters/tree/main/packages/critters#simple-example

GitHub

critters/packages/critters at main · GoogleChromeLabs/critters

🦔 A Webpack plugin to inline your critical CSS and lazy-load the rest. - critters/packages/critters at main · GoogleChromeLabs/critters

if your component has a lot of conditional classes you might miss them though

your global styling doesn't apply to the app you plan to use your component in?

#Incorporate global styles in Angular Elements