HTMLInputElement
コンポーネントを拡張するカスタムコンポーネントを作成しようとしていますが、何もレンダリングされません。
class myInput extends HTMLInputElement {};
customElements.define('my-input', myInput, {
extends: 'input'
});
<my-input type="text"></my-input>
ここで何が欠けていますか?
すでに組み込まれている要素を拡張する正しい方法ではないため、期待どおりの結果は得られません。
MDNのドキュメントに記載されているように、DOMに組み込みタグを保持し、 is
属性に影響を与える必要があります。
スポット入力に焦点を当てて、以下のスニペットを見てください。
class spotInput extends HTMLInputElement {
constructor(...args) {
super(...args);
this.addEventListener('focus', () => {
console.log('Focus on spotinput');
});
}
};
customElements.define('spot-input', spotInput, {
extends: 'input',
});
<input type="text" placeholder="simple input">
<input is="spot-input" type="text" placeholder="spot input">
しかし、<spot-input>
タグの使用を許可する必要があると思います。 シャドウDOM を追加し、 自律要素 を作成して<input>
を追加することで、これを行うことができます。
class spotInput extends HTMLElement {
constructor(...args) {
super(...args);
// Attaches a shadow root to your custom element.
const shadowRoot = this.attachShadow({mode: 'open'});
// Defines the "real" input element.
let inputElement = document.createElement('input');
inputElement.setAttribute('type', this.getAttribute('type'));
inputElement.addEventListener('focus', () => {
console.log('focus on spot input');
});
// Appends the input into the shadow root.
shadowRoot.appendChild(inputElement);
}
};
customElements.define('spot-input', spotInput);
<input type="number">
<spot-input type="number"></spot-input>
次に、DOMツリーをチェックすると、次のようになります。
<input type="number">
<spot-input type="number">
#shadow-root (open)
<input type="number">
</spot-input>