Shadow dom and global styles

[superandrew]

Build isolated web component with ng-aquila theme.

We are building a web component that should be hosted in a page which doesn't use ng-aquila (and it is not angular at all).

🎯 Goals

The web component should be completely isolated in terms of styles and use a ng-aquila theme (in this case a custom theme). But if we build our web component in a standard way, we end up with a javascript web component and all styles defined by ng-aquila and its variables compiled in a styles.css file. If we include this file on the host page, however, styles leak on the host page.

We would like to include all css in our webcomponent, however due to the nature of the global variables, we aren't able to compile by including all styles in a custom selector, such as, for example,

webcomponent {
  @import "~@angular/cdk/a11y/a11y";
  @import "~@angular/cdk/overlay-prebuilt.css";

  @import "~@aposin/ng-aquila/styles/theming";

  @import "styles/theme";
  @import <other-theme-packages>
  @include nx-build-theme(<custom-theme-name>);

  @import "styles/functions";
  @import "styles/custom";

}

would generate an error:

SassError: "Theme: parent theme is not defined."

30 │ $nx-themes: nx-register-theme($my-theme, <custom-theme-name>, <theme-name>);
   │             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

We are trying other approaches in order to include all styling in the shadow dom, to no avail for now.

So we ask if there is a way that we are not seeing, and if this is something that, if we manage to solve, would be useful in order to send a pull request.

📖 References

A useful link on how to embed scss in js using shadow dom encapsulation

👌 Requirements

A generated webcomponent should be

1. pure js (with inline styles) or
2. linked with a css that would not leak into the hosting page.

ℹ️ Details

Any help/direction would be greatly appreciated.

[Phil147]

Hi @superandrew

in general this project is an angular component library and there are currently no plans to move to web components. Your code looks fine and our SASS functions and mixins for theming work in an Angular CLI setup and just by using the npm sass package and compiling it standalone. As you linked an article how to use SCSS in web components that would point me to this webpack config as the potential source of error. I am happy to investigate further if you could send me a test project that shows what you are doing with the webpack config. You can send me an email for it.

[superandrew]

thanks @Phil147, we are working around this, I'm gonna close this issue