Angular: CSS class usage within innerHtml of a cell

I am fighting with this CSS issue, or angular, ... The problem is that the CSS class used in a DIV element of my table cell is ignored.

I copied the basic example of https://material.angular.io/components/table/examples as this is what I want to use.

within the css file I added:

.test-css { color: orange; }

then I modified the html template in order for one cell to call a method from my component class to get the innerHTML code:

<td mat-cell *matCellDef="let element" [innerHtml]="getInnerHtml(element)"</td>

The method looks like that:

public getInnerHtml(element) {
    return `<div class="test-css">${element.name}</div>`;
}

The name is not displayed in orange.

If I apply the the test-css to the cell itself in the component template:

<td mat-cell *matCellDef="let element" class="test-css [innerHtml]="getInnerHtml(element)"</td>

then the column correctly appear in orange.

If I change on the component encapsulation to None, it works but the overall table layout is completely disturbed. So I expect some issue in the way the innerHtml is interpreted.

Any idea if there is a way to solve it and to have the innerHtml correctly interpreted?

Thanks