Is it possible to change the attribute names used in emulated view encapsulation
it is possible in angular (2+) to change or define rules for attribute names used in encapsulation with emulated view.
HTML:
<hero-details _nghost-pmm-5>
<h2 _ngcontent-pmm-5>Mister Fantastic</h2>
<hero-team _ngcontent-pmm-5 _nghost-pmm-6>
<h3 _ngcontent-pmm-6>Team</h3>
</hero-team>
</hero-detail>
CSS
[_nghost-pmm-5] {
display: block;
border: 1px solid black;
}
h3[_ngcontent-pmm-6] {
background-color: white;
border: 1px solid #777;
}
So, for example _nghost-pmm-5
will there be _nghost-xyz-5
or something that I can define?
Thanks everyone!
source to share
Here is a possible solution, which involves modifying the main @ angular dependency code: manually update the contents of the variable CONTENT_ATTR
.
Find the files under:
- node_modules / @ angular / browser frameworks / @ angular /
- node_modules / @ angular / compiler / @ angular /
Then find / replace its value for the one you want. These variables are used when angular compiles the application.
However, keep in mind that removing or updating your dependencies with npm-install
will overwrite all your changes.
It works great for me in a dev environment, but I can't guarantee it will work in production.
source to share