15

在 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-buttonextends很明显button，为什么我们在使用的时候还要同时指定document.createElement()呢？我怀疑这是因为document.createElement()简单地创建了一个带有 syntax 的标签<button is="x-foo-button"></button>，这让我想到了下一个问题：

问题 4：is语法的意义何在？这样做的实际区别是什么：

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

和这个：

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

除了 1）第一种语法需要<button is="x-foo-button"></button>在文档中创建一个实例 2）第二种语法可以用于任何元素，而不仅仅是自定义元素的扩展？

4

1 回答 1

14

答案 1 明显的重复是因为您的示例非常简单。在真实的虚拟生活中，你会为registerElement.

带有自定义按钮的示例，单击时将显示一个弹出窗口：

//Custom method
function callback ()
{
    console.log( this + " {created}" )
    this.onclick = function ( event )
    {
        alert( this.id + " " + this.value )
    } 
}

//Type Extension
var newProto = Object.create( HTMLButtonElement.prototype )
newProto.createdCallback = callback
var XFooButtonExt = document.registerElement( 'x-foo-button', {
    prototype: newProto,
    extends: 'button'
} )

newProto不同于HTMLButtonElement's prototype。

使用以下 HTML 代码：

<button is="x-foo-button" id="Hello" value="World"> Hello </button>

单击它会在弹出窗口中显示“Hello World”。

答案 2 这extends: 'button'是一个语义指示，告诉浏览器提供的新原型实现了HTMLButtonElement接口。这就是为什么从继承自HTMLButtonElement. 相反，您可以从HTMLFormElement原型开始，但您必须重新实现HTMLButtonElement接口的所有属性和方法。

否则，元素行为将不正确。在上面的示例中，如果将一行替换为：

var newProto = Object.create( HTMLFormElement.prototype )

...单击它将失败，因为该属性value未在<form>元素中实现。

该属性id始终是正确的，因为它由HTMLElement接口提供，由每个元素（包括<form>）实现。

请注意，您可以添加缺少的属性，并将它们链接到attributeChangedCallback方法中的属性。

答案 3 你是对的。这保持了与将忽略第二个参数的旧浏览器的向后兼容性，仍然能够创建普通元素（<button>您的示例中的标准）。

答案 4自定义元素范式 背后有 2 个不同的概念：

  1. 如果要扩展标准 HTML 元素，请键入 Extensions ( Customized Built-in Elements )。
  2. 如果您想使用新名称定义自定义元素，则自定义标签（自治自定义元素）。

两者都是用相同的方法定义的registerElement。extends/is选项允许您选择其中之一。

该is语法仅适用于类型扩展，因此始终与extends选项相关联。

使用Type Extensions，您可以保留所扩展元素的所有语义：CSS 样式、内置行为（接口）、可访问性功能。向后兼容性是这种语法的另一个好处。

使用自定义标签，您会失去语义，并且您的自定义元素应该只实现HTMLElement接口，没有内置样式或行为。

更新：下一个示例（针对 Chrome 和 Opera）说明了Type Extension和Custom Tag之间的区别。

//Method
function callback() {
  this.textContent = this //Get the HTML semantics
  this.onclick = function(event) {
    try {
      var output = this.id + " "
      output += this.name        //works only with <button is=...>
    } 
    catch (e) {
      output += "a generic element"
    }
    alert(output)
  }
}

//Type Extension
var newProto = Object.create(HTMLButtonElement.prototype)
newProto.createdCallback = callback

var XFooButtonExt = document.registerElement('x-foo-button', {
  prototype: newProto,
  extends: 'button'
})

//Custom Tag
var newProto2 = Object.create(HTMLButtonElement.prototype)
newProto2.createdCallback = callback

var XFooButtonCust = document.registerElement('x-foo-button-2', {
  prototype: newProto2,
})
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Custom Elements</title>
</head>

<body>
  <h3>Type Extension</h3>
  <button is="x-foo-button" id="I'm" name="a button">Type Extension</button>
  <h3>Custom Tag</h3>
  <x-foo-button-2 id="I'm" name="a button">Custom Tag</x-foo-button-2>
</body>

</html>

于 2015-12-08T13:38:48.160 回答