Gunter-
That worked! Putting this in the component did the trick...
encapsulation: ViewEncapsulation.None,
With that added, stylesheets do not get the injected attribute. Now I just
need to be sure to design the styles so that they don't interfere with
other components. Thank you!
On Thursday, February 18, 2016 at 10:31:39 AM UTC-5, Günter Zöchbauer wrote:
>
> 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.
