コンポーネント間で渡されるオブジェクトのプロキシ化

異なる名前空間のコンポーネント間で渡されるオブジェクトや、グローバル DOM に渡されるオブジェクトには、互換性の問題が発生する可能性があります。名前空間の分離性を維持しながら、互換性の問題を低減するために、LWS ではオブジェクトにプロキシラッパーが使用されます。LWS で値のラッパーを解除しようとすると失敗する場合があります。たとえば、ブラウザのコンソールでは、値が null であるか、プロキシ化されているかを確認できます。

同様に、コンポーネントが生成したカスタムイベントにブラウザ拡張機能のための detail 値がある場合、コンポーネントの Sandbox 境界を越えられるように、LWS でプロキシ化されます。ブラウザの拡張機能は、プロキシラッパーのために null の detail 値を受け取る場合があります。

プロキシラッパーに関連する問題を回避するには、値を JSON 文字列で渡して、後から解析します。

この例では、名前空間 foo のコンポーネントがイベントデータを JSON 文字列にシリアライズします。名前空間 bar のコンポーネントは、処理する前にデータを解析します。

1// namespace foo
2window.addEventListener(
3  "message",
4  (event) => {
5    let dataObj = JSON.serialize(event.data);
6  },
7  false,
8);
9
10// namespace bar
11let dataStr = JSON.parse(data);
12window.postMessage(dataStr, targetOrigin);

The Japanese Summer '24 guide is now live

日本語の Summer '24 ガイドが公開されました! 「Component Reference (コンポーネントリファレンス)」は、以前と同様にコンポーネントライブラリにあります。