相关疑难解决方法(0)

我正在尝试从谷歌开发者网站的例子,我得到错误:"TypeError:非法的构造函数.有什么问题,如何解决它？

class FancyButton extends HTMLButtonElement {
  constructor() {
    super(); // always call super() first in the ctor.
    this.addEventListener('click', e => this.drawRipple(e.offsetX,e.offsetY));
  }

  // Material design ripple animation.
  drawRipple(x, y) {
    let div = document.createElement('div');
    div.classList.add('ripple');
    this.appendChild(div);
    //    div.style.top = `${y - div.clientHeight/2}px`;
    //    div.style.left = `${x - div.clientWidth/2}px`;
    div.style.backgroundColor = 'currentColor';
    div.classList.add('run');
    div.addEventListener('transitionend', e => div.remove());
  }
}

customElements.define('fancy-button', FancyButton, {extends: 'button'});
let button = new FancyButton();
button.textContent = 'Fancy button!';
button.disabled = true;

我正在尝试使用纯 javascript Web 组件进行无框架工作。我希望我的 Web 组件能够独立工作并在不同的站点上使用，但我也希望两个组件能够进行通信。因此它们应该能够在不紧密耦合的情况下进行通信。

当我使用 Angular 时，这很容易。我可以通过 HTML 属性将对象传递给组件，并且组件将其作为对象而不是字符串接收。但在纯 JavaScript 中，属性始终是字符串。传递对象或以其他方式使 Web 组件相互了解并能够进行通信的正确方法是什么？