feat: Support element references for inline overlays using triggers

[sean-perkins]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

The current usage pattern for inline overlays is to use a trigger, which is a string of the ID to the corresponding element, that when clicked, presents the overlay.

e.g.:

<ion-button id="trigger-button">Click me</ion-button>
<ion-modal trigger="trigger-button"></ion-modal>

I propose that this API should additionally accept element references, so that framework implementations can pass a reference to an element without having to specify an id.

Describe the Use Case

Frameworks often use references to elements instead of doing direct look-ups with an id. Ionic should follow patterns that align with framework implementations.

Having this alternative API support, allows developers to avoid naming conflicts with ids in their DOM. This avoids the trigger accidentally attaching to the incorrect element.

Describe Preferred Solution

The trigger property should be updated to accept both a string and HTMLElement.

Angular

<ion-button #triggerButton>Click me</ion-button>
<ion-modal [trigger]="triggerButton"></ion-modal>

React

<IonButton ref={triggerButton}>Click me</IonButton>
<IonModal trigger={triggerButton}></IonModal>

Vue

<ion-button ref="triggerButton">Click me</ion-button>
<ion-modal :trigger="$refs.triggerButton"></ion-modal>

Describe Alternatives

No response

Related Code

No response

Additional Information

Please 👍 this feature request if you would like to see this change made to Ionic Framework.