Add syntax to bind to properties instead of attributes

packages/yew/src/dom_bundle/btag/attributes.rs

@@ -2,6 +2,7 @@ use std::collections::HashMap;
 use std::ops::Deref;
 
 use indexmap::IndexMap;
+use wasm_bindgen::JsValue;
 use web_sys::{Element, HtmlInputElement as InputElement, HtmlTextAreaElement as TextAreaElement};
 use yew::AttrValue;
 
@@ -148,12 +149,29 @@ impl Attributes {
     }
 
     fn set_attribute(el: &Element, key: &str, value: &str) {
-        el.set_attribute(key, value).expect("invalid attribute key")
+        match key {
+            // need to be attributes because, otherwise query selectors fail
+            "class" | "id" => el.set_attribute(key, value).expect("invalid attribute key"),
+            _ => {
+                let key = JsValue::from_str(key);
+                let value = JsValue::from_str(value);
+                js_sys::Reflect::set(el.as_ref(), &key, &value).expect("invalid attribute key");
+            }
+        }
     }
 
     fn remove_attribute(el: &Element, key: &str) {
-        el.remove_attribute(key)
-            .expect("could not remove attribute")
+        match key {
+            // need to be attributes because, otherwise query selectors fail
+            "class" | "id" => el
+                .remove_attribute(key)
+                .expect("could not remove attribute"),
+            _ => {
+                let key = JsValue::from_str(key);
+                js_sys::Reflect::set(el.as_ref(), &key, &JsValue::UNDEFINED)
+                    .expect("could not remove attribute");
+            }
+        }
     }
 }
 
@@ -247,3 +265,55 @@ impl Apply for Attributes {
         }
     }
 }
+
+#[cfg(target_arch = "wasm32")]
+#[cfg(test)]
+mod tests {
+    use gloo::utils::document;
+    use js_sys::Reflect;
+    use wasm_bindgen_test::{wasm_bindgen_test as test, wasm_bindgen_test_configure};
+
+    use super::*;
+
+    wasm_bindgen_test_configure!(run_in_browser);
+
+    fn create_element() -> (Element, BSubtree) {
+        let element = document()
+            .create_element("a")
+            .expect("failed to create element");
+        let btree = BSubtree::create_root(&element);
+        (element, btree)
+    }
+
+    #[test]
+    fn properties_are_set() {
+        let attrs = Attributes::Static(&[["href", "https://example.com/"], ["alt", "somewhere"]]);
+        let (element, btree) = create_element();
+        attrs.apply(&btree, &element);
+        assert_eq!(
+            Reflect::get(element.as_ref(), &JsValue::from_str("href"))
+                .expect("no href")
+                .as_string()
+                .expect("not a string"),
+            "https://example.com/",
+            "property `href` not set properly"
+        );
+        assert_eq!(
+            Reflect::get(element.as_ref(), &JsValue::from_str("alt"))
+                .expect("no alt")
+                .as_string()
+                .expect("not a string"),
+            "somewhere",
+            "property `alt` not set properly"
+        );
+    }
+
+    #[test]
+    fn class_id_are_attrs() {
+        let attrs = Attributes::Static(&[["id", "foo"], ["class", "thing"]]);
+        let (element, btree) = create_element();
+        attrs.apply(&btree, &element);
+        assert_eq!(element.get_attribute("id").unwrap(), "foo");
+        assert_eq!(element.get_attribute("class").unwrap(), "thing");
+    }
+}

packages/yew/src/dom_bundle/btag/mod.rs

@@ -386,7 +386,7 @@ mod feat_hydration {
 #[cfg(test)]
 mod tests {
     use gloo::utils::document;
-    use wasm_bindgen::JsCast;
+    use wasm_bindgen::{JsCast, JsValue};
     use wasm_bindgen_test::{wasm_bindgen_test as test, wasm_bindgen_test_configure};
     use web_sys::HtmlInputElement as InputElement;
 
@@ -969,8 +969,20 @@ mod tests {
                 .dyn_ref::<web_sys::Element>()
                 .unwrap()
                 .outer_html(),
-            "<div tabindex=\"0\"></div>"
-        )
+            "<div></div>"
+        );
+
+        assert_eq!(
+            js_sys::Reflect::get(
+                test_ref.get().unwrap().as_ref(),
+                &JsValue::from_str("tabindex")
+            )
+            .expect("no tabindex")
+            .as_string()
+            .expect("not a string"),
+            "0",
+            "property `tabindex` not set properly"
+        );
     }
 }
 

packages/yew/tests/suspense.rs

@@ -15,7 +15,7 @@ use yew::platform::time::sleep;
 use yew::prelude::*;
 use yew::suspense::{use_future, use_future_with_deps, Suspension, SuspensionResult};
 
-wasm_bindgen_test::wasm_bindgen_test_configure!(run_in_browser);
+wasm_bindgen_test_configure!(run_in_browser);
 
 #[wasm_bindgen_test]
 async fn suspense_works() {