2020/09/30 copyright by
Licence: MIT
参照URL (used in StringNote)
CompElem.js は WEB Components によるカスタムタグを簡易に実装するためのユーティリティです。
Vue.js や React.js のような高度な機能は提供しません。というよりrender()の挙動に疲れて作りました。
CompElem.js は WEB Components によるカスタムタグを簡易に実装するためだけのユーティリティです。
事例として、MDN のサンプルを改造してみます。
申し訳ありませんが HTML と JavaScript について、ある程度の知識があるものとして説明させていただきます。
このカスタム要素はカーソルが当たったときに
カスタム要素では属性で挙動を指定します。
例えば <popup-span popup="こういう文字枠です"> では popup="" でバルーンで表示するテキストを指定しています。
このように属性を使いたい場合、static _attributes = ["popup"]; とクラスの _attributes 配列プロパティに属性名を定義します。
属性名を定義すると、それらの属性が設定変更されたときに _updateContents() が呼び出されます。
設定変更された属性値は const popup = this.getAttribute("popup"); と取得できますので、これを使って内部要素に反映します。
WEB Components の基本的な事項として、カスタム要素は Shadow DOM という機構に格納されています。
Shadow DOM は const that = this.shadowRoot; と取得します。
内部要素はこれを用いて、that.querySelector(".popup").textContent = popup; と特定し、反映します。
また、<popup-span>テキスト</popup-span> のテキスト（正式にはDOMツリー）が更新されたときにも呼ばれます。
更に端的に説明すると、this.innerHTML が変更されたことを意味します。
that.querySelector(".content").innerHTML = this.innerHTML; と、slot の簡易的な代替としても使用できます。
※ slot が使えないわけではありません。
CompElem.Define() ではテンプレートの id (id="popup-span")を、第一引数("popup-span")で指定します。
これはテンプレートのIDをカスタムタグ名として流用することで、指定を省くためです。
カスタムタグ名もテンプレートもともにユニークですから問題はないとの判断です。
_updateContents() には属性やテキストを反映させるコードを記述しますが、ちょっとした注意点があります。
HTML として属性を記述していても、それが設定される前にも呼ばれることです。
ですので、属性が定義されていないケース、getAttribute() が空を返してくるケースは想定してください。
この項では基本的とは言えない応用について述べます。
SVG画像とは、テキストで表現される図形です。
通常は外部ファイルとして用意しておいて、 <img> タグで呼び出して使用します。
しかし、この SVG 画像をテンプレート化しカスタム要素とすることでイメージとしての利用が捗ります。
たとえば<icon-down></icon-down>と書くことで
しかし個々のアイコンで埋め込み SVG を書く必要が無いだけならば、あまりメリットは感じられないかもしれません。
SVG のカスタム要素としての真価は、
属性で指定したパラメータをもとにアレンジできる点で画像ファイルでは難しい表現が可能です。
普通はテンプレートを記述すれば事は済みますが、動的に要素を生成したい場合もあるかと思います。
例えばテーブル行をコンポーネント化して任意個の<td>を動的生成したいような場合などです。
※ もっとも、<td>はコンポーネント化するとテーブル要素としてはレンダリングされませんので flex を使う必要があります。
テンプレートを使わず、動的な要素生成を実現したい場合のため、_style プロパティや _contents プロパティを拡張点として用意してあります。
copyright by