🧰 ユーティリティ上級

カスタム要素のパーサー動作確認

Prettier Liquid プラグインがカスタム HTML 要素（base-cart、based-element など void 要素名で始まる要素）を正しく解析できるか検証するテストコード。void 要素と自己閉鎖タグの混在場面でパーサーの動作を確認する。

用途

Liquid テンプレート内にカスタムウェブコンポーネントを埋め込むときに、パーサーが要素の構造を正しく認識しているかを確認する場面で参考になる。

設置場所

このコードは Prettier プラグインのテストケースであるため、通常のテーマファイルには貼り付けない。独自のカスタム要素を使う場合は、HTML 部分の `<base-cart>` や `<based-element>` の形式をテンプレートで流用し、Liquid フィルターと組み合わせて検証する。

注意点

このテストコードはパーサー動作を検証するためのもので、実際のストア機能を実装していない。カスタムウェブコンポーネントを本番で使う場合は、該当コンポーネントが JavaScript で正しく初期化されているか、Shopify の CSP（コンテンツセキュリティポリシー）に準拠しているか確認する。void 要素（`<base>` など）と同じ名前で始まるカスタム要素を作ると、ブラウザの HTML パーサーが混乱する可能性があるため、要素名は `my-cart` のような接頭辞を付けて区別することを推奨する。

タグ:parsercustom-elementtestweb-componenthtml

コード

14 行 / liquid

it should correctly parse custom elements starting with a voidElementName (such as base-element)
<div>
    <base-cart attr1 attr2="val">
      
    </base-cart>
</div>

it should correctly parse custom elements starting with a voidElementName (such as based-element)
<div>
    <based-element>
      
    </based-element>
</div>

出典・ライセンス

Source:: Shopify/theme-tools/packages/prettier-plugin-liquid/src/test/html-custom-element/index.liquid
Repository:: https://github.com/Shopify/theme-tools
License:: MIT

このコードは Shopify 著作の MIT ライセンスソースです。原本の著作権は Shopify が保有します。日本語訳は ALSEL によるものです。

カスタム要素のパーサー動作確認

コード

出典・ライセンス

関連項目

コメント後の空白フォーマット

Liquidコメントのフォーマット

セクション呼び出しの改行制御

Prettier フォーマッタの HTML リスト整形テスト

Vue.js属性のLiquid整形

sections タグのフォーマット