Bug Report

Ionic version:
[ ] 4.x
[x] 5.x

Current behavior:

When setting an id on a select component we are getting following error with version 5.5.1:

Error: Failed to execute ‘querySelector’ on ‘Document’: ‘label[for=123456]’ is not a valid selector.

The ion-select is not correctly rendered.

Expected behavior:

Before 5.5.1 there was no error and the ion-select was rendered correctly. Some libraries (eg. ngx-formly) are using these ids.

Steps to reproduce:

Run the stackblitz example or create an ion-select with an id.

https://stackblitz.com/edit/ionic-v5-component-id-error?file=src/app/tab1/tab1.page.html

<ion-item>
  <ion-select
    id="123456"
    [(ngModel)]="model"
    placeholder="Test"
    interface="alert"
  >
    <ion-select-option> Test1 </ion-select-option>
    <ion-select-option> Test2 </ion-select-option>
    <ion-select-option> Test3 </ion-select-option>
    <ion-select-option> Test4 </ion-select-option>
  </ion-select>
</ion-item>

Related code:

Following line throws the error:

https://github.com/ionic-team/ionic-framework/blob/master/core/src/utils/helpers.ts#L150