Use ionic components in stencil

@lhk wrote:

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

Posts: 1

Participants: 1

Read full topic