如何在JavaScript Web Components中调用方法？按钮点击无响应求助

你的代码问题出在onclick="${this.sayHello}"这一行：

• 当你通过模板字符串插入this.sayHello时，实际是将函数的字符串形式（比如function sayHello() { alert('Hello') }）赋值给了按钮的onclick属性。浏览器会尝试在全局作用域执行这段字符串，但sayHello是组件类的实例方法，并非全局函数，所以点击按钮时找不到该方法。
• 退一步说，就算能找到函数，此时this的指向会变成按钮元素本身，而不是TestElement的实例，也无法正确调用组件内的方法。

方案一：使用事件监听器（推荐） #

这种方式是Web Components的标准写法，能正确保留组件实例的上下文，还方便后续管理事件：

class TestElement extends HTMLElement {
  constructor() {
    super();
  }

  sayHello() {
    alert('Hello');
  }

  connectedCallback() {
    const button = document.createElement('button');
    button.textContent = 'Hello';
    // 用箭头函数绑定组件实例的this
    button.addEventListener('click', () => this.sayHello());
    // 也可以用bind方法：button.addEventListener('click', this.sayHello.bind(this));
    this.appendChild(button);
  }
}

customElements.define('test-element', TestElement);

方案二：通过全局引用绑定（不推荐，仅作参考） #

如果一定要用innerHTML的方式，可以将组件实例挂载到全局，再通过全局引用调用方法，但需要注意清理全局引用避免内存泄漏：

class TestElement extends HTMLElement {
  constructor() {
    super();
    // 生成唯一ID标识当前组件实例
    this.instanceId = 'test-' + Math.random().toString(36).slice(2);
    // 将实例挂载到全局对象
    window[this.instanceId] = this;
  }

  sayHello() {
    alert('Hello');
  }

  connectedCallback() {
    this.innerHTML = `<button onclick="window['${this.instanceId}'].sayHello()">Hello</button>`;
  }

  // 组件销毁时清理全局引用
  disconnectedCallback() {
    delete window[this.instanceId];
  }
}

customElements.define('test-element', TestElement);

内容的提问来源于stack exchange，提问作者Moe