Question

我正在尝试使用define的{{1}}方法定义自定义HTML元素。

（https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define）

在MDN的示例中，他们使用ES6-Class，并将其传递给CustomElementRegistry作为第二个参数。

由于ES6-Class只是原型模式的语法糖，所以我想尝试使用直接使用原型的经典构造函数定义自定义元素。

因此，我创建了两个示例。一个正在工作（基于类），另一个不在工作（基于原型）。

此示例有效：

CustomElementRegistry.define

此示例不起作用：

class MyElement extends HTMLElement  {
  test() {
    console.log('This is a test!');
  }
}

customElements.define('my-element', MyElement);

const myElement = new MyElement();
myElement.textContent = 'Hello World!';

document.body.appendChild(myElement);

第二个示例引发错误function MyElement() { } MyElement.prototype = Object.create(HTMLElement.prototype); MyElement.prototype.constructor = MyElement; MyElement.prototype.test = function () { console.log('This is a test!'); }; customElements.define('my-element', MyElement); const myElement = new MyElement(); myElement.textContent = 'Hello World!'; document.body.appendChild(myElement);。

所以看来TypeError: 'set textContent' called on an object that does not implement interface Node.的扩展在某种程度上只能使用Class来实现，而class不仅仅是句法糖。

使用经典Prototype继承的第二个示例不起作用的确切原因是什么？我错过了一点吗？

在不使用类但使用构造函数的情况下使用CustomElementRegistry.define

0 个答案: