扩展html表单元素答案

【问题标题】：extending html form element扩展html表单元素
【发布时间】：2022-01-06 23:47:49
【问题描述】：

第一次尝试扩展特定的 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）。但是我做错了什么？

【问题讨论】：

仅供参考，Apple 浏览器将永远不支持自定义的内置元素（HTMLElement 除外）
heil safari，新的互联网爆炸者：-P

标签： javascript html dom custom-element

【解决方案1】：

<form is="my-form"> 是 自定义内置元素（扩展 HTMLFormElement）的正确 也是唯一表示法

<my-form> 是 自治元素（扩展 HTMLElement）的表示法

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

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

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

【讨论】：