为什么我无法访问自定义组件方法？

Question

您好我已经使用方法创建了自定义Web组件。在我在DOM中查询此元素然后尝试调用此方法之后，它会抛出错误。

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

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

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

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

在另一个组件模板中，我有<my-popup></my-popup>，我想这样做：

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

这确实正确地选择了元素，但是这个元素没有show方法，为什么？

Uncaught TypeError: popup.show is not a function

console.log(popup.show)显示未定义

如果有人有兴趣查看完整设置，GitHub上会提供完整的源代码。 @WebComponent只需define并覆盖connectedCallback并在方法的开头添加模板/样式节点。