HTMLで独自タグを試した時の備忘録です。HTMLやJavaScriptには明るくないので今後ちゃんと勉強していきたい。
まず、独自タグについて調べるとWeb Componentsとかがたくさんヒットしました。
その中にCustom Elementsという仕様があるみたいで、ここで独自タグを定義できるらしい。
とりあえずやってみる
今回のコードはgithubに上げておきます。
https://github.com/raibito/WebCodeBowl/blob/master/HtmlCustomTagTest/html/index.html
独自タグを定義してみる
templateタグとscriptを使用する。
template内では独自タグのスタイルやプレフィックスを付ける等ができる。
scriptでは独自タグのクラスを作ってcustomElements.define("custom-tag",CustomTag);で定義する。
<template id="custom-temp">
<style>
.col{
color: red;
}
</style>
<div class="col"><content></content></div>
</template>
<script>
// ここでタグを定義
class CustomTag extends HTMLElement{
constructor(){
super();
const template = document.querySelector("#custom-temp");
const node = document.importNode(template.content,true);
this.createShadowRoot();
this.shadowRoot.appendChild(node);
}
}
customElements.define("custom-tag",CustomTag);
</script>
これでタグが定義され使用できるはずだと思い、タイトル通り作ったタグで囲まれたものだけを取得してみます。
作ったタグで囲まれたものだけを取得してみる
使ったbodyは以下の通り。小学生かよってくらい適当ですまぬ。
<body>
<h1>Custom Tag Test</h1>
<p>test</p>
<p>ああああ</p>
<custom-tag data-url="https://...">ここがカスタムタグ</custom-tag>
<p>ああああ</p>
<custom-tag data-url="http://...">これもカスタムタグ</custom-tag>
<script>
console.log(document.getElementsByTagName("custom-tag"));
</script>
</body>
scriptでブラウザ(Chrome)のコンソールに出力してみると、
HTMLCollection(2) [custom-tag.testCustom, custom-tag.testCustom]
0:custom-tag.testCustom
1:custom-tag.testCustom
length:2
まあ取れてるらしい。一応タグ名を取得してみたらCUSTOM-TAGとなったので大丈夫そうです。
ここで疑問が浮かびました。定義してないタグを使ったら取得できないのか？
定義していないタグで試してみる
bodyに定義していないタグを入れてみて同様に試してみました。
<body>
<h1>Custom Tag Test</h1>
<p>test</p>
<p>ああああ</p>
<custom-tag data-url="https://...">ここがカスタムタグ</custom-tag>
<p>ああああ</p>
<custom-tag data-url="http://...">これもカスタムタグ</custom-tag>
<undefine-custom-tag>定義していないカスタムタグ</undefine-custom-tag><!--追加 -->
<script>
console.log(document.getElementsByTagName("custom-tag"));
console.log(document.getElementsByTagName("undefine-custom-tag"));//追加
</script>
</body>
bodyに<undefine-custom-tag>を入れて、scriptで取得できるか試してみると、
HTMLCollection(1)
0:undefine-custom-tag
length:1
あ、取れちゃうんだ。タグ名を取れるかも試してみたら取れました。
何故だ
取れるんなら独自タグいらないじゃんって思い調べたのですが、おそらくHTMLUnknownElementという奴が関わっているっぽい？
でもこれを使っているとHTMLに新しいタグができた時に名前がかぶると面倒らしい?
定義するとこの辺りが解消されるのだろうか。
また、styleなどの定義ができるのが独自タグを定義する理由の一つな気がする。
タグで囲まれたものだけを取得するくらいだったら独自タグを定義する必要はないのかも。
まとめ
・独自タグが使えるらしいCustom Elementsを試してみた
・作ったタグで囲まれたものを取得してみた
・UnknownElementが適応されているらしいがあまり使うべきではない
・早くフロントエンドも勉強しろという声が聞こえる
・備忘録という言葉の便利さ
参考
Web Componentsとは何か？
https://qiita.com/jtakiguchi/items/b1315f53b3726ff11b61