ポータル
ポータルとは？
ポータルは、子要素を親コンポーネントのDOM階層外のDOMノードにレンダリングするための第一級の方法を提供します。 yew::create_portal(child, host) は、child を親コンポーネントの階層下にではなく、host 要素の子としてレンダリングする Html 値を返します。
使用方法
ポータルの典型的な使用例としては、モーダルダイアログやホバーカードなどがあり、要素の shadowRoot の内容を制御したり、周囲のドキュメントの <head> にスタイルシートを追加したり、<svg> の中央の <defs> 要素内に参照される要素を収集したりするなど、より技術的なアプリケーションもあります。
yew::create_portal は低レベルの構成要素であることに注意してください。ライブラリはこれを使用して、アプリケーションで消費できる高レベルのAPIを実装する必要があります。たとえば、id="modal_host" で識別される yew の制御外の要素に children をレンダリングする単純なモーダルダイアログを次に示します。
use yew::prelude::*;
#[derive(Properties, PartialEq)]
pub struct ModalProps {
#[prop_or_default]
pub children: Html,
}
#[function_component]
fn Modal(props: &ModalProps) -> Html {
let modal_host = gloo::utils::document()
.get_element_by_id("modal_host")
.expect("Expected to find a #modal_host element");
create_portal(
props.children.clone(),
modal_host.into(),
)
}
イベント処理
ポータル内の要素で発生したイベントは、バブリングアップするときに仮想DOMに従います。つまり、ポータルが要素の子としてレンダリングされる場合、その要素のイベントリスナーは、ポータルが実際のDOMの無関係な場所にコンテンツをレンダリングする場合でも、ポータル内からディスパッチされたイベントをキャッチします。
これにより、開発者は、使用するコンポーネントがポータルを使用して実装されているかどうかに関係なく、開発を進めることができます。子要素で発生したイベントは、関係なくバブリングアップします。
既知の問題として、**閉じられた**シャドウルートへのポータルからのイベントは2回ディスパッチされます。1回はシャドウルート内の要素をターゲットとし、もう1回はホスト要素自体をターゲットとします。**開かれた**シャドウルートは正常に機能することに注意してください。これが影響する場合は、バグレポートを開いてください。