Angular styles defined in component does not apply

Question

In my project when I define this style in angular component

span.highlighted:first-of-type { background-color: pink; }

This does not apply on HTML. But when I define the above style in Global styles.css file it apply on the component. I am not sure what might be the reason. How can I solve this issue?

html

    <table>
           <tr>
               <td [innerHTML]='dataToSave.replaceHTML' #term></td>
            </tr>
    </table>  

ts

   checkAndReturnData(silk: PowerWin | undefined) {
   const atom = document.createElement('span');
   atom.innerHTML = this.updateHTML(silk.first_name, silk.last_name);
   this.totalOccurrences = atom.querySelectorAll('.highlighted').length;
   this.updateButtonStates(atom);
   silk.replaceHTML = atom.innerHTML;
   this.dataToSave = silk;
}


updateHTML(value: any, last_name: any): string {
  const matcher = new RegExp(last_name, 'gi');
  const matches = Array.from(new Set(value.match(matcher)));
  if (!matches || matches.length === 0) return value;
  for (const match of matches) {
    value = value.replaceAll(match, `<span class = "highlighted data-${match}">${match}</span>`);
  }
  return value;
}

Answer 1

Try to use ::ng-deep before your css selector.

It allows your style to be visible in the global scope, as the documentation describe it;