🦴

HTMLで閉じタグを省略していいのは決められたタグのみだった

2023/02/19に公開

はまったこと

Web Components で新しいタグを使っていた。ただ、

<my-tag></my-tag>

と、書くのは冗長なのでずっと

<my-tag/>

と書いていた。そしてこれは普通に動いていた。

が、あるとき二つ続けて書くと一つしか出ないことに気づいた。次のように書いて、

<my-tag/>
<my-tag/>

デベロッパーツールで確認すると <my-tag></my-tag> が一つあるだけだった。エラーが出ることもなく片方は消えていた。

試しに下のように変更すると問題なく2つ表示された。

<my-tag></my-tag>
<my-tag></my-tag>

<xxx></xxx> になってたら、なんでも <xxx/> に置き換えていいのではなかった
- ちなみに <div/><div/> とすると兄弟ではなく親子になる(どういう仕様！？)
- だから <my-tag/><my-tag/> も親子階層になろうとしていた(？)
<xxx/> と書いていいのは決められたタグのみだった