Which @angular/* package(s) are the source of the bug?

core

Is this a regression?

No

Description

APP_ID is not escaped despite being included in a CSS selector, meaning if it includes special syntax known to CSS it can confuse the selector.

For example, providing:

{
  provide: APP_ID,
  useValue: 'foo:bar',
}

Generates the following DOM:

<h1 _ngcontent-foo:bar-c2846697727="" class="foo">Hello from Angular!</h1>

Which is actually ok, : is valid in this context. But the CSS is not:

.foo[_ngcontent-foo:bar-c2846697727] { /* ... */ }

This is invalid because : triggers a pseudo-class in the middle of an attribute selector. Ideally, we should escape this with CSS.escape, though a similar problem exists with the attribute name itself. For example, foo bar triggers

InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': '_nghost-foo bar-c2846697727' is not a valid attribute name.

I'm not sure you really can escape a space from an attribute name, so we might just have to ban that (and any other invalid characters such as >) altogether.

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/stackblitz-starters-74rnmosz?description=An%20angular-cli%20project%20based%20on%20@angular/animations,%20@angular/common,%20@angular/compiler,%20@angular/core,%20@angular/forms,%20@angular/platform-browser,%20@angular/platform-browser-dynamic,%20@angular/router,%20core-js,%20rxjs,%20tslib%20and%20zone.js&file=src%2Fmain.ts&template=node&title=Angular%20Starter

Please provide the exception or error you saw

Please provide the environment you discovered this bug in (run ng version)

Anything else?

No response