第一次嘗試擴展特定的 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）。但我做錯了什么？
uj5u.com熱心網友回復：
<form is="my-form">是自定義內置元素的正確且唯一的表示法（擴展 HTMLFormElement）
<my-form>是自治元素的表示法（擴展 HTMLElement）
后者是 Safari 中唯一支持的自定義元素版本。自 2016 年以來，Apple 一直表示他們將永遠不會實施自定義內置元素。
HTMLFormElement沒有connectedCallback方法；這就是為什么在superElement上呼叫該方法時會出錯的原因。
如果您從 HTMLFormElement 擴展并使用<my-form>它，則與您的定義無關；您創建一個 HTMLUnknownElement，默認情況下它是一個 HTMLElement。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/375222.html
標籤：javascript html dom 自定义元素