bug(mat-text-column): Column-name based CSS ignored unless view encapsulation is disabled
- Lingua principale
- TypeScript
- Stelle
- 25k
- Fork
- 6.8k
- Merge medio
- 1g 8h
- PR unite (30g)
- 91
Descrizione
### Is this a regression?
- [ ] Yes, this behavior used to work in the previous version
### The previous version in which this bug was not present was
_No response_
### Description
May not technically be a bug, and more of an undocumented quirk.
There are two aspects to mat-table column definitions that lead to an unexpected conclusion:
- For a column named `foo`, you can define a `.mat-column-foo` style which will get applied to it.
- A `mat-text-column` named `foo` is shorthand for an explicit matColumnDef with sensible defaults for a text-only field.
However, if you define said style, and try to apply it to a mat-text-column, it won't match.
I supppose that technically, the affected th/td elements are no longer generated by the parent view, but by mat-text-node itself - and thus, those are outside the scope of view-encapsulated styles defined there.
The fix may not be trivial, but it might still be worth documenting as a gotcha.
### Reproduction
See StackBlitz [here](https://stackblitz.com/edit/components-issue-e4h1lq?file=src/app/example-component.ts). By making the component non-encapsulated, the style applies to both columns. Otherwise, it only matches the explicitly defined one, not the text-column.
### Expected Behavior
Styles affect matColumnDefs and mat-text-columns the same way.
### Actual Behavior
...they don't!
### Environment
Angular CLI: 13.3.5
Node: 14.17.6
Package Manager: yarn 1.22.15
OS: win32 x64
Angular: 13.3.6
Guida per i contributori
Apri la guida per i contributori
Direzione di ricerca
Inizia con la riproduzione StackBlitz collegata e ispeziona src/app/example-component.ts, confrontando la matColumnDef definita esplicitamente con la mat-text-column sotto view encapsulation. Conferma la discrepanza degli stili e determina se il risultato previsto è una correzione del componente o la documentazione del comportamento; il lavoro è completato quando entrambi i tipi di colonna ricevono stili equivalenti oppure la limitazione è documentata.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- angular, typescript
- Ambito
- frontend
- Tipo di issue
- Bug
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Stato di attività
- Ferma
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 38/100