Lightning Web Component のスタイルフックを利用してみる

※ これから記載する事項は、私が所属する会社とは切関係のない事柄です。


今回は Salesforce の Platform と Experience Builder にてスタイルフックを利用してみたいと思います。


## Platform

Platformsでは `--slds` で始まるHooksを利用します。詳細は[ヘルプ](https://www.lightningdesignsystem.com/platforms/lightning/styling-hooks/)を参考にしてください。


### コンポーネントへのデザイン設定

コンポーネントへのデザインの設定方法を紹介します。

#### class での設定

こちらは通常通り CSS のセレクターとして class を指定して設定する方法です。

#### Lightning Design System の上書き

各コンポーネントに対応した Hooks に対して設定をしていきます。（[Button コンポーネントの例](https://www.lightningdesignsystem.com/components/buttons/#Styling-Hooks-Overview) ）


#### ビルドイン Lightning Web Component の上書き

ビルトインされている [Lightning Web Component](https://developer.salesforce.com/docs/component-library/overview/components) も中身は Lightning Design System と同様のクラスが適用されています。

コンポーネントがどの Design System と対応しているか知りたい場合は、コンポーネントリファレンスページのコンポーネントの詳細ページに遷移し、「Document」タブをクリックします。（[lightning-button の場合](https://developer.salesforce.com/docs/component-library/bundle/lightning-button/documentation)）
![スクリーンショット 2023-01-30 18.19.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/16b30ae8-1c91-c6e9-f0ca-baca26e53c32.png)



下にスクロールしていくと「Component Styling」セクションの中に Design System のヘルプページへのリンクがあります。

![スクリーンショット 2023-01-30 18.20.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/8ebbbe99-fa7e-f0fa-1c73-7bff82644be6.png)



### LWC の例（Platform）

下記のようなコンポーネントを作成した場合、

```html:samplePlatformStyleHooks.html
<template>
    <!-- Lightning Design System のボタン -->
    <button class="slds-button slds-button_brand">Submit</button>
    <!-- ビルトイン Lightning Web Component のボタン -->
    <lightning-button variant="brand" label="Brand"></lightning-button>
    <!-- class を利用したデザインの設定 -->
    <div class="sample">Sample Text</div>
</template>
```



```css:samplePlatformStyleHooks.css
/* ビルトイン Lightning Web Component, Lightning Design System ボタンへ適用される */
:host {
    --slds-c-button-brand-color-background: purple;
    --slds-c-button-brand-color-border: purple;
}
/* クラスを指定した設定 */
.sample {
    color: var(--lwc-colorTextError);
}
```


下記のような見た目になります。

![スクリーンショット 2023-01-30 18.27.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/18b70a75-370a-870a-b25b-4e8a1938ae1a.png)



### LWC の例（Platform）の説明

ブランドボタンのバックグラウンドとボーダーに対して紫色を設定するためにはまず、コンポーネントで利用している Hooks 名を確認する必要があります。下記は[ Button のページの例](https://www.lightningdesignsystem.com/components/buttons/#Styling-Hooks-Overview)です。

![スクリーンショット 2023-01-30 18.29.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/99defbef-2320-234b-da42-b8b4d657f660.png)



また、`.sample` の設定で利用したように [var](https://developer.mozilla.org/ja/docs/Web/CSS/var) を用いてあらかじめ宣言されている変数を使うことができますが、その際は [Design Tokens](https://www.lightningdesignsystem.com/design-tokens/) のページへ遷移し、利用したい変数を確認し、先頭に `--lwc` を付け足すと利用可能です。

![スクリーンショット 2023-01-30 18.34.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/fbc826e0-081f-db77-f908-00700f9313c8.png)



## Experience Builder

Platforms では  `--dxp` で始まる Hooks を利用します。もし`--dxp`で対応できないようなものがあった場合は `--sds` を利用することも可能です。詳細は[ヘルプ](https://developer.salesforce.com/docs/atlas.en-us.exp_cloud_lwr.meta/exp_cloud_lwr/brand_hooks.htm)を参考にしてください。

### 全ページに対する head タグでのテーマの上書き

全ページのテーマの上書きをする際は基本的には[テーマパネル](https://developer.salesforce.com/docs/atlas.en-us.exp_cloud_lwr.meta/exp_cloud_lwr/brand_overview.htm)を利用してもらうのがいいかと思いますが、Experience Builder 設定の **Advanced > Edit Head Markup** から head タグを修正してstyleを追加することが可能です。

![スクリーンショット 2023-01-30 19.05.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/d8b569fc-e0ab-45cf-7b56-c28563ef40a9.png)


### コンポーネントへのデザイン設定

#### class での設定

こちらは通常通りCSSのセレクターとしてclassを指定して設定する方法です。

#### data-component-id での設定

全てのコンポーネントは `data-component-id` というプロパティを持っているので、そのプロパティを利用してCSSを適用することができます。（[ヘルプ](https://developer.salesforce.com/docs/atlas.en-us.exp_cloud_lwr.meta/exp_cloud_lwr/brand_target_css.htm)）

![スクリーンショット 2023-01-30 20.30.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/667f5246-f8de-e531-1178-8233b5e5b90a.png)



### LWC の例（Experience Builder）

Experience Builder 設定の **Advanced > Edit Head Markup** にて下記の内容を head タグへ追記します。

```css
<style>
   [data-component-id="richTextEditor-63fe"] {
       border: 2px dashed #000;
    }
    :root {
        --dxp-g-brand: red;
   }
</style>
```


下記のようなコンポーネントを作成した場合、



```css:sampleStyleHooks.css
.class-sample {
  border: 2px dashed var(--dxp-g-destructive-1);
}
```




```html:sampleStyleHooks.html
<template>
  <section>
    <button class="slds-button slds-button_brand">Global Sample</button>
    <button class="class-sample">Class Sample</button>
  </section>
</template>
```

下記のような見た目になります。今回は「Sample Content」にはビルトインされている「Rich Content Editor」（data-component-id="richTextEditor-63fe"）を使用しています。

![スクリーンショット 2023-01-30 20.31.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/7008a8e1-1750-abd0-539f-ca97315a9a20.png)



### LWC の例（Experience Builder）の説明

* `data-component-id` にて点線のボーダーが設定されていることがわかります。
* `.class-sample` にて赤色の 点線のボーダーがボタンに設定されていることがわかります。
    * ここで利用されている色の変数である `--dxp-g-destructive-1`　は[こちら](https://developer.salesforce.com/docs/atlas.en-us.exp_cloud_lwr.meta/exp_cloud_lwr/brand_hooks_color.htm)から確認できます。
* `:root` にて全ページに対してブランドボタンに赤空が設定されていることがわかります。
    * ここで利用されている色の変数である `--dxp-g-brand`　は[こちら](https://developer.salesforce.com/docs/atlas.en-us.exp_cloud_lwr.meta/exp_cloud_lwr/brand_hooks_color.htm)から確認できます。