ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。

カスタム要素のYAML設定リファレンス

client-extension.yamlファイルでカスタム要素のクライアント拡張を定義することができます。

使用法の詳細

client-extension.yamlファイルは、カスタム要素のクライアント拡張を定義します。

able-custom-element:
    cssURLs:
        - style.css
    friendlyURLMapping: vanilla-counter
    htmlElementName: vanilla-counter
    instanceable: false
    name: Able Custom Element
    portletCategoryName: category.client-extensions
    type: customElement
    urls:
        - index.js
    useESM: false

必須のurlsプロパティは、JavaScript リソースへのパスを 1 つ以上指定します。これらのJavaScriptリソースのうち1つは、カスタム要素の初期化コードを含んでいなければなりません。 htmlElementName は、ページ HTML 内のカスタム要素の識別子を定義するために必要です。

friendlyURLMapping プロパティはウィジェットの URL にプレフィックスを適用し、ページ上の要素とのやり取りのルートを定義します。このマッピングを名前空間のように使用して、カスタム要素の永続化された状態情報を取得するときに競合を防ぐこともできます。たとえば、 friendlyURLMapping が welcome に設定され、 alpha または beta ルートを使用しているカスタム要素にアクセスするには、URL に /-/welcome/alpha または /-/welcome/beta を追加します。

サンプルワークスペースには、完全なカスタム要素クライアント拡張機能が含まれています。

YAML プロパティ

これらのプロパティは、カスタム要素クライアント拡張に特有のものです。

名前	データ型	デフォルト値	説明
`cssURLs`	String[]（URLの一部）	`[]`	カスタム要素がページで使用されたときに、HTMLの頭に追加されるCSSパスのリスト。
`friendlyURLMapping`	文字列		特定のカスタム要素ウィジェットにフレンドリURLプリフィックスをマッピングします。
`htmlElementName`	文字列		ページマークアップでレンダリングされるカスタム要素を参照するHTML要素名。
`instanceable`	真偽値	`false`	カスタム要素ウィジェットがページ上に複数回表示されるかどうか。
`portletCategoryName`	文字列	`category.client-extensions`	カスタム要素ウィジェットのメニューカテゴリ。
`properties`	文字列[]	`[]`	カスタム HTML 要素の属性として追加するプロパティ。改行をセパレーター（区切り文字)として使用し、Javaのプロパティとして処理されます。
`urls`	String[]（URLの一部）		(必須）ウィジェットがページ上で使用される際に、HTMLヘッドに追加されるJavaScriptリソースへのパスのリスト。これらのリソースのうち1つは、カスタム要素の初期化コードを含んでいなければなりません。これを`baseURL`と組み合わせて、完全なURLを形成します。
`useESM`	真偽値	`false`	JavaScript コードが ESM 形式を使用するかどうか。 `true`の場合、JavaScript は `type="module"` プロパティを使用してページに追加されます。