How to add identifiers to html elements for test automation

Hi all,

for automation purposes we need to add an identifier to each interactable element.
Below is our first attempt. We added id=“login.email” to ion-input. But in order for it to work with Selenium the id must be set on the enclosed input element.

<ion-input _ngcontent-lnx-c185="" class="email-input ng-untouched ng-valid sc-ion-input-md-h sc-ion-input-md-s md hydrated has-focus has-value ng-dirty ion-untouched ion-valid ion-dirty" id="login.email">
  <input class="native-input sc-ion-input-md" aria-labelledby="ion-input-0-lbl" autocapitalize="off" autocomplete="off" autocorrect="off" name="ion-input-0" placeholder="Enter email address" type="text">
</ion-input>

Is it possible make an attribute appear on inner elements of an Ionic component? How? Other suggestions?

Thanks in advance,
Adrian.