Question

我希望有一个语义命名的自定义元素，它从按钮延伸：如fab-button

class FabButton extends HTMLButtonElement {
    constructor() {
        super();
        this.html = hyperHTML.bind(this);
    }
}
customElements.define("fab-button", FabButton);

扩展HTMLButtonElement似乎无法正常工作。

有没有办法从非HTMLElement扩展到HyperHTML＆＃34; document-register-element.js＆＃34;？

Codepen示例： https://codepen.io/jovdb/pen/qoRare

Answer 1

很难回答这个问题，因为很难理解从哪里开始。

TL; DR解决方案，is here，但它需要很多解释。

扩展内置插件是Web规范中的一个重要内容

什么是WHATWG says并不重要，内置插件是事实上的死亡规范，因为Webkit强烈反对它和Firefox，以及Edge，甚至从未发布自定义元素，没有＆＃ 39;不要推它们。

因此，作为起点，我们不鼓励使用Custom Elements V1规范扩展内置函数。

虽然您可能会对V0感到满意，但这只是Chrome API，它已经是为死而创建的API之一（R.I.P. WebSQL）。

我的polyfill按照定义遵循规范

文档寄存器元素polyfill，与V0一起生成，但是用V1进行了修改，遵循尽可能接近的规范，这就是为什么它可以扩展内置函数，因为WHATWG仍然有这个部分。

这也意味着您需要了解扩展内置函数的工作原理。

不是通过定义一个扩展HTMLButtonElement的简单类，你得到一个按钮，你需要至少做三件事：

// define via the whole signature
customElements.define(
  "fab-button",
  FabButton,
  {extends: 'button'}
);

......还有...... allow the polyfill to work

// constructor might receive an instance
// and such instance is the upgraded one
constructor(...args) {
    const self = super(...args);
    self.html = hyperHTML.bind(self);
    return self;
}

和最重要的，它在页面上的最基本表示就像这样

<button is="fab-button">+</button>

请记住，ES6类super(...args)将始终返回当前上下文。在那里授予超级构造函数并没有将其他实例作为升级对象返回。

构造函数不是你的朋友

听起来很苛刻，自定义元素构造函数仅适用于Shadow DOM和addEventListener，但实际上没有其他内容。

创建元素时尚未升级。事实上，它很可能不会升级。

每个浏览器至少存在2个错误，以及3个关于自定义元素初始化的不一致行为，但最好的办法是，一旦调用connectedCallback，您就会拥有自定义元素节点内容。

connectedCallback() {
  this.slots = [...this.childNodes];
  this.render();
}

通过这种方式，您确定实际在DOM上实时渲染组件，而不是there is not even a content时。

我希望我已经以一种警告的方式回答了你的问题，如果这是新项目的开始，它也会警告你不要使用内置的自定义元素：不幸的是，它们不是一个安全的选择。你的申请的未来。

最诚挚的问候。

如何创建从HTMLButtonElement扩展的HyperHTML自定义元素

1 个答案: