扩展html表单元素

Question

第一次尝试扩展特定的 html 元素，在我的例子中是一个表单。我对源自 HTMLElement 的“普通”自定义元素/Web 组件有一些经验。

用于演示目的的基本代码：

customElements.define('my-form', class extends HTMLFormElement {
    constructor() {
        console.log('my-form()');
        super();
    }

    connectedCallback() {
        console.log('my-form::cc()');
        super.connectedCallback();
    }
}, {extends: 'form'});

如果我将新元素插入为

<my-form>[form content]</my-form>

，则该元素将是

HTMLElement

的实例，而不是派生它的

HTMLFormElement

的实例。为什么？

constructor()

和

connectedCallback()

中的代码也永远不会被调用。为什么 ？它绝对不是一种形式，因为它没有 .elements 属性。

使用

 <form is="my-form">

似乎以某种方式工作，调用构造函数和 cc() ，该对象是

HTMLFormElement

的实例，我得到的唯一错误是

TypeError: (intermediate value).connectedCallback is not a function at HTMLFormElement.connectedCallback.

坦率地说，我更喜欢第一个选项（因为在第二个选项中我无法使用自定义属性并将其称为有效的 html）。但我做错了什么？

Answer 1

<form is="my-form">

是自定义内置元素（扩展 HTMLFormElement） 的正确且唯一

表示法

<my-form>

是自治元素（扩展 HTMLElement）

后者是 Safari 中唯一支持的自定义元素版本。 Apple 自 2016 年起就表示他们永远不会实现定制内置元素。

HTMLFormElement

没有

connectedCallback

方法；这就是为什么当您在

super

元素上调用该方法时会收到错误。

如果您从 HTMLFormElement 扩展并使用

<my-form>

，它与您的定义没有任何关系；您创建一个 HTMLUnknownElement，默认情况下是 HTMLElement。

所以一般建议

坚持使用自治元素

extends from HTMLElement

（除非你想永远更新自己的polyfill）