- In fact, there are three ways to associate CSS styles to a component in Angular: Component inline styles, style urls and template inline styles.
- But not only that, when Angular fetches the style resources, it takes the text response, inlines and appends them after all component inline styles.
- So if we would have a configuration like this:
And the content would look like this:
We will end up with a document head that looks something like this:
This also brings us to the next conclusion that styles defined in style urls will always be appended and therefore override styles defined in the component, unless the inline styles don’t have a higher specificity.
- In fact, when thinking in Web Components it’s quite common to put styles directly into the template of a component, since they will be encapsulated when Shadow DOM is used.
- Translating the styles used above to template inline styles would look something like this (in case of our zippy component):
Guess what, also those will be appended in the head of our document, after the ones defined in the component or as style urls.
Who do you think would benefit most from this? Styling Angular 2 components > https://t.co/xCBVh0OWbZ
— AngularJS News (@AngularJS_News) July 29, 2017
Tweets by PascalPrecht
Tweets by timche_
Tweets by tim_hartmann_