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 
(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