Support setting class on SVG elements

packages/sycamore-macro/src/view/codegen.rs

@@ -293,11 +293,7 @@ impl Codegen {
                     }
                 } else {
                     quote! {
-                        ::sycamore::generic_node::GenericNode::set_attribute(
-                            &__el,
-                            #name,
-                            #quoted_text,
-                        );
+                        ::sycamore::generic_node::GenericNode::set_attribute(&__el, #name, #quoted_text);
                     }
                 };
 

packages/sycamore-reactive/src/signal.rs

@@ -217,7 +217,7 @@ impl<T> Signal<T> {
     }
 
     /// Set the current value of the state wrapped in a [`Rc`] _without_ triggering subscribers.
-    /// 
+    ///
     /// See the documentation for [`Signal::set_rc()`] for more information.
     ///
     /// Make sure you know what you are doing because this can make state inconsistent.

packages/sycamore/src/generic_node/dom_node.rs

@@ -22,19 +22,18 @@ use super::SycamoreElement;
 extern "C" {
     #[wasm_bindgen(extends = Node)]
     pub(super) type NodeWithId;
-
     #[wasm_bindgen(method, getter, js_name = "$$$nodeId")]
     pub fn node_id(this: &NodeWithId) -> Option<usize>;
-
     #[wasm_bindgen(method, setter, js_name = "$$$nodeId")]
     pub fn set_node_id(this: &NodeWithId, id: usize);
-}
 
-#[wasm_bindgen]
-extern "C" {
+    #[wasm_bindgen(extends = Element)]
+    type ElementTrySetClassName;
+    #[wasm_bindgen(method, catch, setter, js_name = "className")]
+    fn try_set_class_name(this: &ElementTrySetClassName, class_name: &str) -> Result<(), JsValue>;
+
     #[wasm_bindgen(extends = Document)]
     type DocumentCreateTextNodeInt;
-
     #[wasm_bindgen(method, js_name = "createTextNode")]
     pub fn create_text_node_int(this: &DocumentCreateTextNodeInt, num: i32) -> web_sys::Text;
 }
@@ -226,7 +225,18 @@ impl GenericNode for DomNode {
     }
 
     fn set_class_name(&self, value: &str) {
-        self.node.unchecked_ref::<Element>().set_class_name(value);
+        if self
+            .node
+            .unchecked_ref::<ElementTrySetClassName>()
+            .try_set_class_name(value)
+            .is_err()
+        {
+            // Node is a SVG element.
+            self.node
+                .unchecked_ref::<Element>()
+                .set_attribute("class", value)
+                .unwrap_throw();
+        }
     }
 
     fn add_class(&self, class: &str) {

packages/sycamore/tests/web/main.rs

@@ -8,6 +8,7 @@ pub mod keyed;
 pub mod portal;
 pub mod reconcile;
 pub mod render;
+pub mod svg;
 
 use sycamore::html;
 use sycamore::prelude::*;

packages/sycamore/tests/web/svg.rs

@@ -0,0 +1,13 @@
+use super::*;
+
+#[wasm_bindgen_test]
+fn issue_391_svg_with_class_should_not_use_classname() {
+    sycamore::render_to(
+        |cx| {
+            view! { cx,
+                svg(class="my-class")
+            }
+        },
+        &test_container(),
+    );
+}