扩展 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）[=16] =]

<my-form> 是 Autonomous Element（扩展 HTMLElement）

的表示法

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

HTMLFormElement 没有 connectedCallback 方法；这就是为什么在 super 元素上调用该方法时出现错误的原因。

如果您从 HTMLFormElement 扩展并使用 <my-form> 它与您的定义没有任何关系；您创建了一个 HTMLUnknownElement，默认情况下是一个 HTMLElement。

扩展 html 表单元素

extending html form element

javascript

html

dom

custom-element