Make possible to configurable style compiler constants

[Dok11]

I'm submitting a...

[x] Performance issue
[x] Feature request

Current behavior

Compiler variable and attr is constant.
https://github.com/angular/angular/blob/master/packages/compiler/src/style_compiler.ts#L16

const COMPONENT_VARIABLE = '%COMP%';
const HOST_ATTR = `_nghost-${COMPONENT_VARIABLE}`;
const CONTENT_ATTR = `_ngcontent-${COMPONENT_VARIABLE}`;

Expected behavior

Compiler variable and attr must have default values and possible to configurable.

What is the motivation / use case for changing the behavior?

Currently that constants is part of build js/css files and made files more large.
For example, statistics for my not very large project (main.bundle.ts 1 MB)

%COMP% - 1528 matches (9 168 bytes)
_nghost- - 332 matches (2 656 bytes)
_ngcontent- - 1195 matches (13 145 bytes)
Total - 24 969 excess bytes

But, maybe I konw what I do and can replace this constatns to ☺, ☻, ♥ (just for example).
This action will save 21 914 butes just for my example or more for bigger project with many css rules.

[waterplea]

I'm polyfilling CSS variables while on server using Angular Universal and server side rendering. After we switch from server generated HTML to live app — these variables change and server side pregenerated CSS is no longer applicable. During the time browser side polyfill kicks in I see flicker in styles.

Server side generated stuff is named _nghost-sc# and front end is _nghost-c# which makes polyfill not match the elements.

[adover]

@waterplea can you share that polyfill? I'm looking for a similar fix using AngularElements

[waterplea]

@adover I use https://github.com/jhildenbiddle/css-vars-ponyfill
It requires some mockups to get it to work in server environment, but overall it works pretty well with Angular. I used to have a wrapper service around it to support dynamic STYLE additions but the developer is very responsive and newer versions took everything I needed into account so its watch option now is all you really need to get it to work with Angular.

[angular-robot]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[angular-robot]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.