ハクソク

世界を動かす技術を、日本語で。

HTMLタグを作成できます

109日前原文(maurycyz.com)

概要

  • HTMLでは独自タグの利用が可能
  • CSSで未認識タグのスタイル指定が標準動作
  • タグ名にハイフンを含めることで将来の衝突を回避
  • 独自タグは可読性向上に役立つ
  • ネスト構造の管理が容易になる利点

独自タグによるHTMLとCSSの記述改善

  • HTMLでは、例えば<div class=cool-thing>の代わりに<cool-thing>といった独自タグを使用可能
  • CSSでは、cool-thing { ... }のように独自タグ名をそのままセレクタとして利用
  • 未認識タグは標準で「汎用要素」として扱われ、CSS指定のみが反映される
  • タグ名にハイフン（-）を含めることで、将来のHTML標準タグとの名前衝突を回避
  • 既存の意味的タグがある場合はそれを優先、なければ独自タグの方が可読性向上に寄与

ネスト構造の可読性向上

  • 複雑なネストも、<div class=article> ... </div>のようなdivとclass名の組み合わせより、<main-article> ... </main-article>のような独自タグで明確化
  • divの数を数える必要がなくなり、どこに要素を追加すべきか直感的に分かりやすい
  • 例：
    • <div class=article> <div class=article-header> <div class=article-quote> <div class=quote-body> ... </div> </div> </div> </div>のようなネスト構造
    • 独自タグの場合：<main-article> <article-header> <article-quote> <quote-body> ... </quote-body> </article-quote> <!-- ここに追加可能 --> </article-header> </main-article>

独自タグ利用の注意点

  • 意味的タグ（例：<section>, <header>, <footer>）が存在する場合はそれを使用
  • それ以外でdivやspanの乱用を避けたい場合に独自タグが有効
  • HTMLの標準仕様に準拠した方法であり、主要ブラウザで問題なく動作

まとめ

  • 独自タグの活用でHTMLの可読性・保守性向上
  • CSSでのスタイリングも直感的
  • 複雑な構造も明確なタグ名で管理しやすい

Hackerたちの意見

もちろんできるよ！全部インラインデフォルトがあって、必要に応じてCSSのベースラインを設定できるけど、これってHTMLの隠れた秘密みたいなもんだよね？知らないタグは`HTMLUnknownElement`になって、spanみたいに振る舞うよ。追記：過去にこれを避けてた理由は名前空間の問題だったけど、標準ではハイフンを使えるって言ってるから大丈夫。ネイティブ要素は`-`を使わないし。追記2：CSSセレクタともちゃんと動くからすごくいいよ。普通のHTMLドキュメントに``みたいなものを書いても問題ないし。追記3：あと、``タグとか、すぐにはHTML標準に採用されないものも、要素名と衝突しなければ使えるよ。将来的に要素名として採用されるかもしれない珍しいケースも、テキスト検索/置換で簡単に解決できるし。追記4：これって実際にはJavaScriptとはあまり関係ないけど、`querySelector`や`querySelectorAll`をこれらの作った名前でもネイティブ名と同じように使えるから、書くのがすごく楽しいよ。必要な時に少しだけVueを使って好きだったけど、今のHTMLがその隙間を埋めてくれてるね。
└
細かい指摘だけど、非標準の要素名にハイフンが含まれていて（他は構文的に有効なカスタム要素名である場合）、その要素のDOMオブジェクトは`HTMLUnknownElement`ではなく`HTMLElement`のインスタンスになるんだ。標準の言葉を借りると、「有効なカスタム要素名の場合、`HTMLElement`を使うのは、将来的なアップグレードが要素のプロトタイプチェーンを`HTMLElement`からサブクラスへ直線的に移行させることを保証するためであり、`HTMLUnknownElement`から無関係なサブクラスへ横移動させることを避けるためです。」
デフォルトでは、spanのように振る舞うよ。Custom Element APIを使ってカスタマイズできるよ： https://developer.mozilla.org/en-US/docs/Web/API/Web_compone...
└
2014年にサポートがあまり広まっていない時に、カスタム要素をたくさん使ってたよ。美しくてエレガントな解決策だと思うし、Reactがあんなに大きくなったのはちょっと悔しいな。今は開発者がReactを使いたがるから、すべてがSPAじゃなきゃいけないみたいだけど、実際にはほとんどのユーザーは必要に応じてカスタム要素を使った良い古きHTMLの方がいいと思うよ。
└
記事にあるような例には、セマンティックな要素を使った方がいいと思うし、適切なところではウェブコンポーネントやカスタム要素を使いたいな。ウェブコンポーネントは確実に過小評価されてるよ。カスタム要素が必要だったことがあって、実装はそんなに難しくなかったよ。
これを使って、JSが無効の時にページのセクションを隠せるように、の逆を実装したよ。もちろんクラスを使って同じこともできるけど、カスタムタグは楽しいよ。 https://github.com/aaviator42/yes-script
> > > > これはあまり良い例じゃないね。この場合、実際のHTMLタグを使えばよかったかも。
... もっとたくさんのHTML ... この特定の例について一つだけ言わせてもらうと（広い概念については問題ないけど）、最初からdivの山にする必要はなかったかも。こんな感じの方がもっと理にかなってたかも： ... もっとたくさんのHTML ...
└
この例は、カスタムタグの弱点も示してるね。要素は一つの名前しか持てないけど、複数のクラスを持つことができる。クラスは順序のない集合だから、一般的には複数の要素でそれをエミュレートすることはできない。入れ子構造がクラスリストにはない順序を生むからね。
何年も前、`blink` タグを復活させることに決めたんだ。ブラウザを作るモンスターたちがサポートを削除しちゃったからね。タグを自由に作れるなんて知らなかったけど、試してみることにしたんだ。ちょっと jQuery を使って、可視性の設定をいじったら、ブラウザを直して素晴らしい点滅を復活させることができた。こんなことができるなんて驚いたよ。タグの種類は決まってると思ってたから。オープンソースにしようかとも考えたけど、コードは本当に10行くらいで、同じことをやってるものがたくさんあるんじゃないかと思った。
└
私は、blink がもう存在しないことに嬉しいよ。あれは、単純な HTML 要素では考えなきゃいけない行動だと思うから。
└
今は CSS だけで完全にできると思うよ！ https://www.w3docs.com/tools/code-editor/13719 `.blink` を `blink` に変更したら、クラスじゃなくてタグをターゲットにできて、うまくいったみたい。
└
> ブラウザを作るモンスターたちがサポートを削除しちゃった ほとんどのブラウザは最初からそれを実装してなかったよ。Safari、Chrome、IE、Edge はそれを持ってなかった。現在のブラウザ名で言うと、Firefox と Opera だけが2013年まで持ってたんだ。
└
これについて話すと、Flashがウェブから消えちゃったのはまだ悲しいな。代わりになるものは今のところないし。
これをやり始めてから、もう3、4年になるかな。いいアイデアだけど、実際には難しい。広くこのアプローチを勧めるつもりはないけど、私には合ってる。やりすぎると問題も出てくるしね。HTML のほとんどのタグがカスタム要素だと、新たな可読性の問題が生まれる。インラインのものやブロックのものがすぐには分からなくなるし、新しい人には学ぶのが大変だよ。もっとバランスの取れたアプローチにたどり着いたんだ。こんな感じかな：ネイティブタグがあれば、例えば `<header>` や `<footer>`、まずそれを使うべき。コンポーネントのようなものがあれば、カスタムタグを使ってもいい。たとえそれが CSS だけで、JS なしでもね。コンポーネントの中にサブコンポーネントがあれば、スロット属性を使って部品を宣言する。これに対して追加のカスタムタグを使いたくなる誘惑があるけど、私の経験では、`<div>` の方がずっと可読性が高い。これのいいところは、どんなタグにもスロット属性を付けられること。カスタムでもそうじゃなくてもね。そう、私は CSS だけで、JS なしでもスロット属性を使いまくってるよ。なんでこんなことをするかって？クラスを変更やカスタマイズに限定したいから。`<div>` を見ると、どこに属していて何がユニークかがすぐに分かる。多分、これを見て気持ち悪くなる人もいるだろうけど、受け入れるよ。でも、私にはうまくいってるんだ。
└
バランスの取れた実用的な方法でウェブグレインを活用するアプローチにすごく興味があるんだけど、フレームワークやツール、例となるサイトを共有してもらえないかな？見てみたい！私が作ったカスタム要素のアプローチに興味があれば、こちらを見てね： https://github.com/crisdosaygo/good.html カスタム要素を使ってて、細かい DOM 更新のためのオートフックがあって、ネイティブ JS テンプレートリテラル構文を使って補間して、順序付きコンポーネント構造を強制してるんだ： ``` . ├── package.json └── src ├── app.js └── components ├── app-content │ ├── markup.html │ ├── script.js │ └── styles.css └── app-header ├── markup.html ├── script.js └── styles.css ``` 「自己閉じカスタム要素」を書けるようにするための「コメントノード」ハックも少しあるよ。Good.HTML は BrowserBox のための頼れるフレームワークなんだ。
これが、すべてのカスタム要素にデフォルトスタイルを設定する方法だよ：`:where(:not(:defined)) { display: block; }`
昔、インターネットエクスプローラーは HTML5 タグをサポートできなかったんだ。2010年のライブラリからコードのスニペットを見つけたんだけど、これを使って問題を解決してたんだ。JavaScript でタグを作ると、IE がそれを認識することがあったんだ。作った後はすぐに捨てられたけど。これが私のスクリプトだよ： ```javascript (function(d) { 'abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video' .replace(/\b\w+/g,function (a){ d.createElement(a); }); })(document); ``` ランダムなタグを追加して、それをシムに加えて、どのブラウザでもレンダリングできることに気づくのはそんなに時間がかからなかったよ。
これについてブログに書いたよ: https://dashed-html.github.io ◄ = WHATWGが新しい要素として追加するまで、常にHTMLUnknownElementだよ。 ◄ = UNDEFINEDカスタム要素で、有効なHTMLElement、レイアウトやスタイリングに最適だよ。 ◄ JavaScriptのカスタム要素APIでアップグレードすると、DEFINEDカスタム要素になるよ。 --- ► これはカスタム要素APIをサポートしているすべてのブラウザでの標準的な動作だね。2020年からは、Microsoft EdgeがChromiumエンジンに切り替わってから、すべてのブラウザでそうなったよ。それ以前からChromeやSafari、Firefoxでもずっと前からそうだったし。 ► W3C HTMLバリデーターは、ダッシュがついたカスタム要素をHTMLElementとして受け入れるよ。ダッシュがないものは受け入れないから、それはHTMLUnknownElementになるよ。 ► UA - ユーザーエージェントスタイルシート（ブラウザのデフォルトスタイルシート）は、CSS [hidden] { display:none }を定義してるよ。でもカスタム要素はデフォルトスタイルシートを継承しないから、その動作を自分のスタイルシートに追加しなきゃいけないんだ。 ► UAスタイルシートではdisplay:blockだけど、これらのカスタム要素には自分でdisplayプロパティを設定しないといけないよ（これを20回忘れることになるけど、そうしたらもう二度と間違えないから）。 ► CSSの:defined擬似セレクタは、標準のHTMLタグとJavaScriptで定義されたカスタム要素をターゲットにするよ。 ► だからCSSの:not(:defined)擬似セレクタはUNDEFINEDカスタム要素をターゲットにするんだ；それらはまだ有効なHTMLElementで、CSSは他の要素と同じように適用されるよ。 ► DSD - 宣言的シャドウDOM：シャドウDOMを持つ同じ未定義のカスタム要素を作成するよ。