Why can't I access my custom component method?

Hi I have created custom web component, with a method. And after I Query for this element in DOM and then try to call this method it throws error.

export class Popup extends HTMLElement {
    constructor() {
        super();

        this.show = this.show.bind(this);
    }

    show() {
        console.log('Works!');
    }
}

customElements.define('my-popup', Popup);

In the other component template I have: <my-popup></my-popup> and I want to do:

  const popup = this.querySelector('my-popup');
  popup.show();

this does select the element correctly, but this element does not have show method, why ?

Uncaught TypeError: popup.show is not a function

console.log(popup.show) displays Undefined

Full source code is available on GitHub if anyone is interested in taking look at the full setup. @WebComponent simply define and overrides connectedCallback and add template/styles nodes at the beggining of method.