Angular 10: View Encapsulation

GoJS
#1

While I was evaluating GoJS-Angular I noticed that without setting ViewEncapsulation to “None” the GoJS web elements will not load properly. I’m guessing that this is required by GoJS to bind the CSS/SCSS to the diagram itself.

My question is: Are there any workarounds that would allow me to set ViewEncapsulation back to default (Emulated) and still allow for GoJS to function properly?

While it wouldn’t be a big issue I would like to avoid having Global CSS.

Thanks!

#2

I don’t have an answer for you now. We’ll look into this issue.

#4

I’m not an expert on Angular, but can you tell me more about what you mean? GoJS has no global CSS, but it does set CSS .style on some DOM elements that it creates.

#5
#6

Sure, let me try to clarify things a bit. When working with Angular CSS/SCSS styles are encapsulated at the component level so that if desired you could have a CSS class “.myDiagramDiv” in both Component A and Component B with different values.

From a development standpoint it allows us to create components without worrying about overlap with existing or future components so that we can maintain a very high modularity.

When you set “encapsulation: ViewEncapsulation.None” in the TypeScript file you are essentially turning that off for that specific component. So, any CSS/SCSS that you have on that component is now accessible across the entire website. Normally this is not a significant issue but could cause trouble in the future. For example, if I were to implement your sample Angular diagram into my website I would have to avoid using “.myDiagramDiv” for any other future GoJS components.

This can easily be worked around by using specific naming conventions but it does somewhat go against the intended modularity of Angular. Which is why I asked if there was a work around.

Thanks!

#7

Yes it seems we could make our example (and perhaps component) work better here, sorry. We’re not very well versed in how Angular expects to do things.

Could you pierce encapsulation within the CSS just for the Diagrams, which will allow you to at least set encapsulation to None otherwise? Doing something like:

:host ::ng-deep .myDiagramDiv {
  background: whitesmoke;
  width: 700px;
  height: 300px;
  border: 1px solid black;
}

Works in the GoJS Angular Basic sample.

Or is that just shifting the problem around?

#8

Looks like that resolves the issue and everything is working as expected.

The only issue I would watch out for here is that ::ng-deep is technically depreciated or about to be depreciated. However, there are not any proposed long term alternatives. For the near term however, this should fix the styling issue.

Thanks!