Web ComponentsのイベントやスロットをReactで扱う

再利用性とカプセル化のためのWeb Componentsを基礎から学ぶ 第8回

Web Components内のスロットにReact由来のUIを流し込む

　次は、子要素を扱う方法を見てみましょう。

　Web Componentsで子要素を扱う方法といえば、スロット要素を使うことが一般的です。スロット要素を使うと、カスタム要素の内部に、外部から渡されたUIを挿入することができます。その一方で、Reactでは children という特別なプロパティを使って、外部で定義されたUIを子要素として扱うことができます。

　これらはほとんと同じ目的のために使われるものですが、それぞれの仕組みが異なるため、React側で定義されたUIをカスタム要素の内部にそのまま挿入することはできません。そこで、@lit/react を使って、React側で定義されたUIをカスタム要素の内部に挿入する方法を解説します。

　まずは、シンプルな例を考えてみましょう。リスト3のように、カスタム要素を作成します。

［リスト3］src/slot/my-slottable-element.js

import { LitElement, html, css } from "lit";

const styles = css`
  /* divとslotに太い枠線をつける */
  div,
  slot {
    border: 4px solid #343434;
    display: block;
    padding: 8px;
  }

  /* slotの枠線は青くする */
  slot {
    border-color: cornflowerblue;
  }
`;

export class MySlottableElement extends LitElement {
  static styles = styles;

  render() {
    return html`
      <div>
        <h3>これはスロットによって差し込まれたUIです</h3>
        <slot></slot><!-- （1） -->
      </div>
    `;
  }
}

customElements.define("my-slottable-element", MySlottableElement);

　リスト3のカスタム要素は、（1）の slot 要素を使って、外部から渡されたUIを挿入することができるようになっています。では、リスト3のカスタム要素に、React側で定義されたUIを挿入してみましょう。リスト4のように、@lit/react を使ってReactコンポーネントを作成します。

［リスト4］src/slot/Slottable.jsx

import React from 'react';
import { createComponent } from '@lit/react';
import { MySlottableElement } from './my-slottable-element';

export const SlottableElementComponent = createComponent({
  tagName: 'my-slottable-element',
  elementClass: MySlottableElement,
  react: React,
})

export const Slottable = () => {
  return (
    <SlottableElementComponent>
      <p>子要素として渡された要素</p>{/* (1) */}
    </SlottableElementComponent>
  )
}

　実際に動かしてみましょう。ブラウザで http://localhost:5173/ を開くと、図2のように表示されます。

図2：スロットに挿入されたUI

　リスト4の（1）でReactコンポーネントの子要素、つまり children として与えたUIが、図2では内側の青い枠で囲まれた部分に挿入されていることがわかりますね。

　@lit/react の createComponent を用いて作られたReactコンポーネントは、children として与えられたUIを、カスタム要素内の slot 要素に挿入することができるのです。

名前を指定してスロットに挿入する

　第2回でも触れましたが、HTMLテンプレートで用いられる slot 要素には name 属性があり、外側からどのスロットに挿入するのかを指定できます。この挙動は @lit/react でもサポートされており、React側から名前を指定してスロットに挿入できます。この機能を利用するには、リスト5のようにカスタム要素を作成します。

［リスト5］src/slot/my-named-slottable-element.js

import { LitElement, html, css } from "lit";

const styles = css`
  /* divとslotに太い枠線をつける */
  div,
  slot {
    border: 4px solid #343434;
    display: block;
    padding: 8px;
  }
  /* slotの枠線は青くする */
  slot {
    border-color: cornflowerblue;
  }
  /* 段落の間は空ける */
  p {
    margin-bottom: 2px;
  }
`;

export class MyNamedSlottableElement extends LitElement {
  static styles = styles;

  render() {
    return html`
      <div>
        <p>先頭スロット</p>
        <slot name="head"></slot><!-- （1） -->
        <p>デフォルトスロット</p>
        <slot></slot><!-- （3） -->
        <p>末尾スロット</p>
        <slot name="tail"></slot><!-- （2） -->
      </div>
    `;
  }
}

customElements.define("my-named-slottable-element", MyNamedSlottableElement);

　リスト5のカスタム要素は、（1）と（2）の slot 要素に name 属性を指定して、それぞれのスロットに名前をつけています。（3）はリスト4と同じ役割のスロットで、便宜上デフォルトスロットと呼ぶことにします。では、リスト5のカスタム要素に、React側で定義されたUIを挿入してみましょう。リスト6のように、@lit/react を使ってReactコンポーネントを作成します。

［リスト6］src/slot/NamedSlottable.jsx

import React from 'react';
import { createComponent } from '@lit/react';
import { MyNamedSlottableElement } from './my-named-slottable-element';

export const NamedSlottableElementComponent = createComponent({
  tagName: 'my-named-slottable-element',
  elementClass: MyNamedSlottableElement,
  react: React,
})

export const NamedSlottable = () => {
  return (
    <NamedSlottableElementComponent>
      <p slot="head">この文章は「head」スロットに入ります。</p>{/* （1） */}
      <p slot="tail">この文章は「tail」スロットに入ります</p>{/* （2） */}
      <div slot="tail">{/* （4） */}
        <Hoge />{/* （5） */}
      </div>
      <p>{/* （3） */}
        nameを未設定の場合はデフォルトスロットに入ります。
      </p>
    </NamedSlottableElementComponent>
  )
}

const Hoge = () => (
  <p>Reactコンポーネントも挿入できます</p>
)

　<NamedSlottableElementComponent> 要素の children として、いくつかのパターンで要素を渡しています。Reactコンポーネントの属性として slot 属性を指定することで、名前を指定したスロットに挿入できます。

　どの要素がカスタム要素のどこに挿入されるのか、先に予想してみましょう。（1）や（2）の要素は、それぞれの名前を持つスロットに挿入されそうですね。（3）には name 属性を指定しなかったので、デフォルトスロットに挿入されそうです。さて、それでは（3）より上に定義されていて、slot="tail" になっている（4）は、（3）より上に来るでしょうか下に来るでしょうか。また、（5）のようなReactコンポーネントも挿入できるのでしょうか。

　答え合わせです。実際に動かしてみましょう。ブラウザで http://localhost:5173/ を開くと、図3のように表示されます。

図3：名前を指定してスロットに挿入されたUI

　予想通り、（1）や（2）の要素はそれぞれの名前を持つスロットに挿入されています。また、（3）はデフォルトスロットに挿入されていますね。さて、問題の（4）は、指定通り name="tail" の末尾スロット内に配置されており、（3）との位置関係は関係なかったようです。末尾スロットの中では、（2）と（4）の上下関係が維持されていますね。また、（5）のようなReactコンポーネントも挿入できることがわかりました。

　Reactにおける通常の children とは少し違った挙動も組み込めることがわかりました。これにより、カスタム要素内でのUIの配置を柔軟に行うことができるようになります。

最後に

　今回は、カスタム要素内で発火したイベントをReactで受け取る方法と、カスタム要素内のスロットへReact由来のUIを流し込む方法について解説しました。ひと手間かかることもありますが、 @lit/react を使って、Web ComponentsとReactをより密接に連携させることができるようになりましたね。

　本連載は、今回で最終回となります。連載中にもWeb Componentsを取り巻く環境は刻々と進化し続け、少しずつ扱いやすいものになっていきました。今後も「再利用性とカプセル化」というWeb Componentsの特性を活かせる分野は増えていくことでしょう。ぜひ、これらの記事を参考にして、Web Componentsを活用した開発に取り組んでみてください。