I tried use
@Component({
selector: 'about',
template: './about.hmtl',
styles: ['.block {background-color: red} ...'] // <-- This will generate css modules
})
This works fine, angular expands every class with attribute selector and give every DOM element unique attribute. But will application load fast when will be a lot of css modules(for example 20 components and about 100 lines CSS code for every component)?
When it comes to component css you don't want to have any duplication, it duplication and its a pain to maintain. Would recommend that you find the top most component or the parent component that contains all the child component you want to style and define your styles one. Use an external file or define them inline its up to you. Then within the component decorator set the encapsulation property to ViewEncapsulation.None that will mean that all the child component will inherit the parent components styles and you can maintain one bit of css rather than having it all over the place.
