While Angular has native support for Web components, it is unclear to me how to style a web component with SCSS without leaking the styles on the hosting page.
Obviously, if a component has its rules defined in its .scss files, those rules apply only to that component.
+-----------------------------------------------------------------------+
| |
| |
| |
| +----------------------------------------------------------------+ |
| | | |
| | | |
| | Web component | |
| | | |
| | | |
| | +---------------------------+ +-----------------------------+ | |
| | | | | | | |
| | | | | | | |
| | | Sub component A | | Sub component B | | |
| | | | | | | |
| | | | | | | |
| | +---------------------------+ +-----------------------------+ | |
| +----------------------------------------------------------------+ |
| |
| |
| Web page |
| |
| |
| |
+-----------------------------------------------------------------------+
In a typical example, let's say that I have a web page with a custom component created with @angular/elements.
Normally, in an Angular app, I would define my styles in /src/styles.scss in which I would import all my external frameworks-related styles and other global definitions which would result, after a build, in a CSS file that contains everything.
However, if I link this file to the hosting page, all the styles contained there would be valid for the entire page. So a
p {
color: red;
background-color: black;
}
Would make all <p> tags be red with a black background.
However, due to the nature of angular encapsulation, there is nowhere I can put this style rule in the angular to make it valid from application bootstrap to every component under it. Or is there?
If I put my style in the app.component.scss or MyCustomElement.component.scss the rule is valid just in that component, and this is an obvious design mechanism in Angular.
I found this article talking about transforming the SCSS file in a js import and that seems a proper solution, however, I wasn't able to port it to an angular project with ease but will try again.
Any answer but also suggestion/link to the official documentation on how this could be achieved would be much appreciated
[Edit] To clarify my question: I would like to have a space on an Angular Generated Web component in order to put some styles global to the component but not to the page who’s hosting it. Creative methods such as injecting a scss converted to javascript also could be interesting. I just didn’t find one that was practical enough to use it in Angular.
