From 971eaa8e1910ce240e0b24aa78409f204b616001 Mon Sep 17 00:00:00 2001
From: Muhammad Hamza <muhammadhamza1311@gmail.com>
Date: Mon, 8 Aug 2022 00:41:08 +0500
Subject: [PATCH 01/17] Set to properties, not attributes

---
 packages/yew/src/dom_bundle/btag/attributes.rs | 10 +++++++---
 packages/yew/src/dom_bundle/btag/mod.rs        |  6 +++---
 packages/yew/tests/suspense.rs                 | 10 +++++-----
 3 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/packages/yew/src/dom_bundle/btag/attributes.rs b/packages/yew/src/dom_bundle/btag/attributes.rs
index 05bbf507286..b2185b32b04 100644
--- a/packages/yew/src/dom_bundle/btag/attributes.rs
+++ b/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,15 @@ impl Attributes {
     }
 
     fn set_attribute(el: &Element, key: &str, value: &str) {
-        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")
+        let key = JsValue::from_str(key);
+        js_sys::Reflect::set(el.as_ref(), &key, &JsValue::UNDEFINED)
+            .expect("could not remove attribute");
     }
 }
 
diff --git a/packages/yew/src/dom_bundle/btag/mod.rs b/packages/yew/src/dom_bundle/btag/mod.rs
index 55262c346e2..b4083d43ae3 100644
--- a/packages/yew/src/dom_bundle/btag/mod.rs
+++ b/packages/yew/src/dom_bundle/btag/mod.rs
@@ -722,12 +722,12 @@ mod tests {
         assert!(vtag.reference().has_attribute("class"));
     }
 
-    #[test]
+    // #[test]
     fn it_sets_class_name_static() {
         test_set_class_name(|| html! { <div class="ferris the crab"></div> });
     }
 
-    #[test]
+    // #[test]
     fn it_sets_class_name_dynamic() {
         test_set_class_name(|| html! { <div class={"ferris the crab".to_owned()}></div> });
     }
@@ -932,7 +932,7 @@ mod tests {
     }
 
     // test for bug: https://github.com/yewstack/yew/pull/2653
-    #[test]
+    // #[test]
     fn test_index_map_attribute_diff() {
         let (root, scope, parent) = setup_parent();
 
diff --git a/packages/yew/tests/suspense.rs b/packages/yew/tests/suspense.rs
index 41980ac279a..f3834552529 100644
--- a/packages/yew/tests/suspense.rs
+++ b/packages/yew/tests/suspense.rs
@@ -15,9 +15,9 @@ 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]
+// #[wasm_bindgen_test]
 async fn suspense_works() {
     #[derive(PartialEq)]
     pub struct SleepState {
@@ -161,7 +161,7 @@ async fn suspense_works() {
     );
 }
 
-#[wasm_bindgen_test]
+// #[wasm_bindgen_test]
 async fn suspense_not_suspended_at_start() {
     #[derive(PartialEq)]
     pub struct SleepState {
@@ -278,7 +278,7 @@ async fn suspense_not_suspended_at_start() {
     );
 }
 
-#[wasm_bindgen_test]
+// #[wasm_bindgen_test]
 async fn suspense_nested_suspense_works() {
     #[derive(PartialEq)]
     pub struct SleepState {
@@ -413,7 +413,7 @@ async fn suspense_nested_suspense_works() {
     );
 }
 
-#[wasm_bindgen_test]
+// #[wasm_bindgen_test]
 async fn effects_not_run_when_suspended() {
     #[derive(PartialEq)]
     pub struct SleepState {

From 2177f8c5fd71903788704d8f008c07379dc3d781 Mon Sep 17 00:00:00 2001
From: Muhammad Hamza <muhammadhamza1311@gmail.com>
Date: Mon, 8 Aug 2022 16:04:49 +0500
Subject: [PATCH 02/17] fix tests

---
 .../yew/src/dom_bundle/btag/attributes.rs     | 26 ++++++++++++++-----
 packages/yew/src/dom_bundle/btag/mod.rs       |  4 +--
 packages/yew/tests/suspense.rs                |  8 +++---
 3 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/packages/yew/src/dom_bundle/btag/attributes.rs b/packages/yew/src/dom_bundle/btag/attributes.rs
index b2185b32b04..57b05d3d855 100644
--- a/packages/yew/src/dom_bundle/btag/attributes.rs
+++ b/packages/yew/src/dom_bundle/btag/attributes.rs
@@ -149,15 +149,29 @@ impl Attributes {
     }
 
     fn set_attribute(el: &Element, key: &str, value: &str) {
-        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");
+        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) {
-        let key = JsValue::from_str(key);
-        js_sys::Reflect::set(el.as_ref(), &key, &JsValue::UNDEFINED)
-            .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");
+            }
+        }
     }
 }
 
diff --git a/packages/yew/src/dom_bundle/btag/mod.rs b/packages/yew/src/dom_bundle/btag/mod.rs
index b4083d43ae3..5463a4e875c 100644
--- a/packages/yew/src/dom_bundle/btag/mod.rs
+++ b/packages/yew/src/dom_bundle/btag/mod.rs
@@ -722,12 +722,12 @@ mod tests {
         assert!(vtag.reference().has_attribute("class"));
     }
 
-    // #[test]
+    #[test]
     fn it_sets_class_name_static() {
         test_set_class_name(|| html! { <div class="ferris the crab"></div> });
     }
 
-    // #[test]
+    #[test]
     fn it_sets_class_name_dynamic() {
         test_set_class_name(|| html! { <div class={"ferris the crab".to_owned()}></div> });
     }
diff --git a/packages/yew/tests/suspense.rs b/packages/yew/tests/suspense.rs
index f3834552529..969cc5fcbf6 100644
--- a/packages/yew/tests/suspense.rs
+++ b/packages/yew/tests/suspense.rs
@@ -17,7 +17,7 @@ use yew::suspense::{use_future, use_future_with_deps, Suspension, SuspensionResu
 
 wasm_bindgen_test_configure!(run_in_browser);
 
-// #[wasm_bindgen_test]
+#[wasm_bindgen_test]
 async fn suspense_works() {
     #[derive(PartialEq)]
     pub struct SleepState {
@@ -161,7 +161,7 @@ async fn suspense_works() {
     );
 }
 
-// #[wasm_bindgen_test]
+#[wasm_bindgen_test]
 async fn suspense_not_suspended_at_start() {
     #[derive(PartialEq)]
     pub struct SleepState {
@@ -278,7 +278,7 @@ async fn suspense_not_suspended_at_start() {
     );
 }
 
-// #[wasm_bindgen_test]
+#[wasm_bindgen_test]
 async fn suspense_nested_suspense_works() {
     #[derive(PartialEq)]
     pub struct SleepState {
@@ -413,7 +413,7 @@ async fn suspense_nested_suspense_works() {
     );
 }
 
-// #[wasm_bindgen_test]
+#[wasm_bindgen_test]
 async fn effects_not_run_when_suspended() {
     #[derive(PartialEq)]
     pub struct SleepState {

From 27efd0a904c4c0a2fa8e4e1d97cbf7d63746c806 Mon Sep 17 00:00:00 2001
From: Muhammad Hamza <muhammadhamza1311@gmail.com>
Date: Mon, 8 Aug 2022 17:26:57 +0500
Subject: [PATCH 03/17] Add tests

---
 .../yew/src/dom_bundle/btag/attributes.rs     | 49 +++++++++++++++++++
 1 file changed, 49 insertions(+)

diff --git a/packages/yew/src/dom_bundle/btag/attributes.rs b/packages/yew/src/dom_bundle/btag/attributes.rs
index 57b05d3d855..d8d4136f354 100644
--- a/packages/yew/src/dom_bundle/btag/attributes.rs
+++ b/packages/yew/src/dom_bundle/btag/attributes.rs
@@ -265,3 +265,52 @@ impl Apply for Attributes {
         }
     }
 }
+
+#[cfg(target_arch = "wasm32")]
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use wasm_bindgen_test::{wasm_bindgen_test as test, wasm_bindgen_test_configure};
+    use gloo::utils::document;
+    use js_sys::Reflect;
+
+    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");
+    }
+}

From 866dbe66892d46731b16b23bae013f447f259a4a Mon Sep 17 00:00:00 2001
From: Muhammad Hamza <muhammadhamza1311@gmail.com>
Date: Mon, 8 Aug 2022 17:35:27 +0500
Subject: [PATCH 04/17] enable disabled test, fmt

---
 examples/Cargo.lock                           | 22 +++++++++++---
 .../yew/src/dom_bundle/btag/attributes.rs     | 29 ++++++++++---------
 packages/yew/src/dom_bundle/btag/mod.rs       | 20 ++++++++++---
 3 files changed, 50 insertions(+), 21 deletions(-)

diff --git a/examples/Cargo.lock b/examples/Cargo.lock
index fe4c6885716..391e2435811 100644
--- a/examples/Cargo.lock
+++ b/examples/Cargo.lock
@@ -2270,21 +2270,33 @@ checksum = "b6bc1c9ce2b5135ac7f93c72918fc37feb872bdc6a5533a8b85eb4b86bfdae52"
 
 [[package]]
 name = "tracing"
-version = "0.1.35"
+version = "0.1.36"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a400e31aa60b9d44a52a8ee0343b5b18566b03a8321e0d321f695cf56e940160"
+checksum = "2fce9567bd60a67d08a16488756721ba392f24f29006402881e43b19aac64307"
 dependencies = [
  "cfg-if",
  "log",
  "pin-project-lite",
+ "tracing-attributes",
  "tracing-core",
 ]
 
+[[package]]
+name = "tracing-attributes"
+version = "0.1.22"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "11c75893af559bc8e10716548bdef5cb2b983f8e637db9d0e15126b61b484ee2"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
 [[package]]
 name = "tracing-core"
-version = "0.1.28"
+version = "0.1.29"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7b7358be39f2f274f322d2aaed611acc57f382e8eb1e5b48cb9ae30933495ce7"
+checksum = "5aeea4303076558a00714b823f9ad67d58a3bbda1df83d8827d21193156e22f7"
 dependencies = [
  "once_cell",
 ]
@@ -2668,6 +2680,7 @@ dependencies = [
  "tokio",
  "tokio-stream",
  "tokio-util 0.7.3",
+ "tracing",
  "wasm-bindgen",
  "wasm-bindgen-futures",
  "web-sys",
@@ -2704,6 +2717,7 @@ dependencies = [
  "route-recognizer",
  "serde",
  "serde_urlencoded",
+ "tracing",
  "wasm-bindgen",
  "web-sys",
  "yew",
diff --git a/packages/yew/src/dom_bundle/btag/attributes.rs b/packages/yew/src/dom_bundle/btag/attributes.rs
index d8d4136f354..f9c06de2ce9 100644
--- a/packages/yew/src/dom_bundle/btag/attributes.rs
+++ b/packages/yew/src/dom_bundle/btag/attributes.rs
@@ -269,34 +269,40 @@ impl Apply for Attributes {
 #[cfg(target_arch = "wasm32")]
 #[cfg(test)]
 mod tests {
-    use super::*;
-    use wasm_bindgen_test::{wasm_bindgen_test as test, wasm_bindgen_test_configure};
     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 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 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"),
+            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"),
+            Reflect::get(element.as_ref(), &JsValue::from_str("alt"))
+                .expect("no alt")
+                .as_string()
+                .expect("not a string"),
             "somewhere",
             "property `alt` not set properly"
         );
@@ -304,10 +310,7 @@ mod tests {
 
     #[test]
     fn class_id_are_attrs() {
-        let attrs = Attributes::Static(&[
-            ["id", "foo"],
-            ["class", "thing"],
-        ]);
+        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");
diff --git a/packages/yew/src/dom_bundle/btag/mod.rs b/packages/yew/src/dom_bundle/btag/mod.rs
index 5463a4e875c..7d44ff99301 100644
--- a/packages/yew/src/dom_bundle/btag/mod.rs
+++ b/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;
 
@@ -932,7 +932,7 @@ mod tests {
     }
 
     // test for bug: https://github.com/yewstack/yew/pull/2653
-    // #[test]
+    #[test]
     fn test_index_map_attribute_diff() {
         let (root, scope, parent) = setup_parent();
 
@@ -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"
+        );
     }
 }
 

From b0c01269b98ebb9a0a689da13b8a2b8ab027e838 Mon Sep 17 00:00:00 2001
From: Muhammad Hamza <muhammadhamza1311@gmail.com>
Date: Mon, 8 Aug 2022 22:28:40 +0500
Subject: [PATCH 05/17] Introduce @key syntax to forcefully set as attribute

---
 examples/counter_functional/src/main.rs       | 10 +++---
 .../yew-macro/src/html_tree/html_element.rs   | 36 ++++++++++++++-----
 packages/yew-macro/src/props/prop.rs          | 22 +++++++-----
 packages/yew-macro/src/props/prop_macro.rs    |  2 +-
 .../yew/src/dom_bundle/btag/attributes.rs     | 31 ++++++++--------
 packages/yew/src/virtual_dom/mod.rs           | 31 ++++++++++------
 packages/yew/src/virtual_dom/vtag.rs          | 16 +++++++--
 7 files changed, 96 insertions(+), 52 deletions(-)

diff --git a/examples/counter_functional/src/main.rs b/examples/counter_functional/src/main.rs
index c85b7549346..1fb79081b66 100644
--- a/examples/counter_functional/src/main.rs
+++ b/examples/counter_functional/src/main.rs
@@ -14,13 +14,13 @@ fn App() -> Html {
         Callback::from(move |_| state.set(*state - 1))
     };
 
-    html!(
+    html! {
         <>
-        <p> {"current count: "} {*state} </p>
-        <button onclick={incr_counter}> {"+"} </button>
-        <button onclick={decr_counter}> {"-"} </button>
+            <p @disabled={false}> {"current count: "} {*state} </p>
+            <button onclick={incr_counter}> {"+"} </button>
+            <button onclick={decr_counter}> {"-"} </button>
         </>
-    )
+    }
 }
 
 fn main() {
diff --git a/packages/yew-macro/src/html_tree/html_element.rs b/packages/yew-macro/src/html_tree/html_element.rs
index db4dfae77fb..b2c1b640162 100644
--- a/packages/yew-macro/src/html_tree/html_element.rs
+++ b/packages/yew-macro/src/html_tree/html_element.rs
@@ -135,10 +135,10 @@ impl ToTokens for HtmlElement {
         // other attributes
 
         let attributes = {
-            let normal_attrs = attributes.iter().map(|Prop { label, value, .. }| {
-                (label.to_lit_str(), value.optimize_literals_tagged())
+            let normal_attrs = attributes.iter().map(|Prop { label, value, is_forced_attribute, .. }| {
+                (label.to_lit_str(), value.optimize_literals_tagged(), *is_forced_attribute)
             });
-            let boolean_attrs = booleans.iter().filter_map(|Prop { label, value, .. }| {
+            let boolean_attrs = booleans.iter().filter_map(|Prop { label, value, is_forced_attribute, .. }| {
                 let key = label.to_lit_str();
                 Some((
                     key.clone(),
@@ -166,6 +166,7 @@ impl ToTokens for HtmlElement {
                             },
                         ),
                     },
+                    *is_forced_attribute
                 ))
             });
             let class_attr = classes.as_ref().and_then(|classes| match classes {
@@ -196,6 +197,7 @@ impl ToTokens for HtmlElement {
                                 __yew_classes
                             }
                         }),
+                        false,
                     ))
                 }
                 ClassesForm::Single(classes) => {
@@ -207,6 +209,7 @@ impl ToTokens for HtmlElement {
                                 Some((
                                     LitStr::new("class", lit.span()),
                                     Value::Static(quote! { #lit }),
+                                    false,
                                 ))
                             }
                         }
@@ -216,6 +219,7 @@ impl ToTokens for HtmlElement {
                                 Value::Dynamic(quote! {
                                     ::std::convert::Into::<::yew::html::Classes>::into(#classes)
                                 }),
+                                false,
                             ))
                         }
                     }
@@ -223,14 +227,19 @@ impl ToTokens for HtmlElement {
             });
 
             /// Try to turn attribute list into a `::yew::virtual_dom::Attributes::Static`
-            fn try_into_static(src: &[(LitStr, Value)]) -> Option<TokenStream> {
+            fn try_into_static(src: &[(LitStr, Value, bool)]) -> Option<TokenStream> {
                 let mut kv = Vec::with_capacity(src.len());
-                for (k, v) in src.iter() {
+                for (k, v, is_forced_attribute) in src.iter() {
                     let v = match v {
                         Value::Static(v) => quote! { #v },
                         Value::Dynamic(_) => return None,
                     };
-                    kv.push(quote! { [ #k, #v ] });
+                    let apply_as = if *is_forced_attribute {
+                        quote! { ::yew::virtual_dom::ApplyAttributeAs::Attribute }
+                    } else {
+                        quote! { ::yew::virtual_dom::ApplyAttributeAs::Property }
+                    };
+                    kv.push(quote! { ( #k, #v, #apply_as ) });
                 }
 
                 Some(quote! { ::yew::virtual_dom::Attributes::Static(&[#(#kv),*]) })
@@ -239,10 +248,19 @@ impl ToTokens for HtmlElement {
             let attrs = normal_attrs
                 .chain(boolean_attrs)
                 .chain(class_attr)
-                .collect::<Vec<(LitStr, Value)>>();
+                .collect::<Vec<(LitStr, Value, bool)>>();
             try_into_static(&attrs).unwrap_or_else(|| {
-                let keys = attrs.iter().map(|(k, _)| quote! { #k });
-                let values = attrs.iter().map(|(_, v)| wrap_attr_value(v));
+                let keys = attrs.iter().map(|(k, _, _)| quote! { #k });
+                let values = attrs.iter()
+                    .map(|(_, v, is_forced_attribute)| {
+                        let apply_as = if *is_forced_attribute {
+                            quote! { ::yew::virtual_dom::ApplyAttributeAs::Attribute }
+                        } else {
+                            quote! { ::yew::virtual_dom::ApplyAttributeAs::Property }
+                        };
+                        let value = wrap_attr_value(v);
+                        quote! { (#value, #apply_as) }
+                    });
                 quote! {
                     ::yew::virtual_dom::Attributes::Dynamic{
                         keys: &[#(#keys),*],
diff --git a/packages/yew-macro/src/props/prop.rs b/packages/yew-macro/src/props/prop.rs
index 8dbd568efc2..820eb2963fd 100644
--- a/packages/yew-macro/src/props/prop.rs
+++ b/packages/yew-macro/src/props/prop.rs
@@ -14,17 +14,21 @@ use crate::html_tree::HtmlDashedName;
 use crate::stringify::Stringify;
 
 pub struct Prop {
+    pub is_forced_attribute: bool,
     pub label: HtmlDashedName,
     /// Punctuation between `label` and `value`.
     pub value: Expr,
 }
 impl Parse for Prop {
     fn parse(input: ParseStream) -> syn::Result<Self> {
-        if input.peek(Brace) {
-            Self::parse_shorthand_prop_assignment(input)
+        let at = input.parse::<Token![@]>().map(|_| true).unwrap_or(false);
+        let prop = if input.peek(Brace) {
+            Self::parse_shorthand_prop_assignment(input, at)
         } else {
-            Self::parse_prop_assignment(input)
-        }
+            Self::parse_prop_assignment(input, at)
+        };
+        eprintln!("prop => {:?}; at?: {}", prop.as_ref().map(|prop| format!("label: {}, value: {:?}", prop.label.to_string(), prop.value)), at);
+        prop
     }
 }
 
@@ -33,7 +37,7 @@ impl Prop {
     /// Parse a prop using the shorthand syntax `{value}`, short for `value={value}`
     /// This only allows for labels with no hyphens, as it would otherwise create
     /// an ambiguity in the syntax
-    fn parse_shorthand_prop_assignment(input: ParseStream) -> syn::Result<Self> {
+    fn parse_shorthand_prop_assignment(input: ParseStream, is_forced_attribute: bool) -> syn::Result<Self> {
         let value;
         let _brace = braced!(value in input);
         let expr = value.parse::<Expr>()?;
@@ -44,7 +48,7 @@ impl Prop {
         }) = expr
         {
             if let (Some(ident), true) = (path.get_ident(), attrs.is_empty()) {
-                syn::Result::Ok(HtmlDashedName::from(ident.clone()))
+                Ok(HtmlDashedName::from(ident.clone()))
             } else {
                 Err(syn::Error::new_spanned(
                     path,
@@ -59,11 +63,11 @@ impl Prop {
             ));
         }?;
 
-        Ok(Self { label, value: expr })
+        Ok(Self { label, value: expr, is_forced_attribute })
     }
 
     /// Parse a prop of the form `label={value}`
-    fn parse_prop_assignment(input: ParseStream) -> syn::Result<Self> {
+    fn parse_prop_assignment(input: ParseStream, is_forced_attribute: bool) -> syn::Result<Self> {
         let label = input.parse::<HtmlDashedName>()?;
         let equals = input.parse::<Token![=]>().map_err(|_| {
             syn::Error::new_spanned(
@@ -83,7 +87,7 @@ impl Prop {
         }
 
         let value = parse_prop_value(input)?;
-        Ok(Self { label, value })
+        Ok(Self { label, value, is_forced_attribute })
     }
 }
 
diff --git a/packages/yew-macro/src/props/prop_macro.rs b/packages/yew-macro/src/props/prop_macro.rs
index 172b5f53be6..060b60f3259 100644
--- a/packages/yew-macro/src/props/prop_macro.rs
+++ b/packages/yew-macro/src/props/prop_macro.rs
@@ -61,7 +61,7 @@ impl Parse for PropValue {
 impl From<PropValue> for Prop {
     fn from(prop_value: PropValue) -> Prop {
         let PropValue { label, value } = prop_value;
-        Prop { label, value }
+        Prop { label, value, is_forced_attribute: false }
     }
 }
 
diff --git a/packages/yew/src/dom_bundle/btag/attributes.rs b/packages/yew/src/dom_bundle/btag/attributes.rs
index f9c06de2ce9..c10402ce41f 100644
--- a/packages/yew/src/dom_bundle/btag/attributes.rs
+++ b/packages/yew/src/dom_bundle/btag/attributes.rs
@@ -9,7 +9,7 @@ use yew::AttrValue;
 use super::Apply;
 use crate::dom_bundle::BSubtree;
 use crate::virtual_dom::vtag::{InputFields, Value};
-use crate::virtual_dom::Attributes;
+use crate::virtual_dom::{ApplyAttributeAs, Attributes};
 
 impl<T: AccessValue> Apply for Value<T> {
     type Bundle = Self;
@@ -88,17 +88,17 @@ impl Attributes {
     #[cold]
     fn apply_diff_index_maps(
         el: &Element,
-        new: &IndexMap<AttrValue, AttrValue>,
-        old: &IndexMap<AttrValue, AttrValue>,
+        new: &IndexMap<AttrValue, (AttrValue, ApplyAttributeAs)>,
+        old: &IndexMap<AttrValue, (AttrValue, ApplyAttributeAs)>,
     ) {
         for (key, value) in new.iter() {
             match old.get(key) {
                 Some(old_value) => {
                     if value != old_value {
-                        Self::set_attribute(el, key, value);
+                        Self::set_attribute(el, key, value.0.as_ref());
                     }
                 }
-                None => Self::set_attribute(el, key, value),
+                None => Self::set_attribute(el, key, value.0.as_ref()),
             }
         }
 
@@ -113,17 +113,17 @@ impl Attributes {
     /// Works with any [Attributes] variants.
     #[cold]
     fn apply_diff_as_maps<'a>(el: &Element, new: &'a Self, old: &'a Self) {
-        fn collect(src: &Attributes) -> HashMap<&str, &str> {
+        fn collect(src: &Attributes) -> HashMap<&str, (&str, ApplyAttributeAs)> {
             use Attributes::*;
 
             match src {
-                Static(arr) => (*arr).iter().map(|[k, v]| (*k, *v)).collect(),
+                Static(arr) => (*arr).iter().map(|(k, v, apply_as)| (*k, (*v, *apply_as))).collect(),
                 Dynamic { keys, values } => keys
                     .iter()
                     .zip(values.iter())
-                    .filter_map(|(k, v)| v.as_ref().map(|v| (*k, v.as_ref())))
+                    .filter_map(|(k, v)| v.as_ref().map(|(v, apply_as)| (*k, (v.as_ref(), *apply_as))))
                     .collect(),
-                IndexMap(m) => m.iter().map(|(k, v)| (k.as_ref(), v.as_ref())).collect(),
+                IndexMap(m) => m.iter().map(|(k, (v, apply_as))| (k.as_ref(), (v.as_ref(), *apply_as))).collect(),
             }
         }
 
@@ -136,7 +136,8 @@ impl Attributes {
                 Some(old) => old != new,
                 None => true,
             } {
-                el.set_attribute(k, new).unwrap();
+                // todo: set property
+                el.set_attribute(k, new.0).unwrap();
             }
         }
 
@@ -182,19 +183,19 @@ impl Apply for Attributes {
     fn apply(self, _root: &BSubtree, el: &Element) -> Self {
         match &self {
             Self::Static(arr) => {
-                for kv in arr.iter() {
-                    Self::set_attribute(el, kv[0], kv[1]);
+                for (k, v, _) in arr.iter() {
+                    Self::set_attribute(el, *k, *v);
                 }
             }
             Self::Dynamic { keys, values } => {
                 for (k, v) in keys.iter().zip(values.iter()) {
-                    if let Some(v) = v {
+                    if let Some((v, _)) = v {
                         Self::set_attribute(el, k, v)
                     }
                 }
             }
             Self::IndexMap(m) => {
-                for (k, v) in m.iter() {
+                for (k, (v, _)) in m.iter() {
                     Self::set_attribute(el, k, v)
                 }
             }
@@ -235,7 +236,7 @@ impl Apply for Attributes {
                     }
                     macro_rules! set {
                         ($new:expr) => {
-                            Self::set_attribute(el, key!(), $new)
+                            Self::set_attribute(el, key!(), $new.0.as_ref())
                         };
                     }
 
diff --git a/packages/yew/src/virtual_dom/mod.rs b/packages/yew/src/virtual_dom/mod.rs
index e7d9797b18c..c603ea7aa56 100644
--- a/packages/yew/src/virtual_dom/mod.rs
+++ b/packages/yew/src/virtual_dom/mod.rs
@@ -145,6 +145,14 @@ mod feat_ssr {
     }
 }
 
+/// Defines if the [`Attributes`] is set as element's attribute or property
+#[allow(missing_docs)]
+#[derive(PartialEq, Eq, Copy, Clone, Debug)]
+pub enum ApplyAttributeAs {
+    Attribute,
+    Property
+}
+
 /// A collection of attributes for an element
 #[derive(PartialEq, Eq, Clone, Debug)]
 pub enum Attributes {
@@ -152,7 +160,7 @@ pub enum Attributes {
     ///
     /// Allows optimizing comparison to a simple pointer equality check and reducing allocations,
     /// if the attributes do not change on a node.
-    Static(&'static [[&'static str; 2]]),
+    Static(&'static [(&'static str, &'static str, ApplyAttributeAs)]),
 
     /// Static list of attribute keys with possibility to exclude attributes and dynamic attribute
     /// values.
@@ -165,12 +173,12 @@ pub enum Attributes {
 
         /// Attribute values. Matches [keys](Attributes::Dynamic::keys). Optional attributes are
         /// designated by setting [None].
-        values: Box<[Option<AttrValue>]>,
+        values: Box<[Option<(AttrValue, ApplyAttributeAs)>]>,
     },
 
     /// IndexMap is used to provide runtime attribute deduplication in cases where the html! macro
     /// was not used to guarantee it.
-    IndexMap(IndexMap<AttrValue, AttrValue>),
+    IndexMap(IndexMap<AttrValue, (AttrValue, ApplyAttributeAs)>),
 }
 
 impl Attributes {
@@ -183,19 +191,21 @@ impl Attributes {
     /// This function is suboptimal and does not inline well. Avoid on hot paths.
     pub fn iter<'a>(&'a self) -> Box<dyn Iterator<Item = (&'a str, &'a str)> + 'a> {
         match self {
-            Self::Static(arr) => Box::new(arr.iter().map(|kv| (kv[0], kv[1] as &'a str))),
+            Self::Static(arr) => Box::new(
+                arr.iter().map(|(k, v, _)| (*k, *v as &'a str))
+            ),
             Self::Dynamic { keys, values } => Box::new(
                 keys.iter()
                     .zip(values.iter())
-                    .filter_map(|(k, v)| v.as_ref().map(|v| (*k, v.as_ref()))),
+                    .filter_map(|(k, v)| v.as_ref().map(|(v, _)| (*k, v.as_ref()))),
             ),
-            Self::IndexMap(m) => Box::new(m.iter().map(|(k, v)| (k.as_ref(), v.as_ref()))),
+            Self::IndexMap(m) => Box::new(m.iter().map(|(k, (v, _))| (k.as_ref(), v.as_ref()))),
         }
     }
 
     /// Get a mutable reference to the underlying `IndexMap`.
     /// If the attributes are stored in the `Vec` variant, it will be converted.
-    pub fn get_mut_index_map(&mut self) -> &mut IndexMap<AttrValue, AttrValue> {
+    pub fn get_mut_index_map(&mut self) -> &mut IndexMap<AttrValue, (AttrValue, ApplyAttributeAs)> {
         macro_rules! unpack {
             () => {
                 match self {
@@ -209,7 +219,7 @@ impl Attributes {
         match self {
             Self::IndexMap(m) => m,
             Self::Static(arr) => {
-                *self = Self::IndexMap(arr.iter().map(|kv| (kv[0].into(), kv[1].into())).collect());
+                *self = Self::IndexMap(arr.iter().map(|(k, v, ty)| ((*k).into(), ((*v).into(), *ty))).collect());
                 unpack!()
             }
             Self::Dynamic { keys, values } => {
@@ -227,7 +237,8 @@ impl Attributes {
 }
 
 impl From<IndexMap<AttrValue, AttrValue>> for Attributes {
-    fn from(v: IndexMap<AttrValue, AttrValue>) -> Self {
+    fn from(map: IndexMap<AttrValue, AttrValue>) -> Self {
+        let v= map.into_iter().map(|(k, v)| (k, (v, ApplyAttributeAs::Property))).collect();
         Self::IndexMap(v)
     }
 }
@@ -236,7 +247,7 @@ impl From<IndexMap<&'static str, AttrValue>> for Attributes {
     fn from(v: IndexMap<&'static str, AttrValue>) -> Self {
         let v = v
             .into_iter()
-            .map(|(k, v)| (AttrValue::Static(k), v))
+            .map(|(k, v)| (AttrValue::Static(k), (v, ApplyAttributeAs::Property)))
             .collect();
         Self::IndexMap(v)
     }
diff --git a/packages/yew/src/virtual_dom/vtag.rs b/packages/yew/src/virtual_dom/vtag.rs
index cf69128ec31..a56ab8ccf35 100644
--- a/packages/yew/src/virtual_dom/vtag.rs
+++ b/packages/yew/src/virtual_dom/vtag.rs
@@ -9,7 +9,7 @@ use std::rc::Rc;
 
 use web_sys::{HtmlInputElement as InputElement, HtmlTextAreaElement as TextAreaElement};
 
-use super::{AttrValue, Attributes, Key, Listener, Listeners, VList, VNode};
+use super::{AttrValue, Attributes, Key, Listener, Listeners, VList, VNode, ApplyAttributeAs};
 use crate::html::{IntoPropValue, NodeRef};
 
 /// SVG namespace string used for creating svg elements
@@ -365,7 +365,17 @@ impl VTag {
     pub fn add_attribute(&mut self, key: &'static str, value: impl Into<AttrValue>) {
         self.attributes
             .get_mut_index_map()
-            .insert(AttrValue::Static(key), value.into());
+            .insert(AttrValue::Static(key), (value.into(), ApplyAttributeAs::Attribute));
+    }
+
+    /// Adds a key-value pair to element's property
+    ///
+    /// Not every property works when it set as an attribute. We use workarounds for:
+    /// `class` and `id`, which are both set as attributes.
+    pub fn set_property(&mut self, key: &'static str, value: impl Into<AttrValue>) {
+        self.attributes
+            .get_mut_index_map()
+            .insert(AttrValue::Static(key), (value.into(), ApplyAttributeAs::Property));
     }
 
     /// Sets attributes to a virtual node.
@@ -380,7 +390,7 @@ impl VTag {
     pub fn __macro_push_attr(&mut self, key: &'static str, value: impl IntoPropValue<AttrValue>) {
         self.attributes
             .get_mut_index_map()
-            .insert(AttrValue::from(key), value.into_prop_value());
+            .insert(AttrValue::from(key), (value.into_prop_value(), ApplyAttributeAs::Property));
     }
 
     /// Add event listener on the [VTag]'s  [Element](web_sys::Element).

From 0bb8cd5cf3e95f8b01b7aa7725a08f5ac954e57c Mon Sep 17 00:00:00 2001
From: Muhammad Hamza <muhammadhamza1311@gmail.com>
Date: Mon, 8 Aug 2022 22:52:44 +0500
Subject: [PATCH 06/17] Everything compiles

---
 examples/counter_functional/src/main.rs       | 49 ++++++++++---------
 .../yew-macro/src/html_tree/html_element.rs   |  2 +-
 packages/yew-macro/src/props/prop.rs          |  6 +--
 .../yew/src/dom_bundle/btag/attributes.rs     |  4 +-
 4 files changed, 30 insertions(+), 31 deletions(-)

diff --git a/examples/counter_functional/src/main.rs b/examples/counter_functional/src/main.rs
index 1fb79081b66..926d5fc3a99 100644
--- a/examples/counter_functional/src/main.rs
+++ b/examples/counter_functional/src/main.rs
@@ -1,28 +1,29 @@
 use yew::prelude::*;
-
-#[function_component]
-fn App() -> Html {
-    let state = use_state(|| 0);
-
-    let incr_counter = {
-        let state = state.clone();
-        Callback::from(move |_| state.set(*state + 1))
-    };
-
-    let decr_counter = {
-        let state = state.clone();
-        Callback::from(move |_| state.set(*state - 1))
-    };
-
-    html! {
-        <>
-            <p @disabled={false}> {"current count: "} {*state} </p>
-            <button onclick={incr_counter}> {"+"} </button>
-            <button onclick={decr_counter}> {"-"} </button>
-        </>
-    }
-}
+// #[function_component]
+// fn App() -> Html {
+//     let state = use_state(|| 0);
+//
+//     let incr_counter = {
+//         let state = state.clone();
+//         Callback::from(move |_| state.set(*state + 1))
+//     };
+//
+//     let decr_counter = {
+//         let state = state.clone();
+//         Callback::from(move |_| state.set(*state - 1))
+//     };
+//
+//     html! {
+//         <>
+//             <p @disabled={false}> {"current count: "} {*state} </p>
+//             <button onclick={incr_counter}> {"+"} </button>
+//             <button onclick={decr_counter}> {"-"} </button>
+//         </>
+//     }
+// }
 
 fn main() {
-    yew::Renderer::<App>::new().render();
+    let _d = html! {
+            <div class={format!("fail{}", "")}></div>
+    };
 }
diff --git a/packages/yew-macro/src/html_tree/html_element.rs b/packages/yew-macro/src/html_tree/html_element.rs
index b2c1b640162..8afa2e0ab37 100644
--- a/packages/yew-macro/src/html_tree/html_element.rs
+++ b/packages/yew-macro/src/html_tree/html_element.rs
@@ -259,7 +259,7 @@ impl ToTokens for HtmlElement {
                             quote! { ::yew::virtual_dom::ApplyAttributeAs::Property }
                         };
                         let value = wrap_attr_value(v);
-                        quote! { (#value, #apply_as) }
+                        quote! { ::std::option::Option::map(#value, |it| (it, ::yew::virtual_dom::ApplyAttributeAs::Property)) }
                     });
                 quote! {
                     ::yew::virtual_dom::Attributes::Dynamic{
diff --git a/packages/yew-macro/src/props/prop.rs b/packages/yew-macro/src/props/prop.rs
index 820eb2963fd..21adb48b75d 100644
--- a/packages/yew-macro/src/props/prop.rs
+++ b/packages/yew-macro/src/props/prop.rs
@@ -22,13 +22,11 @@ pub struct Prop {
 impl Parse for Prop {
     fn parse(input: ParseStream) -> syn::Result<Self> {
         let at = input.parse::<Token![@]>().map(|_| true).unwrap_or(false);
-        let prop = if input.peek(Brace) {
+        if input.peek(Brace) {
             Self::parse_shorthand_prop_assignment(input, at)
         } else {
             Self::parse_prop_assignment(input, at)
-        };
-        eprintln!("prop => {:?}; at?: {}", prop.as_ref().map(|prop| format!("label: {}, value: {:?}", prop.label.to_string(), prop.value)), at);
-        prop
+        }
     }
 }
 
diff --git a/packages/yew/src/dom_bundle/btag/attributes.rs b/packages/yew/src/dom_bundle/btag/attributes.rs
index c10402ce41f..7e7ab726857 100644
--- a/packages/yew/src/dom_bundle/btag/attributes.rs
+++ b/packages/yew/src/dom_bundle/btag/attributes.rs
@@ -288,7 +288,7 @@ mod tests {
 
     #[test]
     fn properties_are_set() {
-        let attrs = Attributes::Static(&[["href", "https://example.com/"], ["alt", "somewhere"]]);
+        let attrs = Attributes::Static(&[("href", "https://example.com/", ApplyAttributeAs::Property), ("alt", "somewhere", ApplyAttributeAs::Property)]);
         let (element, btree) = create_element();
         attrs.apply(&btree, &element);
         assert_eq!(
@@ -311,7 +311,7 @@ mod tests {
 
     #[test]
     fn class_id_are_attrs() {
-        let attrs = Attributes::Static(&[["id", "foo"], ["class", "thing"]]);
+        let attrs = Attributes::Static(&[("id", "foo", ApplyAttributeAs::Attribute), ("class", "thing", ApplyAttributeAs::Attribute)]);
         let (element, btree) = create_element();
         attrs.apply(&btree, &element);
         assert_eq!(element.get_attribute("id").unwrap(), "foo");

From 66e714c1fb7df3c1b1f4b2a6a2a5599eefdcb649 Mon Sep 17 00:00:00 2001
From: Muhammad Hamza <muhammadhamza1311@gmail.com>
Date: Mon, 8 Aug 2022 23:27:27 +0500
Subject: [PATCH 07/17] More tests

---
 .../yew/src/dom_bundle/btag/attributes.rs     | 151 +++++++++++++-----
 packages/yew/src/dom_bundle/btag/mod.rs       |  16 +-
 packages/yew/src/virtual_dom/mod.rs           |  17 +-
 packages/yew/src/virtual_dom/vtag.rs          |  23 +--
 4 files changed, 139 insertions(+), 68 deletions(-)

diff --git a/packages/yew/src/dom_bundle/btag/attributes.rs b/packages/yew/src/dom_bundle/btag/attributes.rs
index 7e7ab726857..2634a06b1dd 100644
--- a/packages/yew/src/dom_bundle/btag/attributes.rs
+++ b/packages/yew/src/dom_bundle/btag/attributes.rs
@@ -95,16 +95,16 @@ impl Attributes {
             match old.get(key) {
                 Some(old_value) => {
                     if value != old_value {
-                        Self::set_attribute(el, key, value.0.as_ref());
+                        Self::set(el, key, value.0.as_ref(), value.1);
                     }
                 }
-                None => Self::set_attribute(el, key, value.0.as_ref()),
+                None => Self::set(el, key, value.0.as_ref(), value.1),
             }
         }
 
-        for (key, _value) in old.iter() {
+        for (key, (_, apply_as)) in old.iter() {
             if !new.contains_key(key) {
-                Self::remove_attribute(el, key);
+                Self::remove(el, key, *apply_as);
             }
         }
     }
@@ -117,13 +117,22 @@ impl Attributes {
             use Attributes::*;
 
             match src {
-                Static(arr) => (*arr).iter().map(|(k, v, apply_as)| (*k, (*v, *apply_as))).collect(),
+                Static(arr) => (*arr)
+                    .iter()
+                    .map(|(k, v, apply_as)| (*k, (*v, *apply_as)))
+                    .collect(),
                 Dynamic { keys, values } => keys
                     .iter()
                     .zip(values.iter())
-                    .filter_map(|(k, v)| v.as_ref().map(|(v, apply_as)| (*k, (v.as_ref(), *apply_as))))
+                    .filter_map(|(k, v)| {
+                        v.as_ref()
+                            .map(|(v, apply_as)| (*k, (v.as_ref(), *apply_as)))
+                    })
+                    .collect(),
+                IndexMap(m) => m
+                    .iter()
+                    .map(|(k, (v, apply_as))| (k.as_ref(), (v.as_ref(), *apply_as)))
                     .collect(),
-                IndexMap(m) => m.iter().map(|(k, (v, apply_as))| (k.as_ref(), (v.as_ref(), *apply_as))).collect(),
             }
         }
 
@@ -142,35 +151,50 @@ impl Attributes {
         }
 
         // Remove missing
-        for k in old.keys() {
+        for (k, (_, apply_as)) in old.iter() {
             if !new.contains_key(k) {
-                Self::remove_attribute(el, k);
+                Self::remove(el, k, *apply_as);
             }
         }
     }
 
-    fn set_attribute(el: &Element, key: &str, value: &str) {
-        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 set(el: &Element, key: &str, value: &str, apply_as: ApplyAttributeAs) {
+        match apply_as {
+            ApplyAttributeAs::Attribute => {
+                el.set_attribute(key, value).expect("invalid attribute key")
+            }
+            ApplyAttributeAs::Property => {
+                match key {
+                    // need to be attributes because, otherwise query selectors fail
+                    "class" => 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("could not set property");
+                    }
+                }
             }
         }
     }
 
-    fn remove_attribute(el: &Element, key: &str) {
-        match key {
-            // need to be attributes because, otherwise query selectors fail
-            "class" | "id" => el
+    fn remove(el: &Element, key: &str, apply_as: ApplyAttributeAs) {
+        match apply_as {
+            ApplyAttributeAs::Attribute => 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");
+            ApplyAttributeAs::Property => {
+                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 property");
+                    }
+                }
             }
         }
     }
@@ -183,20 +207,20 @@ impl Apply for Attributes {
     fn apply(self, _root: &BSubtree, el: &Element) -> Self {
         match &self {
             Self::Static(arr) => {
-                for (k, v, _) in arr.iter() {
-                    Self::set_attribute(el, *k, *v);
+                for (k, v, apply_as) in arr.iter() {
+                    Self::set(el, *k, *v, *apply_as);
                 }
             }
             Self::Dynamic { keys, values } => {
                 for (k, v) in keys.iter().zip(values.iter()) {
-                    if let Some((v, _)) = v {
-                        Self::set_attribute(el, k, v)
+                    if let Some((v, apply_as)) = v {
+                        Self::set(el, k, v, *apply_as)
                     }
                 }
             }
             Self::IndexMap(m) => {
-                for (k, (v, _)) in m.iter() {
-                    Self::set_attribute(el, k, v)
+                for (k, (v, apply_as)) in m.iter() {
+                    Self::set(el, k, v, *apply_as)
                 }
             }
         }
@@ -236,7 +260,7 @@ impl Apply for Attributes {
                     }
                     macro_rules! set {
                         ($new:expr) => {
-                            Self::set_attribute(el, key!(), $new.0.as_ref())
+                            Self::set(el, key!(), $new.0.as_ref(), $new.1)
                         };
                     }
 
@@ -247,8 +271,8 @@ impl Apply for Attributes {
                             }
                         }
                         (Some(new), None) => set!(new),
-                        (None, Some(_)) => {
-                            Self::remove_attribute(el, key!());
+                        (None, Some(old)) => {
+                            Self::remove(el, key!(), old.1);
                         }
                         (None, None) => (),
                     }
@@ -270,10 +294,11 @@ impl Apply for Attributes {
 #[cfg(target_arch = "wasm32")]
 #[cfg(test)]
 mod tests {
+    use std::time::Duration;
     use gloo::utils::document;
     use js_sys::Reflect;
     use wasm_bindgen_test::{wasm_bindgen_test as test, wasm_bindgen_test_configure};
-
+    use crate::{html, Html, function_component};
     use super::*;
 
     wasm_bindgen_test_configure!(run_in_browser);
@@ -288,7 +313,10 @@ mod tests {
 
     #[test]
     fn properties_are_set() {
-        let attrs = Attributes::Static(&[("href", "https://example.com/", ApplyAttributeAs::Property), ("alt", "somewhere", ApplyAttributeAs::Property)]);
+        let attrs = Attributes::Static(&[
+            ("href", "https://example.com/", ApplyAttributeAs::Property),
+            ("alt", "somewhere", ApplyAttributeAs::Property),
+        ]);
         let (element, btree) = create_element();
         attrs.apply(&btree, &element);
         assert_eq!(
@@ -310,11 +338,58 @@ mod tests {
     }
 
     #[test]
-    fn class_id_are_attrs() {
-        let attrs = Attributes::Static(&[("id", "foo", ApplyAttributeAs::Attribute), ("class", "thing", ApplyAttributeAs::Attribute)]);
+    fn respects_apply_as() {
+        let attrs = Attributes::Static(&[
+            ("href", "https://example.com/", ApplyAttributeAs::Attribute),
+            ("alt", "somewhere", ApplyAttributeAs::Property),
+        ]);
+        let (element, btree) = create_element();
+        attrs.apply(&btree, &element);
+        assert_eq!(element.outer_html(), "<a href=\"https://example.com/\"></a>", "should be set as attribute");
+        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_always_attrs() {
+        let attrs = Attributes::Static(&[
+            ("id", "foo", ApplyAttributeAs::Property),
+            ("class", "thing", ApplyAttributeAs::Attribute),
+        ]);
+
         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");
     }
+
+    #[test]
+    async fn macro_syntax_works() {
+        #[function_component]
+        fn Comp() -> Html {
+            html! { <a href="https://example.com/" @alt="abc" /> }
+        }
+
+        let output = gloo::utils::document().get_element_by_id("output").unwrap();
+        yew::Renderer::<Comp>::with_root(output.clone())
+            .render();
+        gloo::timers::future::sleep(Duration::from_secs(1)).await;
+        let element = output.query_selector("a").unwrap().unwrap();
+        assert_eq!(element.get_attribute("alt").unwrap(), "abc");
+
+        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"
+        );
+    }
 }
diff --git a/packages/yew/src/dom_bundle/btag/mod.rs b/packages/yew/src/dom_bundle/btag/mod.rs
index 7d44ff99301..3a30874bea2 100644
--- a/packages/yew/src/dom_bundle/btag/mod.rs
+++ b/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, JsValue};
+    use wasm_bindgen::{JsCast};
     use wasm_bindgen_test::{wasm_bindgen_test as test, wasm_bindgen_test_configure};
     use web_sys::HtmlInputElement as InputElement;
 
@@ -969,19 +969,7 @@ mod tests {
                 .dyn_ref::<web_sys::Element>()
                 .unwrap()
                 .outer_html(),
-            "<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"
+            "<div tabindex=\"0\"></div>"
         );
     }
 }
diff --git a/packages/yew/src/virtual_dom/mod.rs b/packages/yew/src/virtual_dom/mod.rs
index c603ea7aa56..37e2f9637e2 100644
--- a/packages/yew/src/virtual_dom/mod.rs
+++ b/packages/yew/src/virtual_dom/mod.rs
@@ -150,7 +150,7 @@ mod feat_ssr {
 #[derive(PartialEq, Eq, Copy, Clone, Debug)]
 pub enum ApplyAttributeAs {
     Attribute,
-    Property
+    Property,
 }
 
 /// A collection of attributes for an element
@@ -191,9 +191,7 @@ impl Attributes {
     /// This function is suboptimal and does not inline well. Avoid on hot paths.
     pub fn iter<'a>(&'a self) -> Box<dyn Iterator<Item = (&'a str, &'a str)> + 'a> {
         match self {
-            Self::Static(arr) => Box::new(
-                arr.iter().map(|(k, v, _)| (*k, *v as &'a str))
-            ),
+            Self::Static(arr) => Box::new(arr.iter().map(|(k, v, _)| (*k, *v as &'a str))),
             Self::Dynamic { keys, values } => Box::new(
                 keys.iter()
                     .zip(values.iter())
@@ -219,7 +217,11 @@ impl Attributes {
         match self {
             Self::IndexMap(m) => m,
             Self::Static(arr) => {
-                *self = Self::IndexMap(arr.iter().map(|(k, v, ty)| ((*k).into(), ((*v).into(), *ty))).collect());
+                *self = Self::IndexMap(
+                    arr.iter()
+                        .map(|(k, v, ty)| ((*k).into(), ((*v).into(), *ty)))
+                        .collect(),
+                );
                 unpack!()
             }
             Self::Dynamic { keys, values } => {
@@ -238,7 +240,10 @@ impl Attributes {
 
 impl From<IndexMap<AttrValue, AttrValue>> for Attributes {
     fn from(map: IndexMap<AttrValue, AttrValue>) -> Self {
-        let v= map.into_iter().map(|(k, v)| (k, (v, ApplyAttributeAs::Property))).collect();
+        let v = map
+            .into_iter()
+            .map(|(k, v)| (k, (v, ApplyAttributeAs::Property)))
+            .collect();
         Self::IndexMap(v)
     }
 }
diff --git a/packages/yew/src/virtual_dom/vtag.rs b/packages/yew/src/virtual_dom/vtag.rs
index a56ab8ccf35..b9e849e3d91 100644
--- a/packages/yew/src/virtual_dom/vtag.rs
+++ b/packages/yew/src/virtual_dom/vtag.rs
@@ -9,7 +9,7 @@ use std::rc::Rc;
 
 use web_sys::{HtmlInputElement as InputElement, HtmlTextAreaElement as TextAreaElement};
 
-use super::{AttrValue, Attributes, Key, Listener, Listeners, VList, VNode, ApplyAttributeAs};
+use super::{ApplyAttributeAs, AttrValue, Attributes, Key, Listener, Listeners, VList, VNode};
 use crate::html::{IntoPropValue, NodeRef};
 
 /// SVG namespace string used for creating svg elements
@@ -363,9 +363,10 @@ impl VTag {
     /// Not every attribute works when it set as an attribute. We use workarounds for:
     /// `value` and `checked`.
     pub fn add_attribute(&mut self, key: &'static str, value: impl Into<AttrValue>) {
-        self.attributes
-            .get_mut_index_map()
-            .insert(AttrValue::Static(key), (value.into(), ApplyAttributeAs::Attribute));
+        self.attributes.get_mut_index_map().insert(
+            AttrValue::Static(key),
+            (value.into(), ApplyAttributeAs::Attribute),
+        );
     }
 
     /// Adds a key-value pair to element's property
@@ -373,9 +374,10 @@ impl VTag {
     /// Not every property works when it set as an attribute. We use workarounds for:
     /// `class` and `id`, which are both set as attributes.
     pub fn set_property(&mut self, key: &'static str, value: impl Into<AttrValue>) {
-        self.attributes
-            .get_mut_index_map()
-            .insert(AttrValue::Static(key), (value.into(), ApplyAttributeAs::Property));
+        self.attributes.get_mut_index_map().insert(
+            AttrValue::Static(key),
+            (value.into(), ApplyAttributeAs::Property),
+        );
     }
 
     /// Sets attributes to a virtual node.
@@ -388,9 +390,10 @@ impl VTag {
 
     #[doc(hidden)]
     pub fn __macro_push_attr(&mut self, key: &'static str, value: impl IntoPropValue<AttrValue>) {
-        self.attributes
-            .get_mut_index_map()
-            .insert(AttrValue::from(key), (value.into_prop_value(), ApplyAttributeAs::Property));
+        self.attributes.get_mut_index_map().insert(
+            AttrValue::from(key),
+            (value.into_prop_value(), ApplyAttributeAs::Property),
+        );
     }
 
     /// Add event listener on the [VTag]'s  [Element](web_sys::Element).

From ea353cc5a34c563bf2ed12d9b6fd7d9f13ce8c4a Mon Sep 17 00:00:00 2001
From: Muhammad Hamza <muhammadhamza1311@gmail.com>
Date: Mon, 8 Aug 2022 23:33:38 +0500
Subject: [PATCH 08/17] id as property

---
 packages/yew/src/dom_bundle/btag/attributes.rs | 5 ++---
 packages/yew/src/virtual_dom/vtag.rs           | 4 ++--
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/yew/src/dom_bundle/btag/attributes.rs b/packages/yew/src/dom_bundle/btag/attributes.rs
index 2634a06b1dd..3aaf1723cb5 100644
--- a/packages/yew/src/dom_bundle/btag/attributes.rs
+++ b/packages/yew/src/dom_bundle/btag/attributes.rs
@@ -186,7 +186,7 @@ impl Attributes {
             ApplyAttributeAs::Property => {
                 match key {
                     // need to be attributes because, otherwise query selectors fail
-                    "class" | "id" => el
+                    "class" => el
                         .remove_attribute(key)
                         .expect("could not remove attribute"),
                     _ => {
@@ -357,9 +357,8 @@ mod tests {
     }
 
     #[test]
-    fn class_id_are_always_attrs() {
+    fn class_is_always_attrs() {
         let attrs = Attributes::Static(&[
-            ("id", "foo", ApplyAttributeAs::Property),
             ("class", "thing", ApplyAttributeAs::Attribute),
         ]);
 
diff --git a/packages/yew/src/virtual_dom/vtag.rs b/packages/yew/src/virtual_dom/vtag.rs
index b9e849e3d91..f9621fe59c5 100644
--- a/packages/yew/src/virtual_dom/vtag.rs
+++ b/packages/yew/src/virtual_dom/vtag.rs
@@ -371,8 +371,8 @@ impl VTag {
 
     /// Adds a key-value pair to element's property
     ///
-    /// Not every property works when it set as an attribute. We use workarounds for:
-    /// `class` and `id`, which are both set as attributes.
+    /// Not everything works when it set as an property. We use workarounds for:
+    /// `class`, which is set as attribute.
     pub fn set_property(&mut self, key: &'static str, value: impl Into<AttrValue>) {
         self.attributes.get_mut_index_map().insert(
             AttrValue::Static(key),

From 43ab9d01857d228600217310cfe492d53c8dedf0 Mon Sep 17 00:00:00 2001
From: Muhammad Hamza <muhammadhamza1311@gmail.com>
Date: Mon, 8 Aug 2022 23:41:03 +0500
Subject: [PATCH 09/17] This was not meant to be committed

---
 examples/counter_functional/src/main.rs | 49 ++++++++++++-------------
 1 file changed, 24 insertions(+), 25 deletions(-)

diff --git a/examples/counter_functional/src/main.rs b/examples/counter_functional/src/main.rs
index 926d5fc3a99..1fb79081b66 100644
--- a/examples/counter_functional/src/main.rs
+++ b/examples/counter_functional/src/main.rs
@@ -1,29 +1,28 @@
 use yew::prelude::*;
-// #[function_component]
-// fn App() -> Html {
-//     let state = use_state(|| 0);
-//
-//     let incr_counter = {
-//         let state = state.clone();
-//         Callback::from(move |_| state.set(*state + 1))
-//     };
-//
-//     let decr_counter = {
-//         let state = state.clone();
-//         Callback::from(move |_| state.set(*state - 1))
-//     };
-//
-//     html! {
-//         <>
-//             <p @disabled={false}> {"current count: "} {*state} </p>
-//             <button onclick={incr_counter}> {"+"} </button>
-//             <button onclick={decr_counter}> {"-"} </button>
-//         </>
-//     }
-// }
 
-fn main() {
-    let _d = html! {
-            <div class={format!("fail{}", "")}></div>
+#[function_component]
+fn App() -> Html {
+    let state = use_state(|| 0);
+
+    let incr_counter = {
+        let state = state.clone();
+        Callback::from(move |_| state.set(*state + 1))
+    };
+
+    let decr_counter = {
+        let state = state.clone();
+        Callback::from(move |_| state.set(*state - 1))
     };
+
+    html! {
+        <>
+            <p @disabled={false}> {"current count: "} {*state} </p>
+            <button onclick={incr_counter}> {"+"} </button>
+            <button onclick={decr_counter}> {"-"} </button>
+        </>
+    }
+}
+
+fn main() {
+    yew::Renderer::<App>::new().render();
 }

From 9b418bf34905752d42f7fd33ecd100465588075d Mon Sep 17 00:00:00 2001
From: Muhammad Hamza <muhammadhamza1311@gmail.com>
Date: Mon, 8 Aug 2022 23:56:34 +0500
Subject: [PATCH 10/17] Make test pass, fmt + clippy

---
 .../yew-macro/src/html_tree/html_element.rs   | 84 +++++++++++--------
 packages/yew-macro/src/props/prop.rs          | 17 +++-
 packages/yew-macro/src/props/prop_macro.rs    |  6 +-
 .../yew/src/dom_bundle/btag/attributes.rs     | 19 +++--
 packages/yew/src/dom_bundle/btag/mod.rs       |  2 +-
 5 files changed, 82 insertions(+), 46 deletions(-)

diff --git a/packages/yew-macro/src/html_tree/html_element.rs b/packages/yew-macro/src/html_tree/html_element.rs
index 8afa2e0ab37..5cb4fb106d1 100644
--- a/packages/yew-macro/src/html_tree/html_element.rs
+++ b/packages/yew-macro/src/html_tree/html_element.rs
@@ -135,40 +135,58 @@ impl ToTokens for HtmlElement {
         // other attributes
 
         let attributes = {
-            let normal_attrs = attributes.iter().map(|Prop { label, value, is_forced_attribute, .. }| {
-                (label.to_lit_str(), value.optimize_literals_tagged(), *is_forced_attribute)
-            });
-            let boolean_attrs = booleans.iter().filter_map(|Prop { label, value, is_forced_attribute, .. }| {
-                let key = label.to_lit_str();
-                Some((
-                    key.clone(),
-                    match value {
-                        Expr::Lit(e) => match &e.lit {
-                            Lit::Bool(b) => Value::Static(if b.value {
-                                quote! { #key }
-                            } else {
-                                return None;
-                            }),
-                            _ => Value::Dynamic(quote_spanned! {value.span()=> {
-                                ::yew::utils::__ensure_type::<::std::primitive::bool>(#value);
-                                #key
-                            }}),
-                        },
-                        expr => Value::Dynamic(
-                            quote_spanned! {expr.span().resolved_at(Span::call_site())=>
-                                if #expr {
-                                    ::std::option::Option::Some(
-                                        ::yew::virtual_dom::AttrValue::Static(#key)
-                                    )
+            let normal_attrs = attributes.iter().map(
+                |Prop {
+                     label,
+                     value,
+                     is_forced_attribute,
+                     ..
+                 }| {
+                    (
+                        label.to_lit_str(),
+                        value.optimize_literals_tagged(),
+                        *is_forced_attribute,
+                    )
+                },
+            );
+            let boolean_attrs = booleans.iter().filter_map(
+                |Prop {
+                     label,
+                     value,
+                     is_forced_attribute,
+                     ..
+                 }| {
+                    let key = label.to_lit_str();
+                    Some((
+                        key.clone(),
+                        match value {
+                            Expr::Lit(e) => match &e.lit {
+                                Lit::Bool(b) => Value::Static(if b.value {
+                                    quote! { #key }
                                 } else {
-                                    ::std::option::Option::None
-                                }
+                                    return None;
+                                }),
+                                _ => Value::Dynamic(quote_spanned! {value.span()=> {
+                                    ::yew::utils::__ensure_type::<::std::primitive::bool>(#value);
+                                    #key
+                                }}),
                             },
-                        ),
-                    },
-                    *is_forced_attribute
-                ))
-            });
+                            expr => Value::Dynamic(
+                                quote_spanned! {expr.span().resolved_at(Span::call_site())=>
+                                    if #expr {
+                                        ::std::option::Option::Some(
+                                            ::yew::virtual_dom::AttrValue::Static(#key)
+                                        )
+                                    } else {
+                                        ::std::option::Option::None
+                                    }
+                                },
+                            ),
+                        },
+                        *is_forced_attribute,
+                    ))
+                },
+            );
             let class_attr = classes.as_ref().and_then(|classes| match classes {
                 ClassesForm::Tuple(classes) => {
                     let span = classes.span();
@@ -259,7 +277,7 @@ impl ToTokens for HtmlElement {
                             quote! { ::yew::virtual_dom::ApplyAttributeAs::Property }
                         };
                         let value = wrap_attr_value(v);
-                        quote! { ::std::option::Option::map(#value, |it| (it, ::yew::virtual_dom::ApplyAttributeAs::Property)) }
+                        quote! { ::std::option::Option::map(#value, |it| (it, #apply_as)) }
                     });
                 quote! {
                     ::yew::virtual_dom::Attributes::Dynamic{
diff --git a/packages/yew-macro/src/props/prop.rs b/packages/yew-macro/src/props/prop.rs
index 21adb48b75d..5d840032ec2 100644
--- a/packages/yew-macro/src/props/prop.rs
+++ b/packages/yew-macro/src/props/prop.rs
@@ -35,7 +35,10 @@ impl Prop {
     /// Parse a prop using the shorthand syntax `{value}`, short for `value={value}`
     /// This only allows for labels with no hyphens, as it would otherwise create
     /// an ambiguity in the syntax
-    fn parse_shorthand_prop_assignment(input: ParseStream, is_forced_attribute: bool) -> syn::Result<Self> {
+    fn parse_shorthand_prop_assignment(
+        input: ParseStream,
+        is_forced_attribute: bool,
+    ) -> syn::Result<Self> {
         let value;
         let _brace = braced!(value in input);
         let expr = value.parse::<Expr>()?;
@@ -61,7 +64,11 @@ impl Prop {
             ));
         }?;
 
-        Ok(Self { label, value: expr, is_forced_attribute })
+        Ok(Self {
+            label,
+            value: expr,
+            is_forced_attribute,
+        })
     }
 
     /// Parse a prop of the form `label={value}`
@@ -85,7 +92,11 @@ impl Prop {
         }
 
         let value = parse_prop_value(input)?;
-        Ok(Self { label, value, is_forced_attribute })
+        Ok(Self {
+            label,
+            value,
+            is_forced_attribute,
+        })
     }
 }
 
diff --git a/packages/yew-macro/src/props/prop_macro.rs b/packages/yew-macro/src/props/prop_macro.rs
index 060b60f3259..99e8948fb49 100644
--- a/packages/yew-macro/src/props/prop_macro.rs
+++ b/packages/yew-macro/src/props/prop_macro.rs
@@ -61,7 +61,11 @@ impl Parse for PropValue {
 impl From<PropValue> for Prop {
     fn from(prop_value: PropValue) -> Prop {
         let PropValue { label, value } = prop_value;
-        Prop { label, value, is_forced_attribute: false }
+        Prop {
+            label,
+            value,
+            is_forced_attribute: false,
+        }
     }
 }
 
diff --git a/packages/yew/src/dom_bundle/btag/attributes.rs b/packages/yew/src/dom_bundle/btag/attributes.rs
index 3aaf1723cb5..d8c0fe86f5b 100644
--- a/packages/yew/src/dom_bundle/btag/attributes.rs
+++ b/packages/yew/src/dom_bundle/btag/attributes.rs
@@ -295,11 +295,13 @@ impl Apply for Attributes {
 #[cfg(test)]
 mod tests {
     use std::time::Duration;
+
     use gloo::utils::document;
     use js_sys::Reflect;
     use wasm_bindgen_test::{wasm_bindgen_test as test, wasm_bindgen_test_configure};
-    use crate::{html, Html, function_component};
+
     use super::*;
+    use crate::{function_component, html, Html};
 
     wasm_bindgen_test_configure!(run_in_browser);
 
@@ -345,7 +347,11 @@ mod tests {
         ]);
         let (element, btree) = create_element();
         attrs.apply(&btree, &element);
-        assert_eq!(element.outer_html(), "<a href=\"https://example.com/\"></a>", "should be set as attribute");
+        assert_eq!(
+            element.outer_html(),
+            "<a href=\"https://example.com/\"></a>",
+            "should be set as attribute"
+        );
         assert_eq!(
             Reflect::get(element.as_ref(), &JsValue::from_str("alt"))
                 .expect("no alt")
@@ -358,13 +364,10 @@ mod tests {
 
     #[test]
     fn class_is_always_attrs() {
-        let attrs = Attributes::Static(&[
-            ("class", "thing", ApplyAttributeAs::Attribute),
-        ]);
+        let attrs = Attributes::Static(&[("class", "thing", ApplyAttributeAs::Attribute)]);
 
         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");
     }
 
@@ -376,8 +379,8 @@ mod tests {
         }
 
         let output = gloo::utils::document().get_element_by_id("output").unwrap();
-        yew::Renderer::<Comp>::with_root(output.clone())
-            .render();
+        yew::Renderer::<Comp>::with_root(output.clone()).render();
+
         gloo::timers::future::sleep(Duration::from_secs(1)).await;
         let element = output.query_selector("a").unwrap().unwrap();
         assert_eq!(element.get_attribute("alt").unwrap(), "abc");
diff --git a/packages/yew/src/dom_bundle/btag/mod.rs b/packages/yew/src/dom_bundle/btag/mod.rs
index 3a30874bea2..d504ea0386b 100644
--- a/packages/yew/src/dom_bundle/btag/mod.rs
+++ b/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;
     use wasm_bindgen_test::{wasm_bindgen_test as test, wasm_bindgen_test_configure};
     use web_sys::HtmlInputElement as InputElement;
 

From 5e8c4c4541aa01925d25f7582161498e292a4f62 Mon Sep 17 00:00:00 2001
From: Muhammad Hamza <muhammadhamza1311@gmail.com>
Date: Tue, 9 Aug 2022 00:00:07 +0500
Subject: [PATCH 11/17] fucking rustfmt

---
 .../yew-macro/src/html_tree/html_element.rs   | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/packages/yew-macro/src/html_tree/html_element.rs b/packages/yew-macro/src/html_tree/html_element.rs
index 5cb4fb106d1..a15339866a5 100644
--- a/packages/yew-macro/src/html_tree/html_element.rs
+++ b/packages/yew-macro/src/html_tree/html_element.rs
@@ -269,16 +269,15 @@ impl ToTokens for HtmlElement {
                 .collect::<Vec<(LitStr, Value, bool)>>();
             try_into_static(&attrs).unwrap_or_else(|| {
                 let keys = attrs.iter().map(|(k, _, _)| quote! { #k });
-                let values = attrs.iter()
-                    .map(|(_, v, is_forced_attribute)| {
-                        let apply_as = if *is_forced_attribute {
-                            quote! { ::yew::virtual_dom::ApplyAttributeAs::Attribute }
-                        } else {
-                            quote! { ::yew::virtual_dom::ApplyAttributeAs::Property }
-                        };
-                        let value = wrap_attr_value(v);
-                        quote! { ::std::option::Option::map(#value, |it| (it, #apply_as)) }
-                    });
+                let values = attrs.iter().map(|(_, v, is_forced_attribute)| {
+                    let apply_as = if *is_forced_attribute {
+                        quote! { ::yew::virtual_dom::ApplyAttributeAs::Attribute }
+                    } else {
+                        quote! { ::yew::virtual_dom::ApplyAttributeAs::Property }
+                    };
+                    let value = wrap_attr_value(v);
+                    quote! { ::std::option::Option::map(#value, |it| (it, #apply_as)) }
+                });
                 quote! {
                     ::yew::virtual_dom::Attributes::Dynamic{
                         keys: &[#(#keys),*],

From 00deee535383874d2941005f7e08931438e09ef5 Mon Sep 17 00:00:00 2001
From: Muhammad Hamza <muhammadhamza1311@gmail.com>
Date: Tue, 9 Aug 2022 00:17:49 +0500
Subject: [PATCH 12/17] is this enough formatting

---
 packages/yew-macro/src/html_tree/html_element.rs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/yew-macro/src/html_tree/html_element.rs b/packages/yew-macro/src/html_tree/html_element.rs
index a15339866a5..6e038d7041a 100644
--- a/packages/yew-macro/src/html_tree/html_element.rs
+++ b/packages/yew-macro/src/html_tree/html_element.rs
@@ -268,7 +268,7 @@ impl ToTokens for HtmlElement {
                 .chain(class_attr)
                 .collect::<Vec<(LitStr, Value, bool)>>();
             try_into_static(&attrs).unwrap_or_else(|| {
-                let keys = attrs.iter().map(|(k, _, _)| quote! { #k });
+                let keys = attrs.iter().map(|(k, ..)| quote! { #k });
                 let values = attrs.iter().map(|(_, v, is_forced_attribute)| {
                     let apply_as = if *is_forced_attribute {
                         quote! { ::yew::virtual_dom::ApplyAttributeAs::Attribute }

From 0107f03ad4d96f5b9e29f45cfc7f1e0dc07ee527 Mon Sep 17 00:00:00 2001
From: Muhammad Hamza <muhammadhamza1311@gmail.com>
Date: Tue, 9 Aug 2022 01:17:33 +0500
Subject: [PATCH 13/17] that was not supposed to be commited

---
 examples/counter_functional/src/main.rs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/counter_functional/src/main.rs b/examples/counter_functional/src/main.rs
index 1fb79081b66..54dcd2806d1 100644
--- a/examples/counter_functional/src/main.rs
+++ b/examples/counter_functional/src/main.rs
@@ -16,7 +16,7 @@ fn App() -> Html {
 
     html! {
         <>
-            <p @disabled={false}> {"current count: "} {*state} </p>
+            <p> {"current count: "} {*state} </p>
             <button onclick={incr_counter}> {"+"} </button>
             <button onclick={decr_counter}> {"-"} </button>
         </>

From 1eea41aaa2b24df377d557b67a2002ad76bdf3cc Mon Sep 17 00:00:00 2001
From: Muhammad Hamza <muhammadhamza1311@gmail.com>
Date: Sun, 14 Aug 2022 17:40:34 +0500
Subject: [PATCH 14/17] apply review

---
 .../yew-macro/src/html_tree/html_element.rs   | 43 +++++++++----------
 packages/yew-macro/src/props/prop.rs          | 27 +++++++-----
 packages/yew-macro/src/props/prop_macro.rs    |  2 +-
 .../yew/src/dom_bundle/btag/attributes.rs     | 42 ++++++------------
 packages/yew/src/virtual_dom/mod.rs           |  4 +-
 packages/yew/src/virtual_dom/vtag.rs          |  7 ++-
 6 files changed, 56 insertions(+), 69 deletions(-)

diff --git a/packages/yew-macro/src/html_tree/html_element.rs b/packages/yew-macro/src/html_tree/html_element.rs
index 6e038d7041a..31545029995 100644
--- a/packages/yew-macro/src/html_tree/html_element.rs
+++ b/packages/yew-macro/src/html_tree/html_element.rs
@@ -8,7 +8,7 @@ use syn::spanned::Spanned;
 use syn::{Block, Expr, Ident, Lit, LitStr, Token};
 
 use super::{HtmlChildrenTree, HtmlDashedName, TagTokens};
-use crate::props::{ClassesForm, ElementProps, Prop};
+use crate::props::{ClassesForm, ElementProps, Prop, PropDirective};
 use crate::stringify::{Stringify, Value};
 use crate::{non_capitalized_ascii, Peek, PeekValue};
 
@@ -139,13 +139,13 @@ impl ToTokens for HtmlElement {
                 |Prop {
                      label,
                      value,
-                     is_forced_attribute,
+                     directive,
                      ..
                  }| {
                     (
                         label.to_lit_str(),
                         value.optimize_literals_tagged(),
-                        *is_forced_attribute,
+                        *directive,
                     )
                 },
             );
@@ -153,7 +153,7 @@ impl ToTokens for HtmlElement {
                 |Prop {
                      label,
                      value,
-                     is_forced_attribute,
+                     directive,
                      ..
                  }| {
                     let key = label.to_lit_str();
@@ -183,7 +183,7 @@ impl ToTokens for HtmlElement {
                                 },
                             ),
                         },
-                        *is_forced_attribute,
+                        *directive,
                     ))
                 },
             );
@@ -215,7 +215,7 @@ impl ToTokens for HtmlElement {
                                 __yew_classes
                             }
                         }),
-                        false,
+                        None,
                     ))
                 }
                 ClassesForm::Single(classes) => {
@@ -227,7 +227,7 @@ impl ToTokens for HtmlElement {
                                 Some((
                                     LitStr::new("class", lit.span()),
                                     Value::Static(quote! { #lit }),
-                                    false,
+                                    None,
                                 ))
                             }
                         }
@@ -237,26 +237,29 @@ impl ToTokens for HtmlElement {
                                 Value::Dynamic(quote! {
                                     ::std::convert::Into::<::yew::html::Classes>::into(#classes)
                                 }),
-                                false,
+                                None,
                             ))
                         }
                     }
                 }
             });
 
+            fn apply_as(directive: Option<&PropDirective>) -> TokenStream {
+                match directive {
+                    Some(PropDirective::ApplyAsProperty(token)) => quote_spanned!(token.span()=> ::yew::virtual_dom::ApplyAttributeAs::Property),
+                    None => quote!(::yew::virtual_dom::ApplyAttributeAs::Attribute),
+                }
+            }
+
             /// Try to turn attribute list into a `::yew::virtual_dom::Attributes::Static`
-            fn try_into_static(src: &[(LitStr, Value, bool)]) -> Option<TokenStream> {
+            fn try_into_static(src: &[(LitStr, Value, Option<PropDirective>)]) -> Option<TokenStream> {
                 let mut kv = Vec::with_capacity(src.len());
-                for (k, v, is_forced_attribute) in src.iter() {
+                for (k, v, directive) in src.iter() {
                     let v = match v {
                         Value::Static(v) => quote! { #v },
                         Value::Dynamic(_) => return None,
                     };
-                    let apply_as = if *is_forced_attribute {
-                        quote! { ::yew::virtual_dom::ApplyAttributeAs::Attribute }
-                    } else {
-                        quote! { ::yew::virtual_dom::ApplyAttributeAs::Property }
-                    };
+                    let apply_as = apply_as(directive.as_ref());
                     kv.push(quote! { ( #k, #v, #apply_as ) });
                 }
 
@@ -266,15 +269,11 @@ impl ToTokens for HtmlElement {
             let attrs = normal_attrs
                 .chain(boolean_attrs)
                 .chain(class_attr)
-                .collect::<Vec<(LitStr, Value, bool)>>();
+                .collect::<Vec<(LitStr, Value, Option<PropDirective>)>>();
             try_into_static(&attrs).unwrap_or_else(|| {
                 let keys = attrs.iter().map(|(k, ..)| quote! { #k });
-                let values = attrs.iter().map(|(_, v, is_forced_attribute)| {
-                    let apply_as = if *is_forced_attribute {
-                        quote! { ::yew::virtual_dom::ApplyAttributeAs::Attribute }
-                    } else {
-                        quote! { ::yew::virtual_dom::ApplyAttributeAs::Property }
-                    };
+                let values = attrs.iter().map(|(_, v, directive)| {
+                    let apply_as = apply_as(directive.as_ref());
                     let value = wrap_attr_value(v);
                     quote! { ::std::option::Option::map(#value, |it| (it, #apply_as)) }
                 });
diff --git a/packages/yew-macro/src/props/prop.rs b/packages/yew-macro/src/props/prop.rs
index 5d840032ec2..7bb3c75b0ea 100644
--- a/packages/yew-macro/src/props/prop.rs
+++ b/packages/yew-macro/src/props/prop.rs
@@ -13,19 +13,24 @@ use super::CHILDREN_LABEL;
 use crate::html_tree::HtmlDashedName;
 use crate::stringify::Stringify;
 
+#[derive(Copy, Clone)]
+pub enum PropDirective {
+    ApplyAsProperty(Token![~]),
+}
+
 pub struct Prop {
-    pub is_forced_attribute: bool,
+    pub directive: Option<PropDirective>,
     pub label: HtmlDashedName,
     /// Punctuation between `label` and `value`.
     pub value: Expr,
 }
 impl Parse for Prop {
     fn parse(input: ParseStream) -> syn::Result<Self> {
-        let at = input.parse::<Token![@]>().map(|_| true).unwrap_or(false);
+        let directive = input.parse::<Token![~]>().map(|parsed| PropDirective::ApplyAsProperty(parsed)).ok();
         if input.peek(Brace) {
-            Self::parse_shorthand_prop_assignment(input, at)
+            Self::parse_shorthand_prop_assignment(input, directive)
         } else {
-            Self::parse_prop_assignment(input, at)
+            Self::parse_prop_assignment(input, directive)
         }
     }
 }
@@ -37,7 +42,7 @@ impl Prop {
     /// an ambiguity in the syntax
     fn parse_shorthand_prop_assignment(
         input: ParseStream,
-        is_forced_attribute: bool,
+        directive: Option<PropDirective>,
     ) -> syn::Result<Self> {
         let value;
         let _brace = braced!(value in input);
@@ -67,12 +72,12 @@ impl Prop {
         Ok(Self {
             label,
             value: expr,
-            is_forced_attribute,
+            directive,
         })
     }
 
     /// Parse a prop of the form `label={value}`
-    fn parse_prop_assignment(input: ParseStream, is_forced_attribute: bool) -> syn::Result<Self> {
+    fn parse_prop_assignment(input: ParseStream, directive: Option<PropDirective>) -> syn::Result<Self> {
         let label = input.parse::<HtmlDashedName>()?;
         let equals = input.parse::<Token![=]>().map_err(|_| {
             syn::Error::new_spanned(
@@ -95,7 +100,7 @@ impl Prop {
         Ok(Self {
             label,
             value,
-            is_forced_attribute,
+            directive,
         })
     }
 }
@@ -118,10 +123,10 @@ fn parse_prop_value(input: &ParseBuffer) -> syn::Result<Expr> {
 
         match &expr {
             Expr::Lit(_) => Ok(expr),
-            _ => Err(syn::Error::new_spanned(
+            ref exp => Err(syn::Error::new_spanned(
                 &expr,
-                "the property value must be either a literal or enclosed in braces. Consider \
-                 adding braces around your expression.",
+                format!("the property value must be either a literal or enclosed in braces. Consider \
+                 adding braces around your expression.: {:#?}", exp),
             )),
         }
     }
diff --git a/packages/yew-macro/src/props/prop_macro.rs b/packages/yew-macro/src/props/prop_macro.rs
index 99e8948fb49..1ff4312276b 100644
--- a/packages/yew-macro/src/props/prop_macro.rs
+++ b/packages/yew-macro/src/props/prop_macro.rs
@@ -64,7 +64,7 @@ impl From<PropValue> for Prop {
         Prop {
             label,
             value,
-            is_forced_attribute: false,
+            directive: None,
         }
     }
 }
diff --git a/packages/yew/src/dom_bundle/btag/attributes.rs b/packages/yew/src/dom_bundle/btag/attributes.rs
index d8c0fe86f5b..451f274a53b 100644
--- a/packages/yew/src/dom_bundle/btag/attributes.rs
+++ b/packages/yew/src/dom_bundle/btag/attributes.rs
@@ -145,8 +145,7 @@ impl Attributes {
                 Some(old) => old != new,
                 None => true,
             } {
-                // todo: set property
-                el.set_attribute(k, new.0).unwrap();
+                Self::set(&el, k, new.0, new.1);
             }
         }
 
@@ -164,16 +163,9 @@ impl Attributes {
                 el.set_attribute(key, value).expect("invalid attribute key")
             }
             ApplyAttributeAs::Property => {
-                match key {
-                    // need to be attributes because, otherwise query selectors fail
-                    "class" => 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("could not set property");
-                    }
-                }
+                let key = JsValue::from_str(key);
+                let value = JsValue::from_str(value);
+                js_sys::Reflect::set(el.as_ref(), &key, &value).expect("could not set property");
             }
         }
     }
@@ -184,17 +176,9 @@ impl Attributes {
                 .remove_attribute(key)
                 .expect("could not remove attribute"),
             ApplyAttributeAs::Property => {
-                match key {
-                    // need to be attributes because, otherwise query selectors fail
-                    "class" => 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 property");
-                    }
-                }
+                let key = JsValue::from_str(key);
+                js_sys::Reflect::set(el.as_ref(), &key, &JsValue::UNDEFINED)
+                    .expect("could not remove property");
             }
         }
     }
@@ -375,7 +359,7 @@ mod tests {
     async fn macro_syntax_works() {
         #[function_component]
         fn Comp() -> Html {
-            html! { <a href="https://example.com/" @alt="abc" /> }
+            html! { <a href="https://example.com/" ~alt="abc" /> }
         }
 
         let output = gloo::utils::document().get_element_by_id("output").unwrap();
@@ -383,15 +367,15 @@ mod tests {
 
         gloo::timers::future::sleep(Duration::from_secs(1)).await;
         let element = output.query_selector("a").unwrap().unwrap();
-        assert_eq!(element.get_attribute("alt").unwrap(), "abc");
+        assert_eq!(element.get_attribute("href").unwrap(), "https://example.com/");
 
         assert_eq!(
-            Reflect::get(element.as_ref(), &JsValue::from_str("href"))
-                .expect("no href")
+            Reflect::get(element.as_ref(), &JsValue::from_str("alt"))
+                .expect("no alt")
                 .as_string()
                 .expect("not a string"),
-            "https://example.com/",
-            "property `href` not set properly"
+            "abc",
+            "property `alt` not set properly"
         );
     }
 }
diff --git a/packages/yew/src/virtual_dom/mod.rs b/packages/yew/src/virtual_dom/mod.rs
index 37e2f9637e2..f24a2db6931 100644
--- a/packages/yew/src/virtual_dom/mod.rs
+++ b/packages/yew/src/virtual_dom/mod.rs
@@ -242,7 +242,7 @@ impl From<IndexMap<AttrValue, AttrValue>> for Attributes {
     fn from(map: IndexMap<AttrValue, AttrValue>) -> Self {
         let v = map
             .into_iter()
-            .map(|(k, v)| (k, (v, ApplyAttributeAs::Property)))
+            .map(|(k, v)| (k, (v, ApplyAttributeAs::Attribute)))
             .collect();
         Self::IndexMap(v)
     }
@@ -252,7 +252,7 @@ impl From<IndexMap<&'static str, AttrValue>> for Attributes {
     fn from(v: IndexMap<&'static str, AttrValue>) -> Self {
         let v = v
             .into_iter()
-            .map(|(k, v)| (AttrValue::Static(k), (v, ApplyAttributeAs::Property)))
+            .map(|(k, v)| (AttrValue::Static(k), (v, ApplyAttributeAs::Attribute)))
             .collect();
         Self::IndexMap(v)
     }
diff --git a/packages/yew/src/virtual_dom/vtag.rs b/packages/yew/src/virtual_dom/vtag.rs
index f9621fe59c5..a4e423a4f59 100644
--- a/packages/yew/src/virtual_dom/vtag.rs
+++ b/packages/yew/src/virtual_dom/vtag.rs
@@ -369,11 +369,10 @@ impl VTag {
         );
     }
 
-    /// Adds a key-value pair to element's property
+    /// Set the given key as property on the element
     ///
-    /// Not everything works when it set as an property. We use workarounds for:
-    /// `class`, which is set as attribute.
-    pub fn set_property(&mut self, key: &'static str, value: impl Into<AttrValue>) {
+    /// [`js_sys::Reflect`] is used for setting properties.
+    pub fn add_property(&mut self, key: &'static str, value: impl Into<AttrValue>) {
         self.attributes.get_mut_index_map().insert(
             AttrValue::Static(key),
             (value.into(), ApplyAttributeAs::Property),

From b8cf9b81a977711545a4a4e348c38a3eaeb4ff51 Mon Sep 17 00:00:00 2001
From: Muhammad Hamza <muhammadhamza1311@gmail.com>
Date: Sun, 14 Aug 2022 18:11:32 +0500
Subject: [PATCH 15/17] fmt

---
 .../yew-macro/src/html_tree/html_element.rs     |  8 ++++++--
 packages/yew-macro/src/props/prop.rs            | 17 +++++++++++++----
 packages/yew/src/dom_bundle/btag/attributes.rs  |  5 ++++-
 3 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/packages/yew-macro/src/html_tree/html_element.rs b/packages/yew-macro/src/html_tree/html_element.rs
index 31545029995..e12b8177fa1 100644
--- a/packages/yew-macro/src/html_tree/html_element.rs
+++ b/packages/yew-macro/src/html_tree/html_element.rs
@@ -246,13 +246,17 @@ impl ToTokens for HtmlElement {
 
             fn apply_as(directive: Option<&PropDirective>) -> TokenStream {
                 match directive {
-                    Some(PropDirective::ApplyAsProperty(token)) => quote_spanned!(token.span()=> ::yew::virtual_dom::ApplyAttributeAs::Property),
+                    Some(PropDirective::ApplyAsProperty(token)) => {
+                        quote_spanned!(token.span()=> ::yew::virtual_dom::ApplyAttributeAs::Property)
+                    }
                     None => quote!(::yew::virtual_dom::ApplyAttributeAs::Attribute),
                 }
             }
 
             /// Try to turn attribute list into a `::yew::virtual_dom::Attributes::Static`
-            fn try_into_static(src: &[(LitStr, Value, Option<PropDirective>)]) -> Option<TokenStream> {
+            fn try_into_static(
+                src: &[(LitStr, Value, Option<PropDirective>)],
+            ) -> Option<TokenStream> {
                 let mut kv = Vec::with_capacity(src.len());
                 for (k, v, directive) in src.iter() {
                     let v = match v {
diff --git a/packages/yew-macro/src/props/prop.rs b/packages/yew-macro/src/props/prop.rs
index 7bb3c75b0ea..48f8e9eae77 100644
--- a/packages/yew-macro/src/props/prop.rs
+++ b/packages/yew-macro/src/props/prop.rs
@@ -26,7 +26,10 @@ pub struct Prop {
 }
 impl Parse for Prop {
     fn parse(input: ParseStream) -> syn::Result<Self> {
-        let directive = input.parse::<Token![~]>().map(|parsed| PropDirective::ApplyAsProperty(parsed)).ok();
+        let directive = input
+            .parse::<Token![~]>()
+            .map(|parsed| PropDirective::ApplyAsProperty(parsed))
+            .ok();
         if input.peek(Brace) {
             Self::parse_shorthand_prop_assignment(input, directive)
         } else {
@@ -77,7 +80,10 @@ impl Prop {
     }
 
     /// Parse a prop of the form `label={value}`
-    fn parse_prop_assignment(input: ParseStream, directive: Option<PropDirective>) -> syn::Result<Self> {
+    fn parse_prop_assignment(
+        input: ParseStream,
+        directive: Option<PropDirective>,
+    ) -> syn::Result<Self> {
         let label = input.parse::<HtmlDashedName>()?;
         let equals = input.parse::<Token![=]>().map_err(|_| {
             syn::Error::new_spanned(
@@ -125,8 +131,11 @@ fn parse_prop_value(input: &ParseBuffer) -> syn::Result<Expr> {
             Expr::Lit(_) => Ok(expr),
             ref exp => Err(syn::Error::new_spanned(
                 &expr,
-                format!("the property value must be either a literal or enclosed in braces. Consider \
-                 adding braces around your expression.: {:#?}", exp),
+                format!(
+                    "the property value must be either a literal or enclosed in braces. Consider \
+                     adding braces around your expression.: {:#?}",
+                    exp
+                ),
             )),
         }
     }
diff --git a/packages/yew/src/dom_bundle/btag/attributes.rs b/packages/yew/src/dom_bundle/btag/attributes.rs
index 84cc184d5bc..71d44ae2f01 100644
--- a/packages/yew/src/dom_bundle/btag/attributes.rs
+++ b/packages/yew/src/dom_bundle/btag/attributes.rs
@@ -367,7 +367,10 @@ mod tests {
 
         gloo::timers::future::sleep(Duration::from_secs(1)).await;
         let element = output.query_selector("a").unwrap().unwrap();
-        assert_eq!(element.get_attribute("href").unwrap(), "https://example.com/");
+        assert_eq!(
+            element.get_attribute("href").unwrap(),
+            "https://example.com/"
+        );
 
         assert_eq!(
             Reflect::get(element.as_ref(), &JsValue::from_str("alt"))

From ec4f599c289ed9f0e49bf52414cb735af21076ee Mon Sep 17 00:00:00 2001
From: Muhammad Hamza <muhammadhamza1311@gmail.com>
Date: Sun, 14 Aug 2022 20:17:55 +0500
Subject: [PATCH 16/17] fix CI

---
 packages/yew-macro/src/props/prop.rs          |   2 +-
 .../tests/html_macro/component-fail.stderr    |  27 ++-
 .../tests/html_macro/element-fail.stderr      | 219 +++++++++++++++++-
 .../tests/html_macro/list-fail.stderr         |  46 +++-
 4 files changed, 269 insertions(+), 25 deletions(-)

diff --git a/packages/yew-macro/src/props/prop.rs b/packages/yew-macro/src/props/prop.rs
index 48f8e9eae77..82ae6375ff1 100644
--- a/packages/yew-macro/src/props/prop.rs
+++ b/packages/yew-macro/src/props/prop.rs
@@ -28,7 +28,7 @@ impl Parse for Prop {
     fn parse(input: ParseStream) -> syn::Result<Self> {
         let directive = input
             .parse::<Token![~]>()
-            .map(|parsed| PropDirective::ApplyAsProperty(parsed))
+            .map(PropDirective::ApplyAsProperty)
             .ok();
         if input.peek(Brace) {
             Self::parse_shorthand_prop_assignment(input, directive)
diff --git a/packages/yew-macro/tests/html_macro/component-fail.stderr b/packages/yew-macro/tests/html_macro/component-fail.stderr
index fb02ae65600..1a756718b44 100644
--- a/packages/yew-macro/tests/html_macro/component-fail.stderr
+++ b/packages/yew-macro/tests/html_macro/component-fail.stderr
@@ -249,7 +249,13 @@ help: escape `type` to use it as an identifier
 85 |     html! { <Child r#type=0 /> };
    |                    ++
 
-error: the property value must be either a literal or enclosed in braces. Consider adding braces around your expression.
+error: the property value must be either a literal or enclosed in braces. Consider adding braces around your expression.: Tuple(
+           ExprTuple {
+               attrs: [],
+               paren_token: Paren,
+               elems: [],
+           },
+       )
   --> tests/html_macro/component-fail.rs:86:24
    |
 86 |     html! { <Child ref=() /> };
@@ -309,7 +315,24 @@ error: only one root html element is allowed (hint: you can wrap multiple html e
 102 |     html! { <Child></Child><Child></Child> };
     |                            ^^^^^^^^^^^^^^^
 
-error: the property value must be either a literal or enclosed in braces. Consider adding braces around your expression.
+error: the property value must be either a literal or enclosed in braces. Consider adding braces around your expression.: Path(
+           ExprPath {
+               attrs: [],
+               qself: None,
+               path: Path {
+                   leading_colon: None,
+                   segments: [
+                       PathSegment {
+                           ident: Ident {
+                               ident: "num",
+                               span: #0 bytes(3894..3897),
+                           },
+                           arguments: None,
+                       },
+                   ],
+               },
+           },
+       )
    --> tests/html_macro/component-fail.rs:106:24
     |
 106 |     html! { <Child int=num ..props /> };
diff --git a/packages/yew-macro/tests/html_macro/element-fail.stderr b/packages/yew-macro/tests/html_macro/element-fail.stderr
index 089444ed8ba..08072df2e7f 100644
--- a/packages/yew-macro/tests/html_macro/element-fail.stderr
+++ b/packages/yew-macro/tests/html_macro/element-fail.stderr
@@ -142,61 +142,260 @@ error: dynamic closing tags must not have a body (hint: replace it with just `</
 75 |     html! { <@{"test"}></@{"test"}> };
    |                           ^^^^^^^^
 
-error: the property value must be either a literal or enclosed in braces. Consider adding braces around your expression.
+error: the property value must be either a literal or enclosed in braces. Consider adding braces around your expression.: Tuple(
+           ExprTuple {
+               attrs: [],
+               paren_token: Paren,
+               elems: [
+                   Lit(
+                       ExprLit {
+                           attrs: [],
+                           lit: Str(
+                               LitStr {
+                                   token: "deprecated",
+                               },
+                           ),
+                       },
+                   ),
+                   Comma,
+                   Lit(
+                       ExprLit {
+                           attrs: [],
+                           lit: Str(
+                               LitStr {
+                                   token: "warning",
+                               },
+                           ),
+                       },
+                   ),
+               ],
+           },
+       )
   --> tests/html_macro/element-fail.rs:83:24
    |
 83 |     html! { <div class=("deprecated", "warning") /> };
    |                        ^^^^^^^^^^^^^^^^^^^^^^^^^
 
-error: the property value must be either a literal or enclosed in braces. Consider adding braces around your expression.
+error: the property value must be either a literal or enclosed in braces. Consider adding braces around your expression.: Tuple(
+           ExprTuple {
+               attrs: [],
+               paren_token: Paren,
+               elems: [],
+           },
+       )
   --> tests/html_macro/element-fail.rs:84:24
    |
 84 |     html! { <input ref=() /> };
    |                        ^^
 
-error: the property value must be either a literal or enclosed in braces. Consider adding braces around your expression.
+error: the property value must be either a literal or enclosed in braces. Consider adding braces around your expression.: Tuple(
+           ExprTuple {
+               attrs: [],
+               paren_token: Paren,
+               elems: [],
+           },
+       )
   --> tests/html_macro/element-fail.rs:85:24
    |
 85 |     html! { <input ref=() ref=() /> };
    |                        ^^
 
-error: the property value must be either a literal or enclosed in braces. Consider adding braces around your expression.
+error: the property value must be either a literal or enclosed in braces. Consider adding braces around your expression.: Call(
+           ExprCall {
+               attrs: [],
+               func: Path(
+                   ExprPath {
+                       attrs: [],
+                       qself: None,
+                       path: Path {
+                           leading_colon: None,
+                           segments: [
+                               PathSegment {
+                                   ident: Ident {
+                                       ident: "Some",
+                                       span: #0 bytes(2632..2636),
+                                   },
+                                   arguments: None,
+                               },
+                           ],
+                       },
+                   },
+               ),
+               paren_token: Paren,
+               args: [
+                   Lit(
+                       ExprLit {
+                           attrs: [],
+                           lit: Int(
+                               LitInt {
+                                   token: 5,
+                               },
+                           ),
+                       },
+                   ),
+               ],
+           },
+       )
   --> tests/html_macro/element-fail.rs:86:28
    |
 86 |     html! { <input onfocus=Some(5) /> };
    |                            ^^^^^^^
 
-error: the property value must be either a literal or enclosed in braces. Consider adding braces around your expression.
+error: the property value must be either a literal or enclosed in braces. Consider adding braces around your expression.: Path(
+           ExprPath {
+               attrs: [],
+               qself: None,
+               path: Path {
+                   leading_colon: None,
+                   segments: [
+                       PathSegment {
+                           ident: Ident {
+                               ident: "NotToString",
+                               span: #0 bytes(2672..2683),
+                           },
+                           arguments: None,
+                       },
+                   ],
+               },
+           },
+       )
   --> tests/html_macro/element-fail.rs:87:27
    |
 87 |     html! { <input string=NotToString /> };
    |                           ^^^^^^^^^^^
 
-error: the property value must be either a literal or enclosed in braces. Consider adding braces around your expression.
+error: the property value must be either a literal or enclosed in braces. Consider adding braces around your expression.: Call(
+           ExprCall {
+               attrs: [],
+               func: Path(
+                   ExprPath {
+                       attrs: [],
+                       qself: None,
+                       path: Path {
+                           leading_colon: None,
+                           segments: [
+                               PathSegment {
+                                   ident: Ident {
+                                       ident: "Some",
+                                       span: #0 bytes(2711..2715),
+                                   },
+                                   arguments: None,
+                               },
+                           ],
+                       },
+                   },
+               ),
+               paren_token: Paren,
+               args: [
+                   Path(
+                       ExprPath {
+                           attrs: [],
+                           qself: None,
+                           path: Path {
+                               leading_colon: None,
+                               segments: [
+                                   PathSegment {
+                                       ident: Ident {
+                                           ident: "NotToString",
+                                           span: #0 bytes(2716..2727),
+                                       },
+                                       arguments: None,
+                                   },
+                               ],
+                           },
+                       },
+                   ),
+               ],
+           },
+       )
   --> tests/html_macro/element-fail.rs:88:22
    |
 88 |     html! { <a media=Some(NotToString) /> };
    |                      ^^^^^^^^^^^^^^^^^
 
-error: the property value must be either a literal or enclosed in braces. Consider adding braces around your expression.
+error: the property value must be either a literal or enclosed in braces. Consider adding braces around your expression.: Call(
+           ExprCall {
+               attrs: [],
+               func: Path(
+                   ExprPath {
+                       attrs: [],
+                       qself: None,
+                       path: Path {
+                           leading_colon: None,
+                           segments: [
+                               PathSegment {
+                                   ident: Ident {
+                                       ident: "Some",
+                                       span: #0 bytes(2755..2759),
+                                   },
+                                   arguments: None,
+                               },
+                           ],
+                       },
+                   },
+               ),
+               paren_token: Paren,
+               args: [
+                   Lit(
+                       ExprLit {
+                           attrs: [],
+                           lit: Int(
+                               LitInt {
+                                   token: 5,
+                               },
+                           ),
+                       },
+                   ),
+               ],
+           },
+       )
   --> tests/html_macro/element-fail.rs:89:21
    |
 89 |     html! { <a href=Some(5) /> };
    |                     ^^^^^^^
 
-error: the property value must be either a literal or enclosed in braces. Consider adding braces around your expression.
+error: the property value must be either a literal or enclosed in braces. Consider adding braces around your expression.: Tuple(
+           ExprTuple {
+               attrs: [],
+               paren_token: Paren,
+               elems: [],
+           },
+       )
   --> tests/html_macro/element-fail.rs:90:25
    |
 90 |     html! { <input type=() /> };
    |                         ^^
 
-error: the property value must be either a literal or enclosed in braces. Consider adding braces around your expression.
+error: the property value must be either a literal or enclosed in braces. Consider adding braces around your expression.: Tuple(
+           ExprTuple {
+               attrs: [],
+               paren_token: Paren,
+               elems: [],
+           },
+       )
   --> tests/html_macro/element-fail.rs:91:26
    |
 91 |     html! { <input value=() /> };
    |                          ^^
 
-error: the property value must be either a literal or enclosed in braces. Consider adding braces around your expression.
+error: the property value must be either a literal or enclosed in braces. Consider adding braces around your expression.: Path(
+           ExprPath {
+               attrs: [],
+               qself: None,
+               path: Path {
+                   leading_colon: None,
+                   segments: [
+                       PathSegment {
+                           ident: Ident {
+                               ident: "NotToString",
+                               span: #0 bytes(2862..2873),
+                           },
+                           arguments: None,
+                       },
+                   ],
+               },
+           },
+       )
   --> tests/html_macro/element-fail.rs:92:27
    |
 92 |     html! { <input string=NotToString /> };
diff --git a/packages/yew-macro/tests/html_macro/list-fail.stderr b/packages/yew-macro/tests/html_macro/list-fail.stderr
index 2c24fca6132..49cda7d753d 100644
--- a/packages/yew-macro/tests/html_macro/list-fail.stderr
+++ b/packages/yew-macro/tests/html_macro/list-fail.stderr
@@ -1,65 +1,87 @@
 error: this opening fragment has no corresponding closing fragment
- --> $DIR/list-fail.rs:5:13
+ --> tests/html_macro/list-fail.rs:5:13
   |
 5 |     html! { <> };
   |             ^^
 
 error: this opening fragment has no corresponding closing fragment
- --> $DIR/list-fail.rs:6:15
+ --> tests/html_macro/list-fail.rs:6:15
   |
 6 |     html! { <><> };
   |               ^^
 
 error: this opening fragment has no corresponding closing fragment
- --> $DIR/list-fail.rs:7:13
+ --> tests/html_macro/list-fail.rs:7:13
   |
 7 |     html! { <><></> };
   |             ^^
 
 error: this closing fragment has no corresponding opening fragment
-  --> $DIR/list-fail.rs:10:13
+  --> tests/html_macro/list-fail.rs:10:13
    |
 10 |     html! { </> };
    |             ^^^
 
 error: this closing fragment has no corresponding opening fragment
-  --> $DIR/list-fail.rs:11:13
+  --> tests/html_macro/list-fail.rs:11:13
    |
 11 |     html! { </></> };
    |             ^^^
 
 error: only one root html element is allowed (hint: you can wrap multiple html elements in a fragment `<></>`)
-  --> $DIR/list-fail.rs:14:18
+  --> tests/html_macro/list-fail.rs:14:18
    |
 14 |     html! { <></><></> };
    |                  ^^^^^
 
 error: expected a valid html element
-  --> $DIR/list-fail.rs:16:15
+  --> tests/html_macro/list-fail.rs:16:15
    |
 16 |     html! { <>invalid</> };
    |               ^^^^^^^
 
 error: expected an expression following this equals sign
-  --> $DIR/list-fail.rs:18:17
+  --> tests/html_macro/list-fail.rs:18:17
    |
 18 |     html! { <key=></> };
    |                 ^^
 
-error: the property value must be either a literal or enclosed in braces. Consider adding braces around your expression.
-  --> $DIR/list-fail.rs:20:18
+error: the property value must be either a literal or enclosed in braces. Consider adding braces around your expression.: MethodCall(
+           ExprMethodCall {
+               attrs: [],
+               receiver: Lit(
+                   ExprLit {
+                       attrs: [],
+                       lit: Str(
+                           LitStr {
+                               token: "key",
+                           },
+                       ),
+                   },
+               ),
+               dot_token: Dot,
+               method: Ident {
+                   ident: "to_string",
+                   span: #0 bytes(404..413),
+               },
+               turbofish: None,
+               paren_token: Paren,
+               args: [],
+           },
+       )
+  --> tests/html_macro/list-fail.rs:20:18
    |
 20 |     html! { <key="key".to_string()></key> };
    |                  ^^^^^^^^^^^^^^^^^
 
 error: only a single `key` prop is allowed on a fragment
-  --> $DIR/list-fail.rs:23:30
+  --> tests/html_macro/list-fail.rs:23:30
    |
 23 |     html! { <key="first key" key="second key" /> };
    |                              ^^^
 
 error: fragments only accept the `key` prop
-  --> $DIR/list-fail.rs:25:14
+  --> tests/html_macro/list-fail.rs:25:14
    |
 25 |     html! { <some_attr="test"></> };
    |              ^^^^^^^^^

From dfd2082325878c637e61fa881240a66eaa753b02 Mon Sep 17 00:00:00 2001
From: Muhammad Hamza <muhammadhamza1311@gmail.com>
Date: Sun, 14 Aug 2022 21:02:26 +0500
Subject: [PATCH 17/17] will you be happy now, clippy?

---
 packages/yew/src/dom_bundle/btag/attributes.rs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/yew/src/dom_bundle/btag/attributes.rs b/packages/yew/src/dom_bundle/btag/attributes.rs
index 71d44ae2f01..040905ba7f1 100644
--- a/packages/yew/src/dom_bundle/btag/attributes.rs
+++ b/packages/yew/src/dom_bundle/btag/attributes.rs
@@ -145,7 +145,7 @@ impl Attributes {
                 Some(old) => old != new,
                 None => true,
             } {
-                Self::set(&el, k, new.0, new.1);
+                Self::set(el, k, new.0, new.1);
             }
         }