Angular 7 + ShadowDOM - Loading strategies for @angular/material skins

Question

I'm wanting to do an Angular 7 application with all of the encapsulation set to ViewEncapsulation.ShadowDom - and that's all well and good.

But I cannot seem to find any sort of reliable reference that shows a good way to approach this with regards to skinning things like @angular/material. Since global styles are worthless, I cannot just follow the rules at Theming Angular Material because they ...well, don't work.

Has anyone managed to get this working in a decent fashion?

Answer 1

I was running into similar issue. However, at the angular element component where I was using ViewEncapsulation.ShadowDOM - I had to import the theme.scss that I was using in angular.json @import "~@angular/material/prebuilt-themes/deeppurple-amber.css"; in the components scss file.

And, things worked.