fix(popover): dynamic width popover is positioned correctly (#28072)

Issue number: resolves #27190, resolves #24780

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Popovers with dynamic widths were not being positioned correctly
relative to the trigger element. This was happening because the child
component always had dimensions of 0 x 0. Ionic has logic built-in to
wait for the child components to be rendered, but this was not working
as intended for two reasons:

1. `this.usersElement` was referencing the popover element itself not
the user’s component. When calling `deepReady` on
01fc9b4511/core/src/components/popover/popover.tsx (L477)
we are waiting for the popover to be hydrated, not the child content.
The popover was already hydrated on page load, so this resolves
immediately. However, the child content that was just added to the DOM
has not yet been hydrated, so we aren’t waiting long enough.

This is happening because we return `BaseComponent `from
`attachComponent` which is a reference to the overlay:
01fc9b4511/core/src/utils/framework-delegate.ts (L133)

Other framework delegates return the actual child content:

- Core delegate with controller:
01fc9b4511/core/src/utils/framework-delegate.ts (L35)
(this is part of why the controller popover works but the inline popover
does not)
- React delegate:
01fc9b4511/packages/react/src/framework-delegate.tsx (L31)
- Vue delegate:
01fc9b4511/packages/vue/src/framework-delegate.ts (L45)

2. `attachComponent` is unable to return the correct element currently
because the child content has not been mounted yet in this scenario.
`ionMount` is emitted after `attachComponent` resolves:
01fc9b4511/core/src/components/popover/popover.tsx (L466)

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- `ionMount` is emitted before `attachComponent` runs
- `attachComponent` now consistently returns the child view if present
in the DOM
- Added a test

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev build: `7.3.2-dev.11693321763.15a54694`

---------

Co-authored-by: ionitron <hi@ionicframework.com>

core/src/utils/framework-delegate.ts

@@ -56,6 +56,7 @@ export const CoreDelegate = () => {
     cssClasses: string[] = []
   ) => {
     BaseComponent = parentElement;
+    let ChildComponent;
     /**
      * If passing in a component via the `component` props
      * we need to append it inside of our overlay component.
@@ -87,6 +88,8 @@ export const CoreDelegate = () => {
        */
       BaseComponent.appendChild(el);
 
+      ChildComponent = el;
+
       await new Promise((resolve) => componentOnReady(el, resolve));
     } else if (
       BaseComponent.children.length > 0 &&
@@ -96,7 +99,7 @@ export const CoreDelegate = () => {
        * The delegate host wrapper el is only needed for modals and popovers
        * because they allow the dev to provide custom content to the overlay.
        */
-      const root = BaseComponent.children[0] as HTMLElement;
+      const root = (ChildComponent = BaseComponent.children[0] as HTMLElement);
       if (!root.classList.contains('ion-delegate-host')) {
         /**
          * If the root element is not a delegate host, it means
@@ -111,6 +114,13 @@ export const CoreDelegate = () => {
         el.append(...BaseComponent.children);
         // Append the new parent element to the original parent element.
         BaseComponent.appendChild(el);
+
+        /**
+         * Update the ChildComponent to be the
+         * newly created div in the event that one
+         * does not already exist.
+         */
+        ChildComponent = el;
       }
     }
 
@@ -130,7 +140,18 @@ export const CoreDelegate = () => {
 
     app.appendChild(BaseComponent);
 
-    return BaseComponent;
+    /**
+     * We return the child component rather than the overlay
+     * reference itself since modal and popover will
+     * use this to wait for any Ionic components in the child view
+     * to be ready (i.e. componentOnReady) when using the
+     * lazy loaded component bundle.
+     *
+     * However, we fall back to returning BaseComponent
+     * in the event that a modal or popover is presented
+     * with no child content.
+     */
+    return ChildComponent ?? BaseComponent;
   };
 
   const removeViewFromDom = () => {