Scoped event handlers

examples/portals/src/main.rs

@@ -68,34 +68,71 @@ impl Component for ShadowDOMHost {
 }
 
 pub struct App {
-    pub style_html: Html,
+    style_html: Html,
+    title_element: Element,
+    counter: u32,
+}
+
+pub enum AppMessage {
+    IncreaseCounter,
 }
 
 impl Component for App {
-    type Message = ();
+    type Message = AppMessage;
     type Properties = ();
 
     fn create(_ctx: &Context<Self>) -> Self {
         let document_head = gloo_utils::document()
             .head()
             .expect("head element to be present");
+        let title_element = document_head
+            .query_selector("title")
+            .expect("to find a title element")
+            .expect("to find a title element");
+        title_element.set_text_content(None); // Clear the title element
         let style_html = create_portal(
             html! {
                 <style>{"p { color: red; }"}</style>
             },
             document_head.into(),
         );
-        Self { style_html }
+        Self {
+            style_html,
+            title_element,
+            counter: 0,
+        }
     }
 
-    fn view(&self, _ctx: &Context<Self>) -> Html {
+    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
+        match msg {
+            AppMessage::IncreaseCounter => self.counter += 1,
+        }
+        true
+    }
+
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        let onclick = ctx.link().callback(|_| AppMessage::IncreaseCounter);
+        let title = create_portal(
+            html! {
+                if self.counter > 0 {
+                    {format!("Clicked {} times", self.counter)}
+                } else {
+                    {"Yew • Portals"}
+                }
+            },
+            self.title_element.clone(),
+        );
         html! {
             <>
             {self.style_html.clone()}
             <p>{"This paragraph is colored red, and its style is mounted into "}<pre>{"document.head"}</pre>{" with a portal"}</p>
             <ShadowDOMHost>
                 <p>{"This paragraph is rendered in a shadow dom and thus not affected by the surrounding styling context"}</p>
+                <span>{"Buttons clicked inside the shadow dom work fine."}</span>
+                <button {onclick}>{"Click me!"}</button>
             </ShadowDOMHost>
+            <p>{format!("The button has been clicked {} times. This is also reflected in the title of the tab!", self.counter)}</p>
+            {title}
             </>
         }
     }

packages/yew/src/dom_bundle/app_handle.rs

@@ -1,6 +1,6 @@
 //! [AppHandle] contains the state Yew keeps to bootstrap a component in an isolated scope.
 
-use super::{ComponentRenderState, Scoped};
+use super::{BSubtree, ComponentRenderState, Scoped};
 use crate::html::{IntoComponent, NodeRef, Scope};
 use std::ops::Deref;
 use std::rc::Rc;
@@ -21,14 +21,15 @@ where
     /// similarly to the `program` function in Elm. You should provide an initial model, `update`
     /// function which will update the state of the model and a `view` function which
     /// will render the model to a virtual DOM tree.
-    pub(crate) fn mount_with_props(element: Element, props: Rc<ICOMP::Properties>) -> Self {
-        clear_element(&element);
+    pub(crate) fn mount_with_props(host: Element, props: Rc<ICOMP::Properties>) -> Self {
+        clear_element(&host);
         let app = Self {
             scope: Scope::new(None),
         };
         let node_ref = NodeRef::default();
+        let hosting_root = BSubtree::create_root(&host);
         let initial_render_state =
-            ComponentRenderState::new(element, NodeRef::default(), &node_ref);
+            ComponentRenderState::new(hosting_root, host, NodeRef::default(), &node_ref);
         app.scope
             .mount_in_place(initial_render_state, node_ref, props);