IntroJS element selection does not work with angular components

[FilipHrmo]

I have created a tour, added step and ids to elements. But a element that is nested in, is an angular component or is from a library that is for angular will not be highlighted.

This is my tour:

this.introJS.setOptions({
      tooltipClass: 'customTooltip',
      highlightClass: 'customHighlight',
      exitOnOverlayClick: false,
      disableInteraction: false,
      steps: [
        {
          intro: 'Welcome to the web let me show you around!',
        },
        {
          element: '#step2',
          intro: 'Go to Home',
          position: 'right'
        },
        {
          element: document.getElementById('step3'),
          intro: 'Fill out the form',
          position: 'right'
        },
        {
          element: document.querySelector('#step4'),
          intro: 'Click Create an account',
          position: 'right'
        }
      ]
    }).start();

This is the html:

<div>
  <mat-card>
    <mat-card-content>
      <form id="step3" [formGroup]="testForm">
        <h3>test</h3>
          <mat-form-field appearance="outline">
            <mat-label>label</mat-label>
            <mat-select formControlName="role">
              <mat-option>1</mat-option>
            </mat-select>
          </mat-form-field>
      </form>
    </mat-card-content>
  </mat-card>
</div>

This is what the tip looks like:

It's in the centre and doesn't highlight anything