fix: mount stateful component into the shadown dom, so stylesheet can…

… be scoped
ivanceras · Apr 18, 2024 · 008e23f · 008e23f
1 parent 056918d
commit 008e23f
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 8 deletions.
diff --git a/crates/core/src/dom/component/stateful_component.rs b/crates/core/src/dom/component/stateful_component.rs
@@ -114,7 +114,7 @@ where
     }
 
     fn view(&self) -> Node<Self::MSG> {
-        <Self as Component>::view(self)
+        Component::view(self)
     }
 
     fn stylesheet() -> Vec<String> {
@@ -145,7 +145,11 @@ where
     let mut program = Program::from_rc_app(Rc::clone(&app));
     let children: Vec<Node<MSG>> = children.into_iter().collect();
     let mount_event = on_component_mount(move |me| {
-        program.mount(&me.target_node.as_node(), MountProcedure::append());
+        program.mount(&me.target_node.as_node(), MountProcedure::append_to_shadow());
+        let stylesheet = <COMP as Component>::stylesheet().join("\n");
+        log::info!("stylesheet: {}", stylesheet);
+        program.inject_style_to_mount(&stylesheet);
+        program.inject_style_to_mount(&program.app_context.dynamic_style());
         program.update_dom().expect("update dom");
     });
     Node::Leaf(Leaf::StatefulComponent(StatefulModel {

diff --git a/crates/core/src/dom/dom_node.rs b/crates/core/src/dom/dom_node.rs
@@ -137,6 +137,16 @@ impl From<web_sys::Node> for DomNode {
                     parent: Rc::new(None),
                 }
             }
+            Node::DOCUMENT_FRAGMENT_NODE => {
+                let fragment: web_sys::DocumentFragment = node.unchecked_into();
+                DomNode {
+                    inner: DomInner::Fragment {
+                        fragment,
+                        children: Rc::new(RefCell::new(vec![])),
+                    },
+                    parent: Rc::new(None),
+                }
+            }
             _node_type => todo!("for: {_node_type:?}"),
         }
     }
@@ -838,6 +848,7 @@ where
                 .borrow_mut()
                 .attribute_changed(dom_attr.name, dom_attr.value);
         }
+
         // the component children is manually appended to the StatefulComponent
         // here to allow the conversion of dom nodes with its event
         // listener and removing the generics msg

diff --git a/crates/core/src/dom/program.rs b/crates/core/src/dom/program.rs
@@ -353,27 +353,25 @@ where
                 .expect("mount node")
                 .clone(),
             MountTarget::ShadowRoot => {
-                /*
                 let mount_element: web_sys::Element = self
                     .mount_node
                     .borrow()
                     .as_ref()
                     .expect("mount node")
-                    .clone()
-                    .unchecked_into();
+                    .as_element();
+
                 mount_element
                     .attach_shadow(&web_sys::ShadowRootInit::new(web_sys::ShadowRootMode::Open))
                     .expect("unable to attached shadow");
                 let mount_shadow = mount_element.shadow_root().expect("must have a shadow");
+                let shadow_node: web_sys::Node = mount_shadow.unchecked_into();
 
-                *self.mount_node.borrow_mut() = Some(mount_shadow.unchecked_into());
+                *self.mount_node.borrow_mut() = Some(DomNode::from(shadow_node));
                 self.mount_node
                     .borrow()
                     .as_ref()
                     .expect("mount_node")
                     .clone()
-                */
-                todo!("shadow onhold!..")
             }
         };
 

diff --git a/examples/experimentals/src/button.rs b/examples/experimentals/src/button.rs
@@ -45,6 +45,20 @@ impl Component for Button {
             <div class="external_children" on_mount=|me|Msg::ExternContMounted(me.target_node)></div>
         </button>
     }
+
+    fn stylesheet() -> Vec<String> {
+        vec![jss! {
+            "button": {
+              background: "#EE88E5",
+              color: "light blue",
+              padding: "10px 10px",
+              margin: "10px 10px",
+              border: 0,
+              font_size: "1.5rem",
+              border_radius: "5px",
+            }
+        }]
+    }
 }
 
 impl StatefulComponent for Button {

diff --git a/examples/experimentals/src/date_time.rs b/examples/experimentals/src/date_time.rs
@@ -157,6 +157,10 @@ where
         }]
     }
 
+    fn style(&self) -> Vec<String>{
+        vec![".just{some:dynamc_style}".to_string()]
+    }
+
     fn observed_attributes() -> Vec<AttributeName> {
         vec!["date", "time", "interval"]
     }