相关疑难解决方法(0)

在Web组件中,要注册元素,只需键入:

var XFoo = document.registerElement('x-foo', {
  prototype: Object.create(HTMLElement.prototype)
});

要创建元素,您可以执行以下操作之一:

<x-foo></x-foo>

var xFoo = new XFoo();
document.body.appendChild(xFoo);

var xFoo = document.createElement( 'x-foo')
document.body.appendChild(xFoo);

这一切都很好,花花公子.当您谈论扩展现有元素时,问题就开始了.

var XFooButton = document.registerElement('x-foo-button', {
  prototype: Object.create(HTMLButtonElement.prototype),
  extends: 'button'
});

问题1:为什么重复？在这里,'button'应该足够了(特别是因为它很容易计算元素的原型Object.getPrototypeOf(document.createElement(tag));

问题2:内部如何使用该信息？例如,如果您拥有prototype: Object.create(HTMLFormElement.prototype和extends: 'button'(后面的内容extends与原型传递不匹配)会发生什么

要创建一个,您可以执行以下操作之一:

<button is="x-foo-button"></button>

var xFooButton = new XFooButton();
document.body.appendChild(xFoo);

var xFooButton = document.createElement('button', 'x-foo-button');
document.body.appendChild(xFooButton);

问题3:因为很明显x-foo-button扩展了button,为什么我们在使用时必须指定它们document.createElement()？我怀疑那是因为document.createElement()只是创建一个带语法的标签<button is="x-foo-button"></button>,这让我想到了下一个问题:

问题4 …

考虑我想扩展native button元素,并创建自己的super-button元素.据我所知,它必须遵循以下模式:

var SuperButton = document.registerElement('super-button', {
  prototype: Object.create(HTMLButtonElement.prototype),
  extends: 'button'
});

它看起来很奇怪 - 不是prototype和extends参数说同样的事情吗？如果我明确地说我super-button使用HTMLButtonElement原型,为什么我还需要指定它扩展了按钮元素？这不是多余的吗？对我来说,它看起来完全相同的信息.