1

I'm using d3.js in Angular 2. As the template elements are created dynamically, I have to use 'shadow piercing CSS combinators'.

:host /deep/ .arc-path:hover 
{
  fill: orange;
}

:host /deep/ .arc-path-sub:hover
{
  fill: orange;
}

:host /deep/ .arc-path{ 
  fill: cornflowerblue;
  fill-opacity: 0.95;
  cursor: pointer; 
}

There is a question on using this technique for d3.js in Angular 2, and this css is the way to go (alternative of ViewEncapsulation.None is not an option for me).

These work fine, but in VS Code, the css file shows 20 errors, as it does not recognise the these css combinators. Is there a way around this e.g. to allow VS Code to accept this syntax, or is this a potential problem that VSCode is helpfully highlighting for me?

Community
  • 1
  • 1
Drenai
  • 11,315
  • 9
  • 48
  • 82

1 Answers1

1

I recently ran into the same issue. I don't have a solution, but they're aware of it. Hopefully it'll be officially fixed soon.

https://github.com/Microsoft/vscode/issues/7002

Edit: This issue now appears to be fixed. Currently I have no errors using ">>>" and "/deep/" with VS Code version 1.16.1. But I would personally recommend using "::ng-deep" instead, even though all 3 are currently deprecated (but still supported by Angular).

Chris Moore
  • 475
  • 1
  • 5
  • 12