Use ionic components in stencil

I would like to create a custom web component with stencil, based on the ionic components.

As a starting point, I would like to create a minimal example with a popover.
So I created a stencil project, based on the ‘components’ starter template, installed ionic and added import '@ionic/core' to my component.
Now it is possible to use ionic web components in the jsx, I’ve tried it with a simple button:
<ion-button>click me</ion-button>. This works, there is now a blue button :slight_smile:

(For the development, I’m running npm run build and hosting the www folder with npm serve)

The next step would be to add a popover and to wire it to the button. While the react component IonPopover has a convenient isOpen prop, the ion-popover web component seems to have an imperative API:

If I understand this correctly, I need to get a reference to the dom element of the popover and call present() on it. This is the code I’ve created:

import { Component, Listen, h } from "@stencil/core";
import "@ionic/core";

@Component({
  tag: "my-component",
  styleUrl: "my-component.css",
  shadow: true
})
export class MyComponent {
  @Listen("click", { capture: true })
  handleClick() {
    console.log("click");
    (document.getElementById("popover") as any).present();
  }

  render() {
    return (
      <div>
        <ion-popover id="popover" component={<p>popover text</p>}></ion-popover>
        <ion-button>click me</ion-button>
      </div>
    );
  }
}

The click event is captured correctly, but it doesn’t find the popover element. The web console logs an error:
TypeError: document.getElementById(...) is null

Also, is there a way to get Typescript to play along with this? I would like to get autocompletion for the imperative API of the ionic web components. It seems to work for the jsx markup, since it automatically suggests events such as onIonPopoverDismissed