Web コンポーネントを使用するときに直面する可能性のある注意点

Web コンポーネントはしばらく前から存在しており、再利用可能なカスタム要素を作成する標準化された方法を約束しています。 Web コンポーネントが大幅に進歩した一方で、開発者が Web コンポーネントを使用する際に直面する可能性のある注意点がまだいくつかあることは明らかです。このブログでは、これらの注意事項のうち 10 個について説明します。

1. フレームワーク固有の問題

プロジェクトで Web コンポーネントを使用するかどうかを決定している場合。 Web コンポーネントが選択したフレームワークで完全にサポートされているかどうかを考慮することが重要です。サポートされていないと、不快な警告がいくつか発生する可能性があります。

角度のある

たとえば、Angular で Web コンポーネントを使用するには、CUSTOM_ELEMENTS_SCHEMA をモジュールのインポートに追加する必要があります。

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class MyModule {}

CUSTOM_ELEMENTS_SCHEMA を使用する場合の問題は、Angular がテンプレート内のカスタム要素の型チェックとインテリセンスをオプトアウトすることです。 (問題を参照)

この問題を回避するには、Angular ラッパー コンポーネントを作成します。

これはどのような例かを示します。

@Component({
  selector: 'some-web-component-wrapper',
  template: '<some-web-component [someProperty]="someClassProperty"></some-web-component>
})
export class SomeWebComponentWrapper {
  @Input() someClassProperty: string;
}

@NgModule({
    declarations: [SomeWebComponentWrapper],
    exports: [SomeWebComponentWrapper],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class WrapperModule {}

これは機能しますが、これらを手動で作成することはお勧めできません。そのため、多くのメンテナンスが必要となり、API との同期が取れていない問題が発生する可能性があります。これを面倒にしないようにするためです。 Lit (こちらを参照) と Stencil (こちらを参照) は両方とも、これらを自動的に作成するための CLI を提供します。ただし、最初にこれらのラッパー コンポーネントを作成する必要があるため、追加のオーバーヘッドが発生します。選択したフレームワークが Web コンポーネントを適切にサポートしている場合は、ラッパー コンポーネントを作成する必要はありません。

反応する

もう 1 つの例は React です。これらの問題に対処した React v19 がリリースされました。ただし、まだ v18 を使用している場合は、v18 は Web コンポーネントを完全にはサポートしていないことに注意してください。そこで、React v18 で Web コンポーネントを操作するときに直面する可能性のある問題をいくつか紹介します。これは Lit ドキュメントから直接引用したものです。

「React は、すべての JSX プロパティが HTML 要素の属性にマップされることを前提としており、プロパティを設定する方法を提供しません。これにより、複雑なデータ (オブジェクト、配列、関数など) を Web コンポーネントに渡すことが困難になります。」

「React はまた、すべての DOM イベントに対応する「イベント プロパティ」 (onclick、onmousemove など) があることを前提としており、addEventListener() を呼び出す代わりにそれらを使用します。これは、より複雑な Web コンポーネントを適切に使用するには、多くの場合、使用する必要があることを意味します。 ref() と命令型コード。"

React v18 の場合、Lit はプロパティの設定とイベントのリッスンに関する問題を解決するため、ラッパー コンポーネントを使用することをお勧めします。

これは、Lit を使用した React ラッパー コンポーネントの例です。

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

export const MyElementComponent = createComponent({
  tagName: 'my-element',
  elementClass: MyElement,
  react: React,
  events: {
    onactivate: 'activate',
    onchange: 'change',
  },
});

使用法

<MyElementComponent
  active={isActive}
  onactivate={(e) => setIsActive(e.active)}
  onchange={handleChange}
/>

幸いなことに、React v19 ではラッパー コンポーネントを作成する必要がなくなりました。やったー！

マイクロ フロントエンドでの Web コンポーネントの使用により、興味深い課題が明らかになりました。

2. グローバルレジストリの問題

重大な問題の 1 つは、カスタム要素レジストリのグローバルな性質です。

マイクロ フロントエンドを使用しており、Web コンポーネントを使用して各アプリ間で UI 要素を再利用する予定がある場合、このエラーが発生する可能性が高くなります。

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class MyModule {}

このエラーは、既に使用されている名前でカスタム要素を登録しようとすると発生します。マイクロ フロントエンドの各アプリは同じindex.html ファイルを共有し、各アプリがカスタム要素を定義しようとするため、これはマイクロ フロントエンドでは一般的です。

これに対処するための Scoped Custom Element Registries と呼ばれる提案がありますが、ETA がないため、残念ながらポリフィルを使用する必要があります。

ポリフィルを使用しない場合の回避策の 1 つは、名前の競合を避けるためにプレフィックスを付けてカスタム要素を手動で登録することです。

Lit でこれを行うには、カスタム要素を自動登録する @customElement デコレーターの使用を避けることができます。次に、tagName の静的プロパティを追加します。

前

@Component({
  selector: 'some-web-component-wrapper',
  template: '<some-web-component [someProperty]="someClassProperty"></some-web-component>
})
export class SomeWebComponentWrapper {
  @Input() someClassProperty: string;
}

@NgModule({
    declarations: [SomeWebComponentWrapper],
    exports: [SomeWebComponentWrapper],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class WrapperModule {}

その後

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

export const MyElementComponent = createComponent({
  tagName: 'my-element',
  elementClass: MyElement,
  react: React,
  events: {
    onactivate: 'activate',
    onchange: 'change',
  },
});

次に、各アプリで、アプリ名のプレフィックスを付けてカスタム要素を定義します。

<MyElementComponent
  active={isActive}
  onactivate={(e) => setIsActive(e.active)}
  onchange={handleChange}
/>

その後、カスタム要素を使用するには、新しい接頭辞を付けて使用します。

Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry':
the name "foo-bar" has already been used with this registry

これは迅速な短期的な解決策として機能しますが、開発者エクスペリエンスが最適ではないことに気付くかもしれないため、スコープ付きカスタム要素レジストリ ポリフィルを使用することをお勧めします。

3. 継承されたスタイル

Shadow DOM はカプセル化を提供する一方で、独自の一連の課題を伴います。

Shadow dom はカプセル化を提供することで機能します。スタイルがコンポーネントから漏れるのを防ぎます。また、グローバル スタイルがコンポーネントのシャドウ ダム内の要素をターゲットにすることも防止します。ただし、コンポーネントの外部からのスタイルが継承される場合、そのスタイルが依然として漏洩する可能性があります。

これが例です。

@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
  render() {
    return html`<p>Hello world!</p>`;
  }
}

export class SimpleGreeting extends LitElement {
  static tagName = 'simple-greeting';

  render() {
    return html`<p>Hello world!</p>`;
  }
}

<ボタン>をクリックすると、ボタンはバブルする合成イベントを発行します。

コンポーネント-a

[SimpleGreeting].forEach((component) => {
  const newTag = `app1-${component.tagName}`;
  if (!customElements.get(newTag)) {
    customElements.define(newTag, SimpleGreeting);
  }
});

イベントはコンポーネント b から来ているので、ターゲットはコンポーネント b またはボタンであると考えるかもしれません。ただし、イベントは再ターゲットされるため、ターゲットはコンポーネント a になります。

イベントが <ボタン> から発生したかどうかを知りたい場合は、または イベントの構成パスを確認する必要があります。

6. ページ全体のリロード

の場合この例では、アプリでページ全体のリロードをトリガーするため、リンクは Shadow DOM 内で使用されます。

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class MyModule {}

これは、ルーティングがフレームワークではなくブラウザによって処理されるためです。フレームワークはこれらのイベントに介入し、フレームワーク レベルでルーティングを処理する必要があります。ただし、イベントはシャドウ dom で再ターゲットされるため、フレームワークはアンカー要素に簡単にアクセスできないため、再ターゲットが難しくなります。

この問題を回避するには、 にイベント ハンドラーをセットアップします。これにより、イベントの伝播が停止され、新しいイベントが発行されます。新しいイベントはバブルして構成する必要があります。詳細にもアクセスが必要です
にe.currentTarget.
から取得できるインスタンス

@Component({
  selector: 'some-web-component-wrapper',
  template: '<some-web-component [someProperty]="someClassProperty"></some-web-component>
})
export class SomeWebComponentWrapper {
  @Input() someClassProperty: string;
}

@NgModule({
    declarations: [SomeWebComponentWrapper],
    exports: [SomeWebComponentWrapper],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class WrapperModule {}

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

export const MyElementComponent = createComponent({
  tagName: 'my-element',
  elementClass: MyElement,
  react: React,
  events: {
    onactivate: 'activate',
    onchange: 'change',
  },
});

<MyElementComponent
  active={isActive}
  onactivate={(e) => setIsActive(e.active)}
  onchange={handleChange}
/>

Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry':
the name "foo-bar" has already been used with this registry

@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
  render() {
    return html`<p>Hello world!</p>`;
  }
}

export class SimpleGreeting extends LitElement {
  static tagName = 'simple-greeting';

  render() {
    return html`<p>Hello world!</p>`;
  }
}

[SimpleGreeting].forEach((component) => {
  const newTag = `app1-${component.tagName}`;
  if (!customElements.get(newTag)) {
    customElements.define(newTag, SimpleGreeting);
  }
});