By default Angular doesn't use shadow DOM (only when you set
`encapsulation: ViewEncapsulation.Native` and the browser supports shadow
DOM.
I think there was an issue reported recently covering that problem.
You can try if setting `ViewEncapsulation.None` gets rid of the
`_ng_content...` classes.
On Tuesday, February 16, 2016 at 6:49:29 PM UTC+1, KN wrote:
>
> 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.
