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

Question

我希望有一个语义命名的自定义元素，从按钮扩展:比如fab-button

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

为HTMLButtonElement进行扩展似乎不起作用。

有没有一种方法可以从HyperHTML的非HTMLElement扩展到"document-register-element.js“呢？

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

Answer 1

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

然而，TL;DR的解决方案，就在这里，但它需要很多解释。

扩展内置是网络规范中的一个幽灵。

无论是什么WHATWG说，内置是一个事实上的死亡规范，因为Webkit强烈反对它，火狐，以及边缘，甚至从来没有发布自定义元素，也没有推动他们。

因此，作为起点，不鼓励使用自定义元素V1规范扩展内置。

不过，您可能对V0很幸运，但这只是Chrome，它已经是为死而创建的API之一(R.I.P. WebSQL)。

我的填充按定义遵循规范

该文档注册元素填充，出生与V0，但经过V1修改，遵循的规格尽可能接近，这就是为什么它使扩展内置成为可能，因为WHATWG仍然有这一部分。

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

不是通过定义一个扩展HTMLButtonElement的简单类来获得一个按钮，您至少需要做三件额外的事情：

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

..。而且. 允许多边形填充工作

// 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个bug，还有3个关于自定义元素初始化的不一致行为，但您最好的选择是，一旦调用了connectedCallback，您实际上就拥有了自定义元素节点内容。

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

通过这种方式，您可以确定组件曾经在DOM上运行过，而不是在甚至连内容都没有上。

我希望我已经以同样的方式回答了您的问题，如果这是一个新项目的开始，请不要使用自定义元素内置:不幸的是，它们对您的应用程序的未来并不是一个安全的赌注。

诚挚的问候。