Renderer2 selecting element by selectRootElement make it's content disappear

When trying to create a tab component using Renderer2 to select a tab element, and try to add some css class to change color for example for selected tab that is currently not selected, the HTML element disappear completely from DOM:

Here is the tab html template:

<div class="detail-nav">
    <div class="nav-item-1">
      <a routerLink="main-config" routerLinkActive="active" (click)=actionItem1()>
        <span>Main config</span>
      </a>
    </div>
    <div class="nav-item-2">
      <a routerLink="sub-config" routerLinkActive="active" (click)=actionItem2()>
        <span>Handling data</span>
      </a>
    </div>
    <div class="nav-item-3">
      <a routerLink="editing" routerLinkActive="active" (click)=actionItem3()>
        <span>Editing</span>
      </a>
    </div>
<div>

I've added some css to make the anchor tag have the same height as the parent div,

so when using Renderer2 as:

...

constructor(private route: ActivatedRoute, private renderer: Renderer2) {}

...

let elm = this.renderer.selectRootElement(".nav-item a");

this.renderer.addClass(elm, 'nav-item');

CSS:

.nav-item {
  background-color: LightBlue;
}

Then the achor tag disapears completly from the DOM when executing:

this.renderer.addClass(elm, 'nav-item');

is there any reason for this ?

may be the way selectRootElement works is the issue ?

any one has an idea on this ?

I've already verified in devtools that elm refers to the right element in debug mode by hovering the printed elm variable.

This is the default behavior of selectRootElement(). See Documentation

To preserve content pass a second (boolean) parameter like this:

let elm = this.renderer.selectRootElement(".nav-item a", true);