<td>のカスタム要素を使いたい

Question

customElements.define('custom-td', class extends HTMLTableDataCellElement {
  // ...
}, { extends: 'td' })

上記のように td 要素をカスタム要素にしたいのですが、これでは「HTMLTableDataCellElementが定義されていません」というエラーが発生します。どのようにすれば td 要素をカスタム要素にできるでしょうか？

できない場合は、なぜ td 要素だけできないのかを教えていただけると嬉しいです。

Comments

[m.ts10806]

どのように動作確認しようとしているのでしょうか。
状況不明なのでもっと前提や背景を具体的に記載してください。
それに、何のために(またどんな出典を根拠に)HTMLTableDataCellElementを使おうとしているかとか。

[Lhankor_Mhy]

W3CのHTML5には存在しましたが、
https://www.w3.org/TR/html52/tabular-data.html#htmltabledatacellelement
現状のWHATWGのHTMLには存在していないようです。
https://html.spec.whatwg.org/multipage/tables.html#htmltablecellelement

古いテキストをご覧になっているのではないですか？

[think49]

@Lhankor_Mhy さん
> 現状のWHATWGのHTMLには存在していないようです。

「CustomElementRegistry interface」にありますよ
https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-api

Answer 1

上記のように td 要素をカスタム要素にしたいのですが、これでは「HTMLTableDataCellElementが定義されていません」というエラーが発生します。

HTMLTableDataCellElement; // ReferenceError: HTMLTableDataCellElement is not defined

DOM Interface Objectの名前が間違っているだけなのでは。

• 4.9.9 td要素 - HTML Standard 日本語訳

console.log(Object.getPrototypeOf(document.createElement('td'))); // HTMLTableCellElement {…}

Re: toshiyan さん

Comments

[toshiyan]

回答ありがとうございます。
なるほど…td要素はHTMLTableCellElementなのですね。ということでHTMLTableDataCellElementをHTMLTableCellElementに書き換えたのですが、新たなエラーが発生してしまいました…。次のようなエラーです。

Uncaught DOMException: Failed to execute 'attachShadow' on 'Element': This element does not support attachShadow

コードの全体は次のようになっています。

customElements.define('shift-cell', class extends HTMLTableCellElement {
constructor() {
super()
this.attachShadow({mode: 'open'})
}
}, {extends: 'td'})

[think49]

@toshiyan さん
後出しで追加質問は止めて下さい。
元質問の ReferenceError は解決している認識です。
質問の趣旨が変わっているので、必要なら新しく質問を立ててください。

---
> コードの全体は次のようになっています。

customElementsの定義コードがない為、再現確認は不可能です。
@m.ts10806さんが指摘されているように、必要十分な情報を初めから「質問文」に書くべきだと思います。

※一応、参考情報は書いておきます。
https://developer.mozilla.org/ja/docs/Web/API/Element/attachShadow#Exceptions
https://dom.spec.whatwg.org/#dom-element-attachshadow

[think49]

質問時の参考までに
https://ja.stackoverflow.com/help/minimal-reproducible-example

[toshiyan]

<td>のカスタム要素を使いたいのです。どうか、お助けください。

[think49]

> customElementsの定義コードがない為、再現確認は不可能です。

これは誤りでしたので、撤回します。

[think49]

<td>のカスタム要素を生成するあなたの要件は満たしています。

追加質問はattachShadow()のエラーです。
原因は私が示した参考情報に明確に書かれていますが、読んでいないでしょう？

[toshiyan]

確かにそうです。シャドウツリーの生成とカスタム要素の生成を混同しておりました。申し訳ございませんでした。