I wonder what is a good practice of styling elements inside of child components from parent component level. I generally do it in 2 different aproaches:
1.Using /deep/ Plunker
Benefits:
- Less code
- We use only css to style elements
Disadvantages:
- We cannot use properties from typescript like in a 2nd approach
- We break component hermetization
2.Using input in child component Plunker
Benefits:
- We can use properties from typescript
- We don't break component hermetization
Disadvantages:
- More code and complicated - the deeper child, the more passes
- We sometimes don't need logic - but we are forced to write in .ts instead of using pure css mechanism
As you can see I have found pros and cons for both ways. I feel like answer might be "It depends" or maybe I miss another approach.