SvelteでCSSのカスタムプロパティを使用する
はじめに
ネクストビートでおもてなしHRの開発を担当している原と申します。
おもてなしHRではSvelteを使用しております。
今回は、Svelteを使用して、子コンポーネント内にあるCSSのカスタムプロパティの値を設定する方法についてご紹介します。
紹介する内容は下記のREPLでご覧いただけます。
また本記事ではREPL内のコードを抜き出して記載しております。
全容はREPLでご確認ください。
https://svelte.dev/repl/c8d86df965e44f519f0ce9338254c60d?version=4.2.15
手段1 : 糖衣構文（syntactic sugar）で設定する
子コンポーネントにプロパティとして、CSSのカスタムプロパティを設定することができます。
<!-- App.svelte -->
<SyntacticSugarHeading --text-color={color}/><!-- SyntacticSugarHeading.svelte -->
<h2 class="heading">Syntactic Suger.</h2>
<style>
.heading {
color: var(--text-color, orange);
}
</style>手段2 : 脱糖（desugar）で設定する
子コンポーネントを保持するHTML要素を追加し、その要素にstyleディレクティブでカスタムプロパティを設定することができます。
<!-- App.svelte -->
<div style: --desuger-text-color={color}>
<DesugarHeading />
</div><!-- DesugarHeading.svelte -->
<h2 class="heading">Desuger.</h2>
<style>
.heading {
color: var(--desuger-text-color, orange);
}
</style>手段3 : コンポネートのプロパティを経由してstyleディレクティブで設定する
子コンポーネントにコンポーネントのpropを用意し、子コンポーネント側でstyleディレクティブでカスタムプロパティの値を設定することができます。
<!-- App.svelte -->
<StyleDirectiveHeading textColor={color}/><!-- StyleDirectiveHeading -->
<script lang="ts">
export let textColor
</script>
<h2 class="heading" style:--text-color={textColor}>
Style Directive.
</h2>
<style>
.heading {
color: var(--text-color, orange);
}
</style>どの手段を使用するとよいか
カスタムプロパティの値を特定の値に限定したい場合は、手段3のやり方で、TypeScriptのリテラル型を活用するとよいです。
たとえば、色を扱う場合、デザインシステムで定義された色のみを使用したいことがあります。
手段1と手段2では、実装者が任意の色を設定できますが、手段3では、実装者はデザインシステムで定義された色のみを設定できるようになります。
一方、制限を設けたくない場合は、手段1または手段2が適しています。
手段2では、子コンポーネントを囲む余分な<div>タグが必要になるため、子コンポーネントが1つしかない場合は、手段1のほうが適しています。一方、子コンポーネントが複数存在し、それらに対して一括でプロパティを設定したい場合は、手段2が適しています。
We are hiring!
本記事をご覧いただき、ネクストビートの技術や組織についてもっと話を聞いてみたいと思われた方、カジュアルにお話しませんか？
・今後のキャリアについて悩んでいる
・記事だけでなく、より詳しい内容について知りたい
・実際に働いている人の声を聴いてみたい
など、まだ転職を決められていない方でも、ネクストビートに少しでもご興味をお持ちいただけましたら、ぜひカジュアルにお話しましょう！
🔽申し込みはこちら
https://hrmos.co/pages/nextbeat/jobs/1000008
また、ネクストビートについてはこちらもご覧ください。
🔽エントランスブック
https://note.nextbeat.co.jp/n/nd6f64ba9b8dc
