Why cant hyperscript find the function attached as a property?

[shirecoding]

I have the following inside a web component, it seems quite hard to get hyperscript to find the functions defined on the element. i only seem to be able to get it to find global functions

class WalletProvider extends HTMLElement {
...
...
this.innerHTML = `
        <button id="connect-wallet-button" script="
          on click
            call connectWallet() <------------------- hyperscript cant find this
            set my innerHTML to 'Connected'
          catch err
            set my innerHTML to 'Connect Wallet'
          end
        ">Connect Wallet</button>
      `;

      this.querySelector("#connect-wallet-button").connectWallet =
        this.connectWallet.bind(this);<------------------ i've also made sure to add the function to the button

...
...

async connectWallet() {
      const resp = await this.wallet.connect();
      const publicKey = resp.publicKey.toString();
      console.log(`Connected phantom wallet, your public key is ${publicKey}`);
    }

[svenberkvens]

Perhaps you need to tell hyperscript that it needs to find the function on the element. Maybe call me.connectWallet() will work?