HTMLで自分で定義した独自HTMLタグCustom Elementsを使う

自分だけのヒエログリフHTMLタグを作ろうと思い、変なLibraryに依存することなく搭載されている機能だけで対応できないかいろいろ当たっていると
HTML5のCustomElementsなるものを見つけた.

HTML5において用意された機能で、多くの最新のブラウザで対応しているみたい.

ところが、色々と使いにくいことがあり、今回はそのメモだけを残しておく.

ルールは以下

• 独自のHTMLタグを作るに当たって二つのルールを守る必要あり
  • ハイフン(-)を必ず含むこと
  • 必ず<タグの直後はアルファベットが含まれること. (ex. ○ : ＜a123＞とか)
• HTMLタグには2種類あり
  • autonomous custom elements
    • ＜x-onlyone＞とか<tab-cool>みたいな書き方ができる
    • HTMLElementの継承のみ
    • 自分でJavaScriptで定義
  • build-in custom elements
    • ulとかliとかpとかの機能を継承可能
    • <ul is=”yourcustomelements”>のような書き方のみ可能
      • autonomousのときにできたような書き方はできない

こんな感じかな…?

最初上の二種類のcustom elementsの違いが意識できていなくて全くうまくいかなかった.

HTMLはパースされた後にあとからタグをJavaScriptで定義してやると
タグを使ったそれぞれの要素がアップデートされるようにできているため、
JavaScript内で定義すれば、JavaScriptがパースされてからちゃんとHTMLが表示されるらしい.

ヒエログリフのタグが作れるかは未だ試行錯誤中

参考 :

https://developer.mozilla.org/ja/docs/Web/Web_Components/Using_custom_elements