title: Angular styles defined in component does not apply
body: <p>In my project when I define this style in angular component</p>
  <p><code>   span.highlighted:first-of-type { background-color: pink; }</code></p>
  <p>This does not apply on HTML. But when I define the above style in <code>Global styles.css </code>file it apply on the component. I am not sure what might be the reason. How can I solve this issue?</p>
  <p>html</p>
  <pre><code>    &lt;table&gt;
             &lt;tr&gt;
                 &lt;td [innerHTML]='dataToSave.replaceHTML' #term&gt;&lt;/td&gt;
              &lt;/tr&gt;
      &lt;/table&gt;  
  </code></pre>
  <p>ts</p>
  <pre><code>   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, `&lt;span class = &quot;highlighted data-${match}&quot;&gt;${match}&lt;/span&gt;`);
    }
    return value;
  }
  </code></pre>