Through some painful troubleshooting, I found that when you add css to a
component, Angular 2 puts the css in the page head, but adds a more
specific css selector to all css tags. For example, if your component css
has ".redhot { color: red };" Angular 2 will add that css to head as
".redhot[_ngcontent-clq-2] { color: red };" (note that the 'clq' part seems
to be randomly generated). And then Angular 2 adds an attribute to (maybe)
all DOM elements of the component to match. In other words, your <input
id="myinput" class="redhot"> becomes <input id="myinput" class="redhot"
_ngcontent-clq-2>. The bracket syntax in the stylesheet will only select
elements with class of "redhot" *that also have the attribute
_ngcontent-clq-2*. That is all fine and well... until the component itself
adds DOM elements apart from Angular. Those elements won't have the added
attribute, and therefor won't match to any of the styles. For this reason,
I've had to migrate some styles outside the component stylesheet and into
index.html (or whatever hosts your components).
I don't know exactly when the 'new DOM elements which are missing Angular's
injected attribute' problem occurs. It occurred for me when using Twitter
Typeahead's control inside an Angular 2 component. I don't know if it
happens when jQuery comes in the picture, or when elements are added to the
shadow DOM (I am not very familiar with shadow DOM). But I do know it is a
bit of a problem. Can anyone shed some insight into the attribute
injection and how to elegantly address the problem?
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
