ctag

はじめに

グッドプラクティスで紹介したtag.jsより、もっと簡単に利用できるようにしたctag.jsの紹介です

呼び出す側

はじめにctag.jsを読み込みます

ctag.js

コンポーネントを貼り付けたい場所に、次のようなタグを記述します。file属性はコンポーネントファイルのURLです

コンポーネントの読み込み

呼び出し側の作業は以上です

呼び出される側

呼び出される側のファイルです

コンポーネントファイル

ポイントは次の通りです

• titleタグにはタグ名を記述します。途中にハイフンを含む必要があります
• 最初のtemplateタグには、シャドウDOMへ登録する中身を記述します

カスタムタグの登録

コンポーネントファイルでは、カスタムタグの登録も行うことができます。(任意)
下記のようなscriptタグをtemplateタグの次に記述してください。customElements.define()と同じ内容です

登録例

このscriptタグに書くコードには制限があります

現在のドキュメント document を参照しないでください

現在のドキュメントは定義ファイルの呼び出し元になるので、現在のドキュメントに依存するコードが記述できません

現在のドキュメントを参照できない代わりとして、ctag.template('タグ名')でtemplateの内容を文字列で取得できます。
DOMで欲しい場合は、第二引数にtrueをセットしてください

モジュール化

インラインタイプは関数にラップされて実行されます。外部ファイルタイプはモジュールとして実行されます
またimportするファイルがあれば、フルパス(http～)で記述してください

外部ファイルの読み込み方

キャッシュ

キャッシュを設定すると、HTTPリクエストをなくすことができます

設定例

JSONの仕様はオブジェクトで4つのキーを持ちます。

参考までに、PHPでキャッシュファイルを作成するコードを記載しておきます

キャッシュファイル作成例