bug(SORT): Not possible to style sorting component

[timneil]

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

The table component allows for styling of columns of data. There is an example of doing so in the documentation. https://material.angular.io/components/table/overview#styling-columns

However if you add the Sort component the headers do not have the table's\host component's styles applied.

Reproduction

StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-idfyon?file=src%2Fapp%2Ftable-example%2Ftable-example.component.css

Expected Behavior

With component encapsulation set to emulate the Sort component elements do not recieve the host components attribute (ie. ng-tns-c1137168538). The text for the clickable sortable header should be projected content so it gains the styles of the host component while still being clickable\sortable.

Actual Behavior

Header text does not have styles.

Environment

• Angular: 17
• CDK/Material: 17
• Browser(s): All
• Operating System (e.g. Windows, macOS, Ubuntu): n/a

[amysorto]

You can have a more specific selector to target the header cells:

.mat-mdc-table th.mat-mdc-header-cell {
  color: pink;
}

[timneil]

In the example in Stackblitz the sortable headers are pink when they should be the color within the table-example.component.css.

The example is showing how the sortable component does not take on the host component styles. This is the problem I am highlighting.

None of the headers should be pink.

[amysorto]

Ahh yes, thanks for the clarification. I will reopen this issue!