ViewEncapsulation creating problems while styling highcharts

Question

I am using a couple of charts in a single view, each chart being its own component. I have a LineChartComponent and a XRangeChartComponent. I am using a styles file with XRangeChartComponent and overriding some classes. But the styles are not getting applied in the chart.

After inspection, I found out that the styles file was modified by angular to append a class to conform to the shadow DOM. So, I used encapsulation: ViewEncapsulation.None in XRangeChartComponent. Now the styles are also getting applied for LineChartComponent.

How do I proceed?

The demo I am attaching has 2 line charts but it reproduces my issue.

https://stackblitz.com/edit/angular-highcharts-styling

Answer 1

In order for template elements to make use of component styles with view encapsulation, they should be created by Angular compiler. These elements are created by third-party library that accesses DOM directly and thus cannot be styled this way.

In order to be used with default ViewEncapsulation, styles should use shadow-piercing combinator:

:host ::ng-deep .highcharts-series-0 .highcharts-point {
  fill: #ff0000;
  stroke: #0000ff;
}