创建简单元素

Question

在custom elements页面中，我看到要扩展您执行的元素：

var XFooButtonPrototype = Object.create(HTMLButtonElement.prototype);
XFooButtonPrototype.createdCallback = function() {
  this.textContent = "I'm an x-foo button!";
};

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

然后在指南中，它说你可以写下一个元素：

<x-foo></x-foo>

或者：

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

问题：

为什么当元素显然是从extends: 'button'继承时指定HTMLButtonElement为重要（因为它的原型链中有HTMLButtonElement.prototype
如何建立button和x-foo-button之间的链接？由于x-foo-button is="x-foo-button"，extends: 'button'成为按钮的可能选项吗？内部＆＃34;会发生什么？＃/ p>
为什么选择<button is="x-foo-button"></button>而不是<x-foo></x-foo> ...？

[附录]

聚合物使我们免于重复：

MyInput = Polymer({
  is: 'my-input',
  extends: 'input',
  created: function() {
    this.style.border = '1px solid red';
  }
});

如果有extends，Polymer会将正确的原型放入Object.getPrototypeOf(document.createElement(tag));的链中。所以，推论问题：

为什么重复首先？如果有extends，浏览器是否应自动执行此操作？

Answer 1

您完全误解了扩展Web组件的工作原理。

创建简单元素

首先，这是注册新元素的方式：

            if (value10 > value11 && value11 > value12 || value12 > value11 && value11 > value10)
            Console.WriteLine("{0} is the middle value.", value11);

        else if (value11 > value12 && value12 > value10 || value10 > value12 && value12 > value11)
            Console.WriteLine("{0} is the middle value.", value12);

要创建元素，您可以执行以下操作之一：

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'
});

请注意，对于扩展自定义元素，在注册它们时，您必须同时指定原型（设置为<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);而不是HTMLButtonElement.prototype），和扩展标记名称（HTMLElement.prototype）。

此外，当您使用标记或extends: 'button'创建扩展元素时，还需要指定基本元素（createElement()）和扩展元素（button），

（注意：我知道我在回答自己）

Answer 2

我认为它的重要性在这里说：

警告已弃用的浏览器API方法 在这个问题中，使用.registerElement它被.defineElement替换并且Api已经改变

定义元素的当前方式

＆＃13;

class AppDrawer extends HTMLElement {
  constructor() {
    super()
    this.innerHTML = '<h1>UH</h1>'    
  }
}

window.customElements.define('app-drawer', AppDrawer);

// Or use an anonymous class if you don't want a named constructor in current scope.

window.customElements.define('app-drawer-noname', class extends HTMLElement {
  constructor() {
    super()
    this.innerHTML = '<h1>UH AH</h1>'    
  }
});

＆＃13;

Example - defining a mobile drawer panel, < app - drawer >:
Example usage:
<app-drawer></app-drawer>
<app-drawer-noname></app-drawer-noname>

＆＃13;

```

扩展Web组件中的HTML元素

2 个答案:

创建简单元素

创建扩展元素