✨ UI部品中級

カスタム要素のラッパーコンポーネント

child-element というカスタム HTML 要素をラップし、スロットに子要素を挿入するスニペット。Web Components パターンで再利用可能なコンポーネント構造を実現する。

用途

テーマの UI コンポーネント化時に、カスタム要素とそのスロット処理をスニペットで管理したいとき。

設置場所

snippets/child.liquid に配置し、親となるセクション・スニペット内で `{% render 'child', children: '<div>コンテンツ</div>' %}` のように children パラメータに HTML 文字列を渡して呼び出す。

注意点

child-element カスタム要素が JavaScript で定義・登録されていることが前提となる。children パラメータに渡す HTML は必ずエスケープ不要な信頼できるコンテンツにし、ユーザー入力を直接渡さない。カスタム要素が対応ブラウザ（モダンブラウザ全般）であることを確認したうえで使用する。

タグ:web-componentscustom-elementslotcomponentreusable

コード

10 行 / liquid

{% doc %}
  Child fixture that depends on the child-element custom element

  @param {string} children
{% enddoc %}

<child-element>
  {{ children }}
</child-element>

出典・ライセンス

Source:: Shopify/theme-tools/packages/theme-graph/fixtures/skeleton/snippets/child.liquid
Repository:: https://github.com/Shopify/theme-tools
License:: MIT

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

関連項目

✨ UI部品初級

成功チェックマークアイコン

緑色の円形背景にチェックマークを描いたSVGアイコン。フォームやメッセージの完了状態を視覚的に表現する。

📁 shopify-headless-theme·MIT·6 行

✨ UI部品初級

エラーアイコン

エラー状態を示す円形アイコン。SVG で描画されたアラート記号を含む UI 部品で、accessibility 対応により視覚障害ユーザーには非表示。

📁 theme-tools·MIT·8 行

✨ UI部品初級

静的コンテンツ

管理画面で入力したテキストコンテンツを静的に描画するブロック。セクション内で複数回使い分けられる汎用コンテナとして機能する。

📁 theme-tools·MIT·11 行

✨ UI部品初級

テキスト

セクションに追加できるシンプルなテキストブロック。管理画面からドラッグ&ドロップで配置でき、固定テキスト「hello world」を表示する基本的なブロック実装。

📁 theme-tools·MIT·15 行

✨ UI部品初級

セクション共通ヘッダー（タイトル・説明文）

セクション内で繰り返し使うタイトルと説明文をまとめて描画するスニペット。テーマカスタマイザーから設定したテキストとフォントサイズを条件付きで出力する。

📁 ks-bootshop·MIT·24 行

✨ UI部品初級

SVG アイコンの埋め込みテンプレート

エラーアイコン、ユーザープロフィールアイコン、背景グラフィックなど複数の SVG を HTML に埋め込むテンプレート。symbol 要素で定義したアイコンを use タグで参照し、再利用可能な構成にしている。

📁 theme-tools·MIT·25 行