From 4eecb7599a7c1542017d8747ae742763c88748a5 Mon Sep 17 00:00:00 2001
From: Simon <simon@siku2.io>
Date: Fri, 30 Apr 2021 14:04:44 +0500
Subject: [PATCH] Implicit optional attributes (#1637)

---
 examples/boids/src/slider.rs                  |   6 +-
 examples/crm/src/add_client.rs                |   6 +-
 examples/js_callback/src/main.rs              |   2 +-
 examples/keyed_list/src/main.rs               |   2 +-
 examples/keyed_list/src/person.rs             |   4 +-
 examples/mount_point/src/main.rs              |   2 +-
 examples/nested_list/src/main.rs              |   3 +-
 examples/router/src/components/author_card.rs |   2 +-
 examples/router/src/components/post_card.rs   |   2 +-
 .../router/src/components/progress_delay.rs   |   2 +-
 examples/router/src/pages/author.rs           |   2 +-
 examples/router/src/pages/author_list.rs      |   2 +-
 examples/store/src/post.rs                    |   2 +-
 examples/store/src/text_input.rs              |   2 +-
 examples/todomvc/src/main.rs                  |   4 +-
 packages/yew-components/src/select.rs         |   2 +-
 packages/yew-macro/src/derive_props/field.rs  |  90 ++--
 .../yew-macro/src/html_tree/html_element.rs   | 338 +++++--------
 packages/yew-macro/src/html_tree/html_list.rs |   6 +-
 packages/yew-macro/src/props/component.rs     |  18 +-
 packages/yew-macro/src/props/element.rs       |  14 +-
 packages/yew-macro/src/props/prop.rs          |  44 +-
 packages/yew-macro/src/props/prop_macro.rs    |   5 +-
 packages/yew-macro/src/stringify.rs           |  38 +-
 .../yew-macro/tests/derive_props/fail.stderr  |  37 +-
 packages/yew-macro/tests/derive_props/pass.rs |  11 +-
 .../tests/html_macro/component-fail.rs        |   2 -
 .../tests/html_macro/component-fail.stderr    |  64 +--
 .../tests/html_macro/component-pass.rs        |   4 +-
 .../tests/html_macro/element-fail.rs          |  57 ++-
 .../tests/html_macro/element-fail.stderr      | 463 ++++++++----------
 .../tests/html_macro/element-pass.rs          |  41 --
 .../tests/html_macro/html-element-pass.rs     |  81 +++
 .../tests/html_macro/html-node-pass.rs        |  23 +
 .../yew-macro/tests/html_macro/list-fail.rs   |  16 +-
 .../tests/html_macro/list-fail.stderr         |  66 ++-
 .../yew-macro/tests/html_macro/node-pass.rs   |  12 +-
 packages/yew/src/agent/link.rs                |   3 +
 packages/yew/src/callback.rs                  |   3 +
 packages/yew/src/html/classes.rs              |  22 +
 packages/yew/src/html/component/lifecycle.rs  |   4 +
 packages/yew/src/html/conversion.rs           |  89 ++++
 packages/yew/src/html/listener/macros.rs      |   9 +-
 packages/yew/src/html/mod.rs                  |   2 +
 packages/yew/src/virtual_dom/key.rs           |   6 +-
 packages/yew/src/virtual_dom/mod.rs           |  43 +-
 packages/yew/src/virtual_dom/vcomp.rs         |  50 +-
 packages/yew/src/virtual_dom/vtag.rs          | 157 ++----
 packages/yew/src/virtual_dom/vtext.rs         |   7 +-
 packages/yewtil/src/history.rs                |   2 +-
 website/docs/concepts/html/components.md      |  41 +-
 51 files changed, 890 insertions(+), 1023 deletions(-)
 delete mode 100644 packages/yew-macro/tests/html_macro/element-pass.rs
 create mode 100644 packages/yew-macro/tests/html_macro/html-element-pass.rs
 create mode 100644 packages/yew-macro/tests/html_macro/html-node-pass.rs
 create mode 100644 packages/yew/src/html/conversion.rs

diff --git a/examples/boids/src/slider.rs b/examples/boids/src/slider.rs
index a86c77f82e8..f98be3d01ee 100644
--- a/examples/boids/src/slider.rs
+++ b/examples/boids/src/slider.rs
@@ -80,13 +80,13 @@ impl Component for Slider {
 
         html! {
             <div class="slider">
-                <label for=id class="slider__label">{ label }</label>
+                <label for=id.clone() class="slider__label">{ label }</label>
                 <input type="range"
                     id=id
                     class="slider__input"
-                    min=min max=max step=step
+                    min=min.to_string() max=max.to_string() step=step.to_string()
                     oninput=onchange.reform(|data: InputData| data.value.parse().unwrap())
-                    value=value
+                    value=value.to_string()
                 />
                 <span class="slider__value">{ display_value }</span>
             </div>
diff --git a/examples/crm/src/add_client.rs b/examples/crm/src/add_client.rs
index ed2683092cf..f5eba187286 100644
--- a/examples/crm/src/add_client.rs
+++ b/examples/crm/src/add_client.rs
@@ -78,19 +78,19 @@ impl Component for AddClientForm {
                     <input
                         class=classes!("new-client", "firstname")
                         placeholder="First name"
-                        value=&client.first_name
+                        value=client.first_name.clone()
                         oninput=link.callback(|e: InputData| Msg::UpdateFirstName(e.value))
                     />
                     <input
                         class=classes!("new-client", "lastname")
                         placeholder="Last name"
-                        value=&client.last_name
+                        value=client.last_name.clone()
                         oninput=link.callback(|e: InputData| Msg::UpdateLastName(e.value))
                     />
                     <textarea
                         class=classes!("new-client", "description")
                         placeholder="Description"
-                        value=&client.description
+                        value=client.description.clone()
                         oninput=link.callback(|e: InputData| Msg::UpdateDescription(e.value))
                     />
                 </div>
diff --git a/examples/js_callback/src/main.rs b/examples/js_callback/src/main.rs
index aafff9599a1..aaaee3edf44 100644
--- a/examples/js_callback/src/main.rs
+++ b/examples/js_callback/src/main.rs
@@ -58,7 +58,7 @@ impl Component for Model {
                 <textarea
                     class="code-block"
                     oninput=self.link.callback(|input: InputData| Msg::Payload(input.value))
-                    value=&self.payload
+                    value=self.payload.clone()
                 />
                 <button onclick=self.link.callback(|_| Msg::Payload(bindings::get_payload()))>
                     { "Get the payload!" }
diff --git a/examples/keyed_list/src/main.rs b/examples/keyed_list/src/main.rs
index ddbb6155641..475f4cd9fce 100644
--- a/examples/keyed_list/src/main.rs
+++ b/examples/keyed_list/src/main.rs
@@ -169,7 +169,7 @@ impl Model {
                             { self.build_component_ratio }
                         </p>
                         <input name="ratio" type="range" class="form-control-range" min="0.0" max="1.0" step="any"
-                            value=self.build_component_ratio
+                            value=self.build_component_ratio.to_string()
                             oninput=self.link.callback(|e: InputData| Msg::ChangeRatio(e.value))
                         />
                     </div>
diff --git a/examples/keyed_list/src/person.rs b/examples/keyed_list/src/person.rs
index 9b244fbd7fa..6f377e3ccc0 100644
--- a/examples/keyed_list/src/person.rs
+++ b/examples/keyed_list/src/person.rs
@@ -116,9 +116,9 @@ impl PersonType {
             }
             Self::Component(info) => {
                 if keyed {
-                    html! { <PersonComponent key=info.id.to_string() info=info /> }
+                    html! { <PersonComponent key=info.id.to_string() info=info.clone() /> }
                 } else {
-                    html! { <PersonComponent info=info /> }
+                    html! { <PersonComponent info=info.clone() /> }
                 }
             }
         }
diff --git a/examples/mount_point/src/main.rs b/examples/mount_point/src/main.rs
index d7a39116c35..913d5b13e4a 100644
--- a/examples/mount_point/src/main.rs
+++ b/examples/mount_point/src/main.rs
@@ -39,7 +39,7 @@ impl Component for Model {
         html! {
             <div>
                 <input
-                    value=&self.name
+                    value=self.name.clone()
                     oninput=self.link.callback(|e: InputData| Msg::UpdateName(e.value))
                 />
                 <p>{ self.name.chars().rev().collect::<String>() }</p>
diff --git a/examples/nested_list/src/main.rs b/examples/nested_list/src/main.rs
index eb255484167..27b51f2e086 100644
--- a/examples/nested_list/src/main.rs
+++ b/examples/nested_list/src/main.rs
@@ -7,7 +7,7 @@ use std::cell::RefCell;
 use std::fmt;
 use std::ops::Deref;
 use std::rc::Rc;
-use yew::html::{Component, ComponentLink};
+use yew::html::{Component, ComponentLink, ImplicitClone};
 
 pub struct WeakComponentLink<COMP: Component>(Rc<RefCell<Option<ComponentLink<COMP>>>>);
 
@@ -16,6 +16,7 @@ impl<COMP: Component> Clone for WeakComponentLink<COMP> {
         Self(Rc::clone(&self.0))
     }
 }
+impl<COMP: Component> ImplicitClone for WeakComponentLink<COMP> {}
 
 impl<COMP: Component> Default for WeakComponentLink<COMP> {
     fn default() -> Self {
diff --git a/examples/router/src/components/author_card.rs b/examples/router/src/components/author_card.rs
index eecb9e1e746..3e6414d3892 100644
--- a/examples/router/src/components/author_card.rs
+++ b/examples/router/src/components/author_card.rs
@@ -41,7 +41,7 @@ impl Component for AuthorCard {
                     <div class="media">
                         <div class="media-left">
                             <figure class="image is-128x128">
-                                <img src=author.image_url />
+                                <img src=author.image_url.clone() />
                             </figure>
                         </div>
                         <div class="media-content">
diff --git a/examples/router/src/components/post_card.rs b/examples/router/src/components/post_card.rs
index a271ff06342..7803c69e059 100644
--- a/examples/router/src/components/post_card.rs
+++ b/examples/router/src/components/post_card.rs
@@ -39,7 +39,7 @@ impl Component for PostCard {
             <div class="card">
                 <div class="card-image">
                     <figure class="image is-2by1">
-                        <img src={ &post.image_url } loading="lazy" />
+                        <img src=post.image_url.clone() loading="lazy" />
                     </figure>
                 </div>
                 <div class="card-content">
diff --git a/examples/router/src/components/progress_delay.rs b/examples/router/src/components/progress_delay.rs
index da6ca1bd19a..13de07e9b88 100644
--- a/examples/router/src/components/progress_delay.rs
+++ b/examples/router/src/components/progress_delay.rs
@@ -68,7 +68,7 @@ impl Component for ProgressDelay {
     fn view(&self) -> Html {
         let value = self.value;
         html! {
-            <progress class="progress is-primary" value=value max=1.0>
+            <progress class="progress is-primary" value=value.to_string() max=1.0>
                 { format!("{:.0}%", 100.0 * value) }
             </progress>
         }
diff --git a/examples/router/src/pages/author.rs b/examples/router/src/pages/author.rs
index 5b7fe94ef6a..1e40967f709 100644
--- a/examples/router/src/pages/author.rs
+++ b/examples/router/src/pages/author.rs
@@ -54,7 +54,7 @@ impl Component for Author {
                         </div>
                         <div class="tile is-parent">
                             <figure class="tile is-child image is-square">
-                                <img src=author.image_url />
+                                <img src=author.image_url.clone() />
                             </figure>
                         </div>
                         <div class="tile is-parent">
diff --git a/examples/router/src/pages/author_list.rs b/examples/router/src/pages/author_list.rs
index 716a84553d5..186c52dd5b5 100644
--- a/examples/router/src/pages/author_list.rs
+++ b/examples/router/src/pages/author_list.rs
@@ -38,7 +38,7 @@ impl Component for AuthorList {
     }
 
     fn view(&self) -> Html {
-        let authors = self.seeds.iter().map(|seed| {
+        let authors = self.seeds.iter().map(|&seed| {
             html! {
                 <div class="tile is-parent">
                     <div class="tile is-child">
diff --git a/examples/store/src/post.rs b/examples/store/src/post.rs
index 398b825a81d..2b8f2d02282 100644
--- a/examples/store/src/post.rs
+++ b/examples/store/src/post.rs
@@ -71,7 +71,7 @@ impl Component for Post {
                 <h2>{ format!("Post #{}", self.id) }</h2>
                 <p>{text}</p>
 
-                <TextInput value=text onsubmit=self.link.callback(Msg::UpdateText) />
+                <TextInput value=text.to_owned() onsubmit=self.link.callback(Msg::UpdateText) />
                 <button onclick=self.link.callback(|_| Msg::Delete)>
                     { "Delete" }
                 </button>
diff --git a/examples/store/src/text_input.rs b/examples/store/src/text_input.rs
index e0ac230e614..1f52f0c746e 100644
--- a/examples/store/src/text_input.rs
+++ b/examples/store/src/text_input.rs
@@ -57,7 +57,7 @@ impl Component for TextInput {
         html! {
             <input
                 type="text"
-                value=&self.text
+                value=self.text.clone()
                 oninput=self.link.callback(|e: InputData| Msg::SetText(e.value))
                 onkeydown=self.link.batch_callback(move |e: KeyboardEvent| {
                     e.stop_propagation();
diff --git a/examples/todomvc/src/main.rs b/examples/todomvc/src/main.rs
index ff5e4876b53..84da409e827 100644
--- a/examples/todomvc/src/main.rs
+++ b/examples/todomvc/src/main.rs
@@ -196,7 +196,7 @@ impl Model {
             <input
                 class="new-todo"
                 placeholder="What needs to be done?"
-                value=&self.state.value
+                value=self.state.value.clone()
                 oninput=self.link.callback(|e: InputData| Msg::Update(e.value))
                 onkeypress=self.link.batch_callback(|e: KeyboardEvent| {
                     if e.key() == "Enter" { Some(Msg::Add) } else { None }
@@ -242,7 +242,7 @@ impl Model {
                     class="edit"
                     type="text"
                     ref=self.focus_ref.clone()
-                    value=&self.state.edit_value
+                    value=self.state.edit_value.clone()
                     onmouseover=self.link.callback(|_| Msg::Focus)
                     oninput=self.link.callback(|e: InputData| Msg::UpdateEdit(e.value))
                     onblur=self.link.callback(move |_| Msg::Edit(idx))
diff --git a/packages/yew-components/src/select.rs b/packages/yew-components/src/select.rs
index 615a0937162..00fe9bc1ecd 100644
--- a/packages/yew-components/src/select.rs
+++ b/packages/yew-components/src/select.rs
@@ -144,7 +144,7 @@ where
         html! {
             <select
                 ref=self.select_ref.clone()
-                id=self.props.id
+                id=self.props.id.clone()
                 class=self.props.class.clone()
                 disabled=self.props.disabled
                 onchange=self.on_change()
diff --git a/packages/yew-macro/src/derive_props/field.rs b/packages/yew-macro/src/derive_props/field.rs
index d80798018ed..e24bc3b7a04 100644
--- a/packages/yew-macro/src/derive_props/field.rs
+++ b/packages/yew-macro/src/derive_props/field.rs
@@ -5,12 +5,13 @@ use std::cmp::{Ord, Ordering, PartialEq, PartialOrd};
 use std::convert::TryFrom;
 use syn::parse::Result;
 use syn::spanned::Spanned;
-use syn::{Error, Expr, Field, Type, Visibility};
+use syn::{Error, Expr, Field, Type, TypePath, Visibility};
 
 #[allow(clippy::large_enum_variant)]
 #[derive(PartialEq, Eq)]
 enum PropAttr {
     Required { wrapped_name: Ident },
+    Option,
     PropOr(Expr),
     PropOrElse(Expr),
     PropOrDefault,
@@ -37,36 +38,59 @@ impl PropField {
         )
     }
 
+    /// Ident of the wrapped field name
+    fn wrapped_name(&self) -> &Ident {
+        match &self.attr {
+            PropAttr::Required { wrapped_name } => wrapped_name,
+            _ => &self.name,
+        }
+    }
+
     /// Used to transform the `PropWrapper` struct into `Properties`
     pub fn to_field_setter(&self) -> proc_macro2::TokenStream {
         let name = &self.name;
         match &self.attr {
             PropAttr::Required { wrapped_name } => {
                 quote! {
-                    #name: self.wrapped.#wrapped_name.unwrap(),
+                    #name: ::std::option::Option::unwrap(self.wrapped.#wrapped_name),
                 }
             }
-            _ => {
+            PropAttr::Option => {
                 quote! {
                     #name: self.wrapped.#name,
                 }
             }
+            PropAttr::PropOr(value) => {
+                quote_spanned! {value.span()=>
+                    #name: ::std::option::Option::unwrap_or(self.wrapped.#name, #value),
+                }
+            }
+            PropAttr::PropOrElse(func) => {
+                quote_spanned! {func.span()=>
+                    #name: ::std::option::Option::unwrap_or_else(self.wrapped.#name, #func),
+                }
+            }
+            PropAttr::PropOrDefault => {
+                quote! {
+                    #name: ::std::option::Option::unwrap_or_default(self.wrapped.#name),
+                }
+            }
         }
     }
 
     /// Wrap all required props in `Option`
     pub fn to_field_def(&self) -> proc_macro2::TokenStream {
         let ty = &self.ty;
+        let wrapped_name = self.wrapped_name();
         match &self.attr {
-            PropAttr::Required { wrapped_name } => {
+            PropAttr::Option => {
                 quote! {
-                    #wrapped_name: ::std::option::Option<#ty>,
+                    #wrapped_name: #ty,
                 }
             }
             _ => {
-                let name = &self.name;
                 quote! {
-                    #name: #ty,
+                    #wrapped_name: ::std::option::Option<#ty>,
                 }
             }
         }
@@ -74,32 +98,9 @@ impl PropField {
 
     /// All optional props must implement the `Default` trait
     pub fn to_default_setter(&self) -> proc_macro2::TokenStream {
-        match &self.attr {
-            PropAttr::Required { wrapped_name } => {
-                quote! {
-                    #wrapped_name: ::std::option::Option::None,
-                }
-            }
-            PropAttr::PropOr(value) => {
-                let name = &self.name;
-                let span = value.span();
-                quote_spanned! {span=>
-                    #name: #value,
-                }
-            }
-            PropAttr::PropOrElse(func) => {
-                let name = &self.name;
-                let span = func.span();
-                quote_spanned! {span=>
-                    #name: (#func)(),
-                }
-            }
-            PropAttr::PropOrDefault => {
-                let name = &self.name;
-                quote! {
-                    #name: ::std::default::Default::default(),
-                }
-            }
+        let wrapped_name = self.wrapped_name();
+        quote! {
+            #wrapped_name: ::std::option::Option::None,
         }
     }
 
@@ -115,8 +116,8 @@ impl PropField {
             PropAttr::Required { wrapped_name } => {
                 quote! {
                     #[doc(hidden)]
-                    #vis fn #name(mut self, #name: #ty) -> #builder_name<#generic_arguments> {
-                        self.wrapped.#wrapped_name = ::std::option::Option::Some(#name);
+                    #vis fn #name(mut self, #name: impl ::yew::html::IntoPropValue<#ty>) -> #builder_name<#generic_arguments> {
+                        self.wrapped.#wrapped_name = ::std::option::Option::Some(#name.into_prop_value());
                         #builder_name {
                             wrapped: self.wrapped,
                             _marker: ::std::marker::PhantomData,
@@ -124,11 +125,20 @@ impl PropField {
                     }
                 }
             }
+            PropAttr::Option => {
+                quote! {
+                    #[doc(hidden)]
+                    #vis fn #name(mut self, #name: impl ::yew::html::IntoPropValue<#ty>) -> #builder_name<#generic_arguments> {
+                        self.wrapped.#name = #name.into_prop_value();
+                        self
+                    }
+                }
+            }
             _ => {
                 quote! {
                     #[doc(hidden)]
-                    #vis fn #name(mut self, #name: #ty) -> #builder_name<#generic_arguments> {
-                        self.wrapped.#name = #name;
+                    #vis fn #name(mut self, #name: impl ::yew::html::IntoPropValue<#ty>) -> #builder_name<#generic_arguments> {
+                        self.wrapped.#name = ::std::option::Option::Some(#name.into_prop_value());
                         self
                     }
                 }
@@ -154,6 +164,12 @@ impl PropField {
             } else {
                 unreachable!()
             }
+        } else if matches!(
+            &named_field.ty,
+            Type::Path(TypePath { path, .. })
+            if path.segments.len() == 1 && path.segments[0].ident == "Option"
+        ) {
+            Ok(PropAttr::Option)
         } else {
             let ident = named_field.ident.as_ref().unwrap();
             let wrapped_name = Ident::new(&format!("{}_wrapper", ident), Span::call_site());
diff --git a/packages/yew-macro/src/html_tree/html_element.rs b/packages/yew-macro/src/html_tree/html_element.rs
index e4c2057993d..70a05c8835a 100644
--- a/packages/yew-macro/src/html_tree/html_element.rs
+++ b/packages/yew-macro/src/html_tree/html_element.rs
@@ -1,7 +1,7 @@
 use super::{HtmlChildrenTree, HtmlDashedName, TagTokens};
 use crate::props::{ClassesForm, ElementProps, Prop};
 use crate::stringify::Stringify;
-use crate::{non_capitalized_ascii, stringify, Peek, PeekValue};
+use crate::{non_capitalized_ascii, Peek, PeekValue};
 use boolinator::Boolinator;
 use proc_macro2::{Delimiter, TokenStream};
 use quote::{quote, quote_spanned, ToTokens};
@@ -132,203 +132,124 @@ impl ToTokens for HtmlElement {
 
         // attributes with special treatment
 
-        let node_ref = node_ref
-            .as_ref()
-            .map(|attr| {
-                let value = &attr.value;
-                quote! { #value }
-            })
-            .unwrap_or(quote! { ::std::default::Default::default() });
-        let key = key
-            .as_ref()
-            .map(|attr| {
-                let value = &attr.value;
+        let set_node_ref = node_ref.as_ref().map(|attr| {
+            let value = &attr.value;
+            quote! {
+                #vtag.node_ref = #value;
+            }
+        });
+        let set_key = key.as_ref().map(|attr| {
+            let value = attr.value.optimize_literals();
+            quote! {
+                #vtag.__macro_set_key(#value);
+            }
+        });
+        let set_value = value.as_ref().map(|attr| {
+            let value = attr.value.optimize_literals();
+            quote! {
+                #vtag.set_value(#value);
+            }
+        });
+        let set_kind = kind.as_ref().map(|attr| {
+            let value = attr.value.optimize_literals();
+            quote! {
+                #vtag.set_kind(#value);
+            }
+        });
+        let set_checked = checked.as_ref().map(|attr| {
+            let value = &attr.value;
+            quote! {
+                #vtag.set_checked(#value);
+            }
+        });
+
+        // other attributes
+
+        let set_attributes = {
+            let normal_attrs = attributes.iter().map(|Prop { label, value, .. }| {
+                let key = label.to_lit_str();
+                let value = value.optimize_literals();
                 quote! {
-                    ::std::option::Option::Some
-                        (::std::convert::Into::<::yew::virtual_dom::Key>::into(#value))
-                }
-            })
-            .unwrap_or(quote! { ::std::option::Option::None });
-        let value = value
-            .as_ref()
-            .map(|attr| {
-                let value = &attr.value;
-                if attr.question_mark.is_some() {
-                    quote_spanned! {value.span()=>
-                        ::std::option::Option::as_ref(&(#value))
-                            .map(::std::string::ToString::to_string)
-                    }
-                } else {
-                    quote_spanned! {value.span()=>
-                        ::std::option::Option::Some(::std::string::ToString::to_string(&(#value)))
-                    }
+                    ::yew::virtual_dom::PositionalAttr::new(#key, #value)
                 }
-            })
-            .unwrap_or(quote! { ::std::option::Option::None });
-        let kind = kind
-            .as_ref()
-            .map(|attr| {
-                let value = &attr.value;
-                if attr.question_mark.is_some() {
-                    let sr = stringify::stringify_option_at_runtime(value);
-                    quote_spanned! {value.span()=>
-                        ::std::option::Option::map(
-                            #sr,
-                            |v| ::std::convert::Into::<::std::borrow::Cow<'static, str>>::into(v),
-                        )
-                    }
-                } else {
-                    let sr = value.stringify();
-                    quote_spanned! {value.span()=>
-                        ::std::option::Option::Some
-                            (::std::convert::Into::<::std::borrow::Cow<'static, str>>::into(#sr))
-                    }
-                }
-            })
-            .unwrap_or(quote! { ::std::option::Option::None });
-        let checked = checked
-            .as_ref()
-            .map(|attr| {
-                let value = &attr.value;
-                quote_spanned! {value.span()=> #value}
-            })
-            .unwrap_or(quote! { false });
-
-        // normal attributes
-
-        let mut attributes = attributes
-            .iter()
-            .map(
-                |Prop {
-                     label,
-                     question_mark,
-                     value,
-                     ..
-                 }| {
-                    let key = label.to_lit_str();
-                    if question_mark.is_some() {
-                        let sr = stringify::stringify_option_at_runtime(value);
-                        quote! {
-                            ::yew::virtual_dom::PositionalAttr(#key, #sr)
-                        }
-                    } else {
-                        let sr = value.stringify();
-                        quote! {
-                            ::yew::virtual_dom::PositionalAttr::new(#key, #sr)
-                        }
-                    }
-                },
-            )
-            .collect::<Vec<_>>();
-
-        attributes.extend(booleans.iter().map(|Prop { label, value, .. }| {
-            let label_str = label.to_lit_str();
-            let sr = label.stringify();
-            quote_spanned! {value.span()=> {
-                if #value {
-                    ::yew::virtual_dom::PositionalAttr::new(#label_str, #sr)
-                } else {
-                    ::yew::virtual_dom::PositionalAttr::new_placeholder(#label_str)
+            });
+            let boolean_attrs = booleans.iter().map(|Prop { label, value, .. }| {
+                let key = label.to_lit_str();
+                quote! {
+                    ::yew::virtual_dom::PositionalAttr::new_boolean(#key, #value)
                 }
-            }}
-        }));
-
-        match classes {
-            Some(ClassesForm::Tuple(classes)) => {
-                let span = classes.span();
-                let classes: Vec<_> = classes.elems.iter().collect();
-                let n = classes.len();
-                let sr = stringify::stringify_at_runtime(quote! { __yew_classes });
-
-                let deprecation_warning = quote_spanned! {span=>
-                    #[deprecated(
-                        note = "the use of `(...)` with the attribute `class` is deprecated and will be removed in version 0.19. Use the `classes!` macro instead."
-                    )]
-                    fn deprecated_use_of_class() {}
-
-                    if false {
-                        deprecated_use_of_class();
+            });
+            let class_attr = classes.as_ref().and_then(|classes| match classes {
+                ClassesForm::Tuple(classes) => {
+                    let span = classes.span();
+                    let classes: Vec<_> = classes.elems.iter().collect();
+                    let n = classes.len();
+
+                    let deprecation_warning = quote_spanned! {span=>
+                        #[deprecated(
+                            note = "the use of `(...)` with the attribute `class` is deprecated and will be removed in version 0.19. Use the `classes!` macro instead."
+                        )]
+                        fn deprecated_use_of_class() {}
+
+                        if false {
+                            deprecated_use_of_class();
+                        };
                     };
-                };
 
-                attributes.push(quote! {{
-                    let mut __yew_classes = ::yew::html::Classes::with_capacity(#n);
-                    #(__yew_classes.push(#classes);)*
+                    Some(quote! {
+                        {
+                            let mut __yew_classes = ::yew::html::Classes::with_capacity(#n);
+                            #(__yew_classes.push(#classes);)*
 
-                    #deprecation_warning
+                            #deprecation_warning
 
-                    if !__yew_classes.is_empty() {
-                        ::yew::virtual_dom::PositionalAttr::new("class", #sr)
-                    } else {
-                        ::yew::virtual_dom::PositionalAttr::new_placeholder("class")
-                    }
-                }});
-            }
-            Some(ClassesForm::Single(classes)) => match classes.try_into_lit() {
-                Some(lit) => {
-                    if !lit.value().is_empty() {
-                        let sr = lit.stringify();
-                        attributes.push(quote! {
-                            ::yew::virtual_dom::PositionalAttr::new("class", #sr)
-                        });
-                    }
+                            ::yew::virtual_dom::PositionalAttr::new("class", __yew_classes)
+                        }
+                    })
                 }
-                None => {
-                    let sr = stringify::stringify_at_runtime(quote! { __yew_classes });
-                    attributes.push(quote! {{
-                        let __yew_classes = ::std::convert::Into::<::yew::html::Classes>::into(#classes);
-                        if !__yew_classes.is_empty() {
-                            ::yew::virtual_dom::PositionalAttr::new("class", #sr)
+                ClassesForm::Single(classes) => match classes.try_into_lit() {
+                    Some(lit) => {
+                        if lit.value().is_empty() {
+                            None
                         } else {
-                            ::yew::virtual_dom::PositionalAttr::new_placeholder("class")
+                            let sr = lit.stringify();
+                            Some(quote! { ::yew::virtual_dom::PositionalAttr::new("class", #sr) })
                         }
-                    }});
+                    }
+                    None => {
+                        Some(quote! { ::yew::virtual_dom::PositionalAttr::new("class", ::std::convert::Into::<::yew::html::Classes>::into(#classes)) })
+                    }
                 }
-            },
-            None => (),
+            });
+
+            let attrs = normal_attrs.chain(boolean_attrs).chain(class_attr);
+            quote! {
+                #vtag.attributes = ::yew::virtual_dom::Attributes::Vec(::std::vec![#(#attrs),*]);
+            }
         };
 
-        let listeners = if listeners.is_empty() {
-            quote! { ::std::vec![] }
-        } else if listeners.iter().any(|attr| attr.question_mark.is_some()) {
-            let listeners = listeners
-                .iter()
-                .map(
-                    |Prop {
-                         label,
-                         question_mark,
-                         value,
-                         ..
-                     }| {
-                        let name = &label.name;
-
-                        if question_mark.is_some() {
-                            let ident = Ident::new("__yew_listener", name.span());
-                            let listener = to_wrapped_listener(name, &ident);
-                            quote_spanned! {value.span()=>
-                                ::std::option::Option::map(#value, |#ident| #listener)
-                            }
-                        } else {
-                            let listener = to_wrapped_listener(name, value);
-                            quote_spanned! {value.span()=> Some(#listener)}
-                        }
-                    },
-                )
-                .collect::<Vec<TokenStream>>();
-            quote! {{
-                use ::std::iter::{Iterator, IntoIterator};
-
-                ::std::vec![#(#listeners),*]
-                    .into_iter()
-                    .filter_map(|l| l)
-                    .collect::<::std::vec::Vec<::std::rc::Rc<dyn ::yew::virtual_dom::Listener>>>()
-            }}
+        let set_listeners = if listeners.is_empty() {
+            None
+        } else {
+            let listeners_it = listeners.iter().map(|Prop { label, value, .. }| {
+                let name = &label.name;
+                quote! {
+                    ::yew::html::#name::Wrapper::__macro_new(#value)
+                }
+            });
+
+            Some(quote! {
+                #vtag.__macro_set_listeners(::std::vec![#(#listeners_it),*]);
+            })
+        };
+
+        let add_children = if children.is_empty() {
+            None
         } else {
-            let listeners_it = listeners
-                .iter()
-                .map(|Prop { label, value, .. }| to_wrapped_listener(&label.name, value))
-                .collect::<Vec<_>>();
-            quote! { ::std::vec![#(#listeners_it),*] }
+            Some(quote! {
+                #[allow(clippy::redundant_clone, unused_braces)]
+                #vtag.add_children(#children);
+            })
         };
 
         // These are the runtime-checks exclusive to dynamic tags.
@@ -336,7 +257,6 @@ impl ToTokens for HtmlElement {
         let dyn_tag_runtime_checks = if matches!(&name, TagName::Expr(_)) {
             // when Span::source_file Span::start get stabilised or yew-macro introduces a nightly feature flag
             // we should expand the panic message to contain the exact location of the dynamic tag.
-            let sr = stringify::stringify_at_runtime(quote! { __yew_v });
             Some(quote! {
                 // check void element
                 if !#vtag.children.is_empty() {
@@ -353,11 +273,8 @@ impl ToTokens for HtmlElement {
                 match #vtag.tag() {
                     "input" | "textarea" => {}
                     _ => {
-                        if let ::std::option::Option::Some(__yew_v) = #vtag.value.take() {
-                            #vtag.__macro_push_attribute("value", #sr);
-                        } else {
-                            #vtag.__macro_push_attribute_placeholder("value");
-                        };
+                        let __yew_v = #vtag.value.take();
+                        #vtag.__macro_push_attr(::yew::virtual_dom::PositionalAttr::new("value", __yew_v));
                     }
                 }
             })
@@ -367,38 +284,29 @@ impl ToTokens for HtmlElement {
 
         tokens.extend(quote_spanned! {name.span()=>
             {
-                #[allow(clippy::redundant_clone, unused_braces)]
-                let mut #vtag = ::yew::virtual_dom::VTag::__new_complete(
-                    #name_sr,
-                    #node_ref,
-                    #key,
-                    #value,
-                    #kind,
-                    #checked,
-                    ::yew::virtual_dom::Attributes::Vec(::std::vec![#(#attributes),*]),
-                    #listeners,
-                    ::yew::virtual_dom::VList{
-                        key: ::std::option::Option::None,
-                        children: #children,
-                    },
-                );
+                #[allow(unused_braces)]
+                let mut #vtag = ::yew::virtual_dom::VTag::new(#name_sr);
+
+                #set_node_ref
+                #set_key
+                #set_value
+                #set_kind
+                #set_checked
+                #set_attributes
+                #set_listeners
+
+                #add_children
 
                 #dyn_tag_runtime_checks
-                #[allow(unused_braces)]
-                <::yew::virtual_dom::VNode as ::std::convert::From<_>>::from(#vtag)
+                {
+                    use ::std::convert::From;
+                    ::yew::virtual_dom::VNode::from(#vtag)
+                }
             }
         });
     }
 }
 
-fn to_wrapped_listener(name: &Ident, value: impl ToTokens) -> TokenStream {
-    quote_spanned! {value.span()=>
-        ::std::rc::Rc::new(::yew::html::#name::Wrapper::new(
-            <::yew::virtual_dom::VTag as ::yew::virtual_dom::Transformer<_, _>>::transform(#value),
-        )) as ::std::rc::Rc::<dyn ::yew::virtual_dom::Listener>
-    }
-}
-
 struct DynamicName {
     at: Token![@],
     expr: Option<Block>,
diff --git a/packages/yew-macro/src/html_tree/html_list.rs b/packages/yew-macro/src/html_tree/html_list.rs
index d3fb07c9d60..a9a75ce93f0 100644
--- a/packages/yew-macro/src/html_tree/html_list.rs
+++ b/packages/yew-macro/src/html_tree/html_list.rs
@@ -64,9 +64,7 @@ impl ToTokens for HtmlList {
         } = &self;
 
         let key = if let Some(key) = &open.props.key {
-            quote_spanned! {key.span()=>
-                ::std::option::Option::Some(::std::convert::Into::<::yew::virtual_dom::Key>::into(#key))
-            }
+            quote_spanned! {key.span()=> ::std::option::Option::Some(::std::convert::Into::<::yew::virtual_dom::Key>::into(#key))}
         } else {
             quote! { ::std::option::Option::None }
         };
@@ -139,8 +137,6 @@ impl Parse for HtmlListProps {
                 ));
             }
 
-            prop.ensure_not_optional()?;
-
             Some(prop.value)
         };
 
diff --git a/packages/yew-macro/src/props/component.rs b/packages/yew-macro/src/props/component.rs
index 592d02ffd61..40891356ce8 100644
--- a/packages/yew-macro/src/props/component.rs
+++ b/packages/yew-macro/src/props/component.rs
@@ -138,13 +138,10 @@ impl ComponentProps {
         let build_props = match self {
             Self::List(props) => {
                 let set_props = props.iter().map(|Prop { label, value, .. }| {
-                        quote_spanned! {value.span()=> .#label(
-                            #[allow(unused_braces)]
-                            <::yew::virtual_dom::VComp as ::yew::virtual_dom::Transformer<_, _>>::transform(
-                                #value
-                            )
-                        )}
-                    });
+                    quote_spanned! {value.span()=>
+                        .#label(#value)
+                    }
+                });
 
                 let set_children = children_renderer.map(|children| {
                     Some(quote_spanned! {props_ty.span()=>
@@ -200,12 +197,7 @@ impl TryFrom<Props> for ComponentProps {
     fn try_from(props: Props) -> Result<Self, Self::Error> {
         props.check_no_duplicates()?;
         props.check_all(|prop| {
-            if prop.question_mark.is_some() {
-                Err(syn::Error::new_spanned(
-                    &prop.label,
-                    "optional attributes are only supported on elements. Components can use `Option<T>` properties to accomplish the same thing.",
-                ))
-            } else if !prop.label.extended.is_empty() {
+            if !prop.label.extended.is_empty() {
                 Err(syn::Error::new_spanned(
                     &prop.label,
                     "expected a valid Rust identifier",
diff --git a/packages/yew-macro/src/props/element.rs b/packages/yew-macro/src/props/element.rs
index 3edeab3ad37..4d95c2a9093 100644
--- a/packages/yew-macro/src/props/element.rs
+++ b/packages/yew-macro/src/props/element.rs
@@ -41,23 +41,13 @@ impl Parse for ElementProps {
 
         let booleans =
             props.drain_filter(|prop| BOOLEAN_SET.contains(prop.label.to_string().as_str()));
-        booleans.check_all(|prop| {
-            if prop.question_mark.is_some() {
-                Err(syn::Error::new_spanned(
-                    &prop.label,
-                    "boolean attributes don't support being used as an optional attribute (hint: a value of false results in the attribute not being set)"
-                ))
-            } else {
-                Ok(())
-            }
-        })?;
 
         let classes = props
-            .pop_nonoptional("class")?
+            .pop("class")
             .map(|prop| ClassesForm::from_expr(prop.value));
         let value = props.pop("value");
         let kind = props.pop("type");
-        let checked = props.pop_nonoptional("checked")?;
+        let checked = props.pop("checked");
 
         let SpecialProps { node_ref, key } = props.special;
 
diff --git a/packages/yew-macro/src/props/prop.rs b/packages/yew-macro/src/props/prop.rs
index 0036e6c6838..716dd2e0488 100644
--- a/packages/yew-macro/src/props/prop.rs
+++ b/packages/yew-macro/src/props/prop.rs
@@ -1,6 +1,6 @@
 use crate::html_tree::HtmlDashedName;
 use proc_macro2::TokenStream;
-use quote::{quote, ToTokens};
+use quote::ToTokens;
 use std::{
     cmp::Ordering,
     convert::TryFrom,
@@ -26,40 +26,13 @@ impl ToTokens for PropPunct {
 
 pub struct Prop {
     pub label: HtmlDashedName,
-    pub question_mark: Option<Token![?]>,
     /// Punctuation between `label` and `value`.
     pub punct: Option<PropPunct>,
     pub value: Expr,
 }
-impl Prop {
-    /// Checks if the prop uses the optional attribute syntax.
-    /// If it does, an error is returned.
-    pub fn ensure_not_optional(&self) -> syn::Result<()> {
-        let Self {
-            label,
-            question_mark,
-            punct,
-            ..
-        } = self;
-        if question_mark.is_some() {
-            let msg = format!(
-                "`{}` does not support being used as an optional attribute",
-                label
-            );
-            // include `?=` in the span
-            Err(syn::Error::new_spanned(
-                quote! { #label#question_mark#punct },
-                msg,
-            ))
-        } else {
-            Ok(())
-        }
-    }
-}
 impl Parse for Prop {
     fn parse(input: ParseStream) -> syn::Result<Self> {
         let label = input.parse::<HtmlDashedName>()?;
-        let question_mark = input.parse::<Token![?]>().ok();
         let equals = input.parse::<Token![=]>().map_err(|_| {
             syn::Error::new_spanned(
                 &label,
@@ -75,7 +48,6 @@ impl Parse for Prop {
         let value = input.parse::<Expr>()?;
         Ok(Self {
             label,
-            question_mark,
             punct: Some(PropPunct::Eq(equals)),
             value,
         })
@@ -141,16 +113,6 @@ impl SortedPropList {
 
         Ok(prop)
     }
-    /// Pop the prop with the given key and error if it uses the optional attribute syntax.
-    pub fn pop_nonoptional(&mut self, key: &str) -> syn::Result<Option<Prop>> {
-        match self.pop_unique(key) {
-            Ok(Some(prop)) => {
-                prop.ensure_not_optional()?;
-                Ok(Some(prop))
-            }
-            res => res,
-        }
-    }
 
     /// Turn the props into a vector of `Prop`.
     pub fn into_vec(self) -> Vec<Prop> {
@@ -224,8 +186,8 @@ impl SpecialProps {
     const KEY_LABEL: &'static str = "key";
 
     fn pop_from(props: &mut SortedPropList) -> syn::Result<Self> {
-        let node_ref = props.pop_nonoptional(Self::REF_LABEL)?;
-        let key = props.pop_nonoptional(Self::KEY_LABEL)?;
+        let node_ref = props.pop_unique(Self::REF_LABEL)?;
+        let key = props.pop_unique(Self::KEY_LABEL)?;
         Ok(Self { node_ref, key })
     }
 
diff --git a/packages/yew-macro/src/props/prop_macro.rs b/packages/yew-macro/src/props/prop_macro.rs
index 33203c7a8b0..e1145b8ace2 100644
--- a/packages/yew-macro/src/props/prop_macro.rs
+++ b/packages/yew-macro/src/props/prop_macro.rs
@@ -65,15 +65,14 @@ impl Parse for PropValue {
 }
 
 impl From<PropValue> for Prop {
-    fn from(val: PropValue) -> Prop {
+    fn from(prop_value: PropValue) -> Prop {
         let PropValue {
             label,
             colon_token,
             value,
-        } = val;
+        } = prop_value;
         Prop {
             label,
-            question_mark: None,
             punct: colon_token.map(PropPunct::Colon),
             value,
         }
diff --git a/packages/yew-macro/src/stringify.rs b/packages/yew-macro/src/stringify.rs
index 6fe6a3bf19a..291d9147b9b 100644
--- a/packages/yew-macro/src/stringify.rs
+++ b/packages/yew-macro/src/stringify.rs
@@ -1,25 +1,12 @@
 use proc_macro2::TokenStream;
-use quote::{quote, quote_spanned, ToTokens};
+use quote::{quote_spanned, ToTokens};
 use syn::spanned::Spanned;
-use syn::{Expr, Ident, Lit, LitStr};
+use syn::{Expr, Lit, LitStr};
 
 /// Stringify a value at runtime.
-pub fn stringify_at_runtime(src: impl ToTokens) -> TokenStream {
+fn stringify_at_runtime(src: impl ToTokens) -> TokenStream {
     quote_spanned! {src.span()=>
-        ::std::borrow::Cow::<'static, str>::Owned(
-            ::std::string::ToString::to_string(&(#src)),
-        )
-    }
-}
-
-/// Map an `Option` type such that it turns into `Cow<'static, str>`.
-pub fn stringify_option_at_runtime(src: impl ToTokens) -> TokenStream {
-    let ident = Ident::new("__yew_str", src.span());
-    let sr = stringify_at_runtime(&ident);
-    quote! {
-        ::std::option::Option::map(#src, |#ident| {
-            #sr
-        })
+        ::std::convert::Into::<::std::borrow::Cow::<'static, str>>::into(#src)
     }
 }
 
@@ -31,6 +18,18 @@ pub trait Stringify {
     fn try_into_lit(&self) -> Option<LitStr>;
     /// Create `Cow<'static, str>` however possible.
     fn stringify(&self) -> TokenStream;
+
+    /// Optimize literals to `&'static str`, otherwise keep the value as is.
+    fn optimize_literals(&self) -> TokenStream
+    where
+        Self: ToTokens,
+    {
+        if let Some(lit) = self.try_into_lit() {
+            lit.to_token_stream()
+        } else {
+            self.to_token_stream()
+        }
+    }
 }
 impl<T: Stringify + ?Sized> Stringify for &T {
     fn try_into_lit(&self) -> Option<LitStr> {
@@ -56,12 +55,11 @@ impl Stringify for LitStr {
 impl Stringify for Lit {
     fn try_into_lit(&self) -> Option<LitStr> {
         let s = match self {
-            Lit::Str(v) => v.value(),
+            Lit::Str(v) => return v.try_into_lit(),
             Lit::Char(v) => v.value().to_string(),
             Lit::Int(v) => v.base10_digits().to_string(),
             Lit::Float(v) => v.base10_digits().to_string(),
-            Lit::Bool(v) => v.value.to_string(),
-            _ => return None,
+            Lit::Bool(_) | Lit::ByteStr(_) | Lit::Byte(_) | Lit::Verbatim(_) => return None,
         };
         Some(LitStr::new(&s, self.span()))
     }
diff --git a/packages/yew-macro/tests/derive_props/fail.stderr b/packages/yew-macro/tests/derive_props/fail.stderr
index 0dd8d34332a..8bcb3a680a1 100644
--- a/packages/yew-macro/tests/derive_props/fail.stderr
+++ b/packages/yew-macro/tests/derive_props/fail.stderr
@@ -33,7 +33,7 @@ error[E0277]: the trait bound `t1::Value: std::default::Default` is not satisfie
 9 |     #[derive(Clone, Properties)]
   |                     ^^^^^^^^^^ the trait `std::default::Default` is not implemented for `t1::Value`
   |
-  = note: required by `std::default::Default::default`
+  = note: required by `Option::<T>::unwrap_or_default`
   = note: this error originates in a derive macro (in Nightly builds, run with -Z macro-backtrace for more info)
 
 error[E0599]: no method named `build` found for struct `t3::PropsBuilder<t3::PropsBuilderStep_missing_required_prop_value>` in the current scope
@@ -67,35 +67,28 @@ help: try using a conversion method
 67 |         #[prop_or(123.to_string())]
    |                   ^^^^^^^^^^^^^^^
 
-error[E0618]: expected function, found `{integer}`
-  --> $DIR/fail.rs:77:24
-   |
-77 |         #[prop_or_else(123)]
-   |                        ^^^ call expression requires function
+error[E0277]: expected a `FnOnce<()>` closure, found `{integer}`
+   --> $DIR/fail.rs:77:24
+    |
+77  |         #[prop_or_else(123)]
+    |                        ^^^ expected an `FnOnce<()>` closure, found `{integer}`
+    |
+    = help: the trait `FnOnce<()>` is not implemented for `{integer}`
+    = note: wrap the `{integer}` in a closure with no arguments: `|| { /* code */ }`
 
-error[E0061]: this function takes 1 argument but 0 arguments were supplied
+error[E0593]: function is expected to take 0 arguments, but it takes 1 argument
    --> $DIR/fail.rs:97:24
     |
 97  |         #[prop_or_else(foo)]
-    |                        ^^^- supplied 0 arguments
-    |                        |
-    |                        expected 1 argument
-    |
-note: function defined here
-   --> $DIR/fail.rs:101:8
-    |
+    |                        ^^^ expected function that takes 0 arguments
+...
 101 |     fn foo(bar: i32) -> String {
-    |        ^^^ --------
+    |     -------------------------- takes 1 argument
 
-error[E0308]: mismatched types
+error[E0271]: type mismatch resolving `<fn() -> i32 {t10::foo} as FnOnce<()>>::Output == String`
    --> $DIR/fail.rs:111:24
     |
 111 |         #[prop_or_else(foo)]
     |                        ^^^ expected struct `String`, found `i32`
     |
-help: try using a conversion method
-    |
-111 |         #[prop_or_else(foo.to_string())]
-    |                        ^^^^^^^^^^^^^^^
-111 |         #[prop_or_else(foo.to_string())]
-    |                        ^^^^^^^^^^^^^^^
+    = note: required by `Option::<T>::unwrap_or_else`
diff --git a/packages/yew-macro/tests/derive_props/pass.rs b/packages/yew-macro/tests/derive_props/pass.rs
index 72d541ef438..26718efdca3 100644
--- a/packages/yew-macro/tests/derive_props/pass.rs
+++ b/packages/yew-macro/tests/derive_props/pass.rs
@@ -188,10 +188,15 @@ mod t10 {
 mod t11 {
     use super::*;
 
-    // this test makes sure that deriving the Properties trait works for unit structs
-
     #[derive(Clone, Properties)]
-    pub struct Foo;
+    pub struct Props<T: Clone> {
+        value: Option<T>,
+    }
+
+    fn optional_prop_generics_should_work() {
+        Props::<bool>::builder().build();
+        Props::<bool>::builder().value(true).build();
+    }
 }
 
 fn main() {}
diff --git a/packages/yew-macro/tests/html_macro/component-fail.rs b/packages/yew-macro/tests/html_macro/component-fail.rs
index ef5ac9a6c8d..4b3c3c4c012 100644
--- a/packages/yew-macro/tests/html_macro/component-fail.rs
+++ b/packages/yew-macro/tests/html_macro/component-fail.rs
@@ -111,8 +111,6 @@ fn compile_fail() {
         <span>{ 1 }</span>
         <span>{ 2 }</span>
     };
-
-    html! { <TestComponent value?="not_supported" /> };
 }
 
 fn main() {}
diff --git a/packages/yew-macro/tests/html_macro/component-fail.stderr b/packages/yew-macro/tests/html_macro/component-fail.stderr
index 0fe6086865a..23c2fd1b795 100644
--- a/packages/yew-macro/tests/html_macro/component-fail.stderr
+++ b/packages/yew-macro/tests/html_macro/component-fail.stderr
@@ -159,12 +159,6 @@ error: only one root html element is allowed (hint: you can wrap multiple html e
 112 |         <span>{ 2 }</span>
     |         ^^^^^^^^^^^^^^^^^^
 
-error: optional attributes are only supported on elements. Components can use `Option<T>` properties to accomplish the same thing.
-   --> $DIR/component-fail.rs:115:28
-    |
-115 |     html! { <TestComponent value?="not_supported" /> };
-    |                            ^^^^^
-
 error[E0425]: cannot find value `blah` in this scope
   --> $DIR/component-fail.rs:69:25
    |
@@ -205,47 +199,37 @@ error[E0599]: no method named `unknown` found for struct `ChildPropertiesBuilder
 74 |     html! { <Child unknown="unknown" /> };
    |                    ^^^^^^^ method not found in `ChildPropertiesBuilder<ChildPropertiesBuilderStep_missing_required_prop_int>`
 
-error[E0277]: the trait bound `yew::virtual_dom::VComp: Transformer<(), String>` is not satisfied
+error[E0277]: the trait bound `(): IntoPropValue<String>` is not satisfied
   --> $DIR/component-fail.rs:77:33
    |
 77 |     html! { <Child int=1 string={} /> };
-   |                                 ^^ the trait `Transformer<(), String>` is not implemented for `yew::virtual_dom::VComp`
-   |
-   = help: the following implementations were found:
-             <yew::virtual_dom::VComp as Transformer<&'a T, Option<T>>>
-             <yew::virtual_dom::VComp as Transformer<&'a T, T>>
-             <yew::virtual_dom::VComp as Transformer<&'a str, Option<String>>>
-             <yew::virtual_dom::VComp as Transformer<&'a str, String>>
-           and 3 others
-   = note: required by `transform`
-
-error[E0277]: the trait bound `yew::virtual_dom::VComp: Transformer<{integer}, String>` is not satisfied
+   |                                 ^^ the trait `IntoPropValue<String>` is not implemented for `()`
+
+error[E0277]: the trait bound `{integer}: IntoPropValue<String>` is not satisfied
   --> $DIR/component-fail.rs:78:33
    |
 78 |     html! { <Child int=1 string=3 /> };
-   |                                 ^ the trait `Transformer<{integer}, String>` is not implemented for `yew::virtual_dom::VComp`
+   |                                 ^ the trait `IntoPropValue<String>` is not implemented for `{integer}`
    |
    = help: the following implementations were found:
-             <yew::virtual_dom::VComp as Transformer<&'a T, Option<T>>>
-             <yew::virtual_dom::VComp as Transformer<&'a T, T>>
-             <yew::virtual_dom::VComp as Transformer<&'a str, Option<String>>>
-             <yew::virtual_dom::VComp as Transformer<&'a str, String>>
-           and 3 others
-   = note: required by `transform`
+             <&'static str as IntoPropValue<Cow<'static, str>>>
+             <&'static str as IntoPropValue<String>>
+             <&T as IntoPropValue<Option<T>>>
+             <&T as IntoPropValue<T>>
+           and 4 others
 
-error[E0277]: the trait bound `yew::virtual_dom::VComp: Transformer<{integer}, String>` is not satisfied
-  --> $DIR/component-fail.rs:79:33
+error[E0277]: the trait bound `{integer}: IntoPropValue<String>` is not satisfied
+  --> $DIR/component-fail.rs:79:26
    |
 79 |     html! { <Child int=1 string={3} /> };
-   |                                 ^^^ the trait `Transformer<{integer}, String>` is not implemented for `yew::virtual_dom::VComp`
+   |                          ^^^^^^ the trait `IntoPropValue<String>` is not implemented for `{integer}`
    |
    = help: the following implementations were found:
-             <yew::virtual_dom::VComp as Transformer<&'a T, Option<T>>>
-             <yew::virtual_dom::VComp as Transformer<&'a T, T>>
-             <yew::virtual_dom::VComp as Transformer<&'a str, Option<String>>>
-             <yew::virtual_dom::VComp as Transformer<&'a str, String>>
-           and 3 others
-   = note: required by `transform`
+             <&'static str as IntoPropValue<Cow<'static, str>>>
+             <&'static str as IntoPropValue<String>>
+             <&T as IntoPropValue<Option<T>>>
+             <&T as IntoPropValue<T>>
+           and 4 others
 
 error[E0308]: mismatched types
   --> $DIR/component-fail.rs:80:30
@@ -253,19 +237,11 @@ error[E0308]: mismatched types
 80 |     html! { <Child int=1 ref=() /> };
    |                              ^^ expected struct `NodeRef`, found `()`
 
-error[E0277]: the trait bound `yew::virtual_dom::VComp: Transformer<u32, i32>` is not satisfied
+error[E0277]: the trait bound `u32: IntoPropValue<i32>` is not satisfied
   --> $DIR/component-fail.rs:82:24
    |
 82 |     html! { <Child int=0u32 /> };
-   |                        ^^^^ the trait `Transformer<u32, i32>` is not implemented for `yew::virtual_dom::VComp`
-   |
-   = help: the following implementations were found:
-             <yew::virtual_dom::VComp as Transformer<&'a T, Option<T>>>
-             <yew::virtual_dom::VComp as Transformer<&'a T, T>>
-             <yew::virtual_dom::VComp as Transformer<&'a str, Option<String>>>
-             <yew::virtual_dom::VComp as Transformer<&'a str, String>>
-           and 3 others
-   = note: required by `transform`
+   |                        ^^^^ the trait `IntoPropValue<i32>` is not implemented for `u32`
 
 error[E0599]: no method named `string` found for struct `ChildPropertiesBuilder<ChildPropertiesBuilderStep_missing_required_prop_int>` in the current scope
   --> $DIR/component-fail.rs:83:20
diff --git a/packages/yew-macro/tests/html_macro/component-pass.rs b/packages/yew-macro/tests/html_macro/component-pass.rs
index fcd87114445..e1c4f757a4d 100644
--- a/packages/yew-macro/tests/html_macro/component-pass.rs
+++ b/packages/yew-macro/tests/html_macro/component-pass.rs
@@ -165,9 +165,7 @@ fn compile_pass() {
             <Child int=1 vec={vec![1]} />
             <Child string={String::from("child")} int=1 />
 
-            <Child opt_str="child" int=1 />
             <Child opt_str=String::from("child") int=1 />
-            <Child opt_str=Some("child") int=1 />
             <Child opt_str=Some(String::from("child")) int=1 />
         </>
     };
@@ -182,7 +180,7 @@ fn compile_pass() {
             <Child int=1 />
             <Child int=1 optional_callback=Some(Callback::from(|_| ())) />
             <Child int=1 optional_callback=Callback::from(|_| ()) />
-            <Child int=1 optional_callback=None />
+            <Child int=1 optional_callback=None::<Callback<_>> />
         </>
     };
 
diff --git a/packages/yew-macro/tests/html_macro/element-fail.rs b/packages/yew-macro/tests/html_macro/element-fail.rs
index 1108c925574..aff8551f868 100644
--- a/packages/yew-macro/tests/html_macro/element-fail.rs
+++ b/packages/yew-macro/tests/html_macro/element-fail.rs
@@ -3,17 +3,26 @@ use yew::prelude::*;
 struct NotToString;
 
 fn compile_fail() {
+    // missing closing tag
     html! { <div> };
     html! { <div><div> };
-    html! { </div> };
     html! { <div><div></div> };
-    html! { <div></div><div></div> };
-    html! { <div></span> };
-    html! { <tag-a></tag-b> };
+
+    // missing opening tag
+    html! { </div> };
     html! { <div></span></div> };
     html! { <img /></img> };
+
+    // tag mismatch
+    html! { <div></span> };
+    html! { <tag-a></tag-b> };
+
+    // multiple root
+    html! { <div></div><div></div> };
+    // invalid child content
     html! { <div>Invalid</div> };
 
+    // same attribute specified multiple times (tests for attributes with special treatment)
     html! { <input attr=1 attr=2 /> };
     html! { <input value="123" value="456" /> };
     html! { <input kind="checkbox" kind="submit" /> };
@@ -21,45 +30,47 @@ fn compile_fail() {
     html! { <input disabled=true disabled=false /> };
     html! { <option selected=true selected=false /> };
     html! { <div class="first" class="second" /> };
+    html! { <input ref=() ref=() /> };
 
+    // boolean attribute type mismatch
     html! { <input checked=1 /> };
+    html! { <input checked=Some(false) /> };
     html! { <input disabled=1 /> };
+    html! { <input disabled=Some(true) /> };
     html! { <option selected=1 /> };
+
+    // normal attribute type mismatch
     html! { <input type=() /> };
     html! { <input value=() /> };
     html! { <a href=() /> };
+    html! { <input string=NotToString /> };
+    html! { <a media=Some(NotToString) /> };
+    html! { <a href=Some(5) /> };
 
+    // listener type mismatch
     html! { <input onclick=1 /> };
     html! { <input onclick=Callback::from(|a: String| ()) /> };
+    html! { <input onfocus=Some(5) /> };
 
-    html! { <input string=NotToString /> };
-
+    // NodeRef type mismatch
     html! { <input ref=() /> };
-    html! { <input ref=() ref=() /> };
+    html! { <input ref=Some(NodeRef::default()) /> };
 
+    // void element with children
     html! { <input type="text"></input> };
+    // make sure that capitalization doesn't matter for the void children check
     html! { <iNpUt type="text"></iNpUt> };
 
+    // no tag name
     html! { <@></@> };
-    html! { <@{"test"}></@{"test"}> };
-    html! { <@{55}></@> };
     html! { <@/> };
 
-    html! { <a media?="media" /> };
-    html! { <a media?=Some(NotToString) /> };
-    html! { <input disabled?=Some(true) /> };
-    html! { <input type?="kind" /> };
-    html! { <input type?=Some(NotToString) /> };
-    html! { <li value?="value" /> };
-    html! { <li value?=Some(NotToString) /> };
-    html! { <a href?=Some(5) /> };
-    html! { <a href?="href" /> };
-    html! { <a href?=Some(NotToString) /> };
-    html! { <input checked?=Some(false) /> };
-    html! { <input ref?=() /> };
-    html! { <input onfocus?=Some(5) /> };
-    html! { <input onfocus?=Callback::from(|_| ()) /> };
+    // invalid closing tag
+    html! { <@{"test"}></@{"test"}> };
+    // type mismatch
+    html! { <@{55}></@> };
 
+    // check for deprecation warning
     html! { <div class=("deprecated", "warning") /> };
 }
 
diff --git a/packages/yew-macro/tests/html_macro/element-fail.stderr b/packages/yew-macro/tests/html_macro/element-fail.stderr
index 879a819d2e4..eb4857b2a2e 100644
--- a/packages/yew-macro/tests/html_macro/element-fail.stderr
+++ b/packages/yew-macro/tests/html_macro/element-fail.stderr
@@ -1,44 +1,26 @@
 error: this opening tag has no corresponding closing tag
- --> $DIR/element-fail.rs:6:13
+ --> $DIR/element-fail.rs:7:13
   |
-6 |     html! { <div> };
+7 |     html! { <div> };
   |             ^^^^^
 
 error: this opening tag has no corresponding closing tag
- --> $DIR/element-fail.rs:7:18
+ --> $DIR/element-fail.rs:8:18
   |
-7 |     html! { <div><div> };
+8 |     html! { <div><div> };
   |                  ^^^^^
 
-error: this closing tag has no corresponding opening tag
- --> $DIR/element-fail.rs:8:13
-  |
-8 |     html! { </div> };
-  |             ^^^^^^
-
 error: this opening tag has no corresponding closing tag
  --> $DIR/element-fail.rs:9:13
   |
 9 |     html! { <div><div></div> };
   |             ^^^^^
 
-error: only one root html element is allowed (hint: you can wrap multiple html elements in a fragment `<></>`)
-  --> $DIR/element-fail.rs:10:24
-   |
-10 |     html! { <div></div><div></div> };
-   |                        ^^^^^^^^^^^
-
-error: this closing tag has no corresponding opening tag
-  --> $DIR/element-fail.rs:11:18
-   |
-11 |     html! { <div></span> };
-   |                  ^^^^^^^
-
 error: this closing tag has no corresponding opening tag
-  --> $DIR/element-fail.rs:12:20
+  --> $DIR/element-fail.rs:12:13
    |
-12 |     html! { <tag-a></tag-b> };
-   |                    ^^^^^^^^
+12 |     html! { </div> };
+   |             ^^^^^^
 
 error: this closing tag has no corresponding opening tag
   --> $DIR/element-fail.rs:13:18
@@ -52,206 +34,302 @@ error: only one root html element is allowed (hint: you can wrap multiple html e
 14 |     html! { <img /></img> };
    |                    ^^^^^^
 
+error: this closing tag has no corresponding opening tag
+  --> $DIR/element-fail.rs:17:18
+   |
+17 |     html! { <div></span> };
+   |                  ^^^^^^^
+
+error: this closing tag has no corresponding opening tag
+  --> $DIR/element-fail.rs:18:20
+   |
+18 |     html! { <tag-a></tag-b> };
+   |                    ^^^^^^^^
+
+error: only one root html element is allowed (hint: you can wrap multiple html elements in a fragment `<></>`)
+  --> $DIR/element-fail.rs:21:24
+   |
+21 |     html! { <div></div><div></div> };
+   |                        ^^^^^^^^^^^
+
 error: expected a valid html element
-  --> $DIR/element-fail.rs:15:18
+  --> $DIR/element-fail.rs:23:18
    |
-15 |     html! { <div>Invalid</div> };
+23 |     html! { <div>Invalid</div> };
    |                  ^^^^^^^
 
 error: `attr` can only be specified once but is given here again
-  --> $DIR/element-fail.rs:17:27
+  --> $DIR/element-fail.rs:26:27
    |
-17 |     html! { <input attr=1 attr=2 /> };
+26 |     html! { <input attr=1 attr=2 /> };
    |                           ^^^^
 
 error: `value` can only be specified once but is given here again
-  --> $DIR/element-fail.rs:18:32
+  --> $DIR/element-fail.rs:27:32
    |
-18 |     html! { <input value="123" value="456" /> };
+27 |     html! { <input value="123" value="456" /> };
    |                                ^^^^^
 
 error: `kind` can only be specified once but is given here again
-  --> $DIR/element-fail.rs:19:36
+  --> $DIR/element-fail.rs:28:36
    |
-19 |     html! { <input kind="checkbox" kind="submit" /> };
+28 |     html! { <input kind="checkbox" kind="submit" /> };
    |                                    ^^^^
 
 error: `checked` can only be specified once but is given here again
-  --> $DIR/element-fail.rs:20:33
+  --> $DIR/element-fail.rs:29:33
    |
-20 |     html! { <input checked=true checked=false /> };
+29 |     html! { <input checked=true checked=false /> };
    |                                 ^^^^^^^
 
 error: `disabled` can only be specified once but is given here again
-  --> $DIR/element-fail.rs:21:34
+  --> $DIR/element-fail.rs:30:34
    |
-21 |     html! { <input disabled=true disabled=false /> };
+30 |     html! { <input disabled=true disabled=false /> };
    |                                  ^^^^^^^^
 
 error: `selected` can only be specified once but is given here again
-  --> $DIR/element-fail.rs:22:35
+  --> $DIR/element-fail.rs:31:35
    |
-22 |     html! { <option selected=true selected=false /> };
+31 |     html! { <option selected=true selected=false /> };
    |                                   ^^^^^^^^
 
 error: `class` can only be specified once but is given here again
-  --> $DIR/element-fail.rs:23:32
+  --> $DIR/element-fail.rs:32:32
    |
-23 |     html! { <div class="first" class="second" /> };
+32 |     html! { <div class="first" class="second" /> };
    |                                ^^^^^
 
 error: `ref` can only be specified once
-  --> $DIR/element-fail.rs:38:20
+  --> $DIR/element-fail.rs:33:20
    |
-38 |     html! { <input ref=() ref=() /> };
+33 |     html! { <input ref=() ref=() /> };
    |                    ^^^
 
 error: the tag `<input>` is a void element and cannot have children (hint: rewrite this as `<input/>`)
-  --> $DIR/element-fail.rs:40:13
+  --> $DIR/element-fail.rs:60:13
    |
-40 |     html! { <input type="text"></input> };
+60 |     html! { <input type="text"></input> };
    |             ^^^^^^^^^^^^^^^^^^^
 
 error: the tag `<iNpUt>` is a void element and cannot have children (hint: rewrite this as `<iNpUt/>`)
-  --> $DIR/element-fail.rs:41:13
+  --> $DIR/element-fail.rs:62:13
    |
-41 |     html! { <iNpUt type="text"></iNpUt> };
+62 |     html! { <iNpUt type="text"></iNpUt> };
    |             ^^^^^^^^^^^^^^^^^^^
 
 error: this dynamic tag is missing an expression block defining its value
-  --> $DIR/element-fail.rs:43:14
+  --> $DIR/element-fail.rs:65:14
    |
-43 |     html! { <@></@> };
+65 |     html! { <@></@> };
    |              ^
 
-error: dynamic closing tags must not have a body (hint: replace it with just `</@>`)
-  --> $DIR/element-fail.rs:44:27
-   |
-44 |     html! { <@{"test"}></@{"test"}> };
-   |                           ^^^^^^^^
-
 error: this dynamic tag is missing an expression block defining its value
-  --> $DIR/element-fail.rs:46:14
+  --> $DIR/element-fail.rs:66:14
    |
-46 |     html! { <@/> };
+66 |     html! { <@/> };
    |              ^
 
-error: boolean attributes don't support being used as an optional attribute (hint: a value of false results in the attribute not being set)
-  --> $DIR/element-fail.rs:50:20
-   |
-50 |     html! { <input disabled?=Some(true) /> };
-   |                    ^^^^^^^^
-
-error: `checked` does not support being used as an optional attribute
-  --> $DIR/element-fail.rs:58:20
-   |
-58 |     html! { <input checked?=Some(false) /> };
-   |                    ^^^^^^^^^
-
-error: `ref` does not support being used as an optional attribute
-  --> $DIR/element-fail.rs:59:20
+error: dynamic closing tags must not have a body (hint: replace it with just `</@>`)
+  --> $DIR/element-fail.rs:69:27
    |
-59 |     html! { <input ref?=() /> };
-   |                    ^^^^^
+69 |     html! { <@{"test"}></@{"test"}> };
+   |                           ^^^^^^^^
 
 warning: use of deprecated function `compile_fail::deprecated_use_of_class`: the use of `(...)` with the attribute `class` is deprecated and will be removed in version 0.19. Use the `classes!` macro instead.
-  --> $DIR/element-fail.rs:63:24
+  --> $DIR/element-fail.rs:74:24
    |
-63 |     html! { <div class=("deprecated", "warning") /> };
+74 |     html! { <div class=("deprecated", "warning") /> };
    |                        ^^^^^^^^^^^^^^^^^^^^^^^^^
    |
    = note: `#[warn(deprecated)]` on by default
 
 error[E0308]: mismatched types
-  --> $DIR/element-fail.rs:25:28
+  --> $DIR/element-fail.rs:36:28
    |
-25 |     html! { <input checked=1 /> };
+36 |     html! { <input checked=1 /> };
    |                            ^ expected `bool`, found integer
 
 error[E0308]: mismatched types
-  --> $DIR/element-fail.rs:26:29
+  --> $DIR/element-fail.rs:37:28
    |
-26 |     html! { <input disabled=1 /> };
-   |                             ^ expected `bool`, found integer
+37 |     html! { <input checked=Some(false) /> };
+   |                            ^^^^^^^^^^^ expected `bool`, found enum `Option`
+   |
+   = note: expected type `bool`
+              found enum `Option<bool>`
 
 error[E0308]: mismatched types
-  --> $DIR/element-fail.rs:27:30
+  --> $DIR/element-fail.rs:38:29
    |
-27 |     html! { <option selected=1 /> };
-   |                              ^ expected `bool`, found integer
+38 |     html! { <input disabled=1 /> };
+   |                             ^ expected `bool`, found integer
 
-error[E0277]: `()` doesn't implement `std::fmt::Display`
-  --> $DIR/element-fail.rs:28:25
+error[E0308]: mismatched types
+  --> $DIR/element-fail.rs:39:29
    |
-28 |     html! { <input type=() /> };
-   |                         ^^ `()` cannot be formatted with the default formatter
+39 |     html! { <input disabled=Some(true) /> };
+   |                             ^^^^^^^^^^ expected `bool`, found enum `Option`
    |
-   = help: the trait `std::fmt::Display` is not implemented for `()`
-   = note: in format strings you may be able to use `{:?}` (or {:#?} for pretty-print) instead
-   = note: required because of the requirements on the impl of `ToString` for `()`
-   = note: required by `to_string`
+   = note: expected type `bool`
+              found enum `Option<bool>`
 
-error[E0277]: `()` doesn't implement `std::fmt::Display`
-  --> $DIR/element-fail.rs:29:26
-   |
-29 |     html! { <input value=() /> };
-   |                          ^^ `()` cannot be formatted with the default formatter
+error[E0308]: mismatched types
+  --> $DIR/element-fail.rs:40:30
    |
-   = help: the trait `std::fmt::Display` is not implemented for `()`
-   = note: in format strings you may be able to use `{:?}` (or {:#?} for pretty-print) instead
-   = note: required because of the requirements on the impl of `ToString` for `()`
-   = note: required by `to_string`
+40 |     html! { <option selected=1 /> };
+   |                              ^ expected `bool`, found integer
 
-error[E0277]: `()` doesn't implement `std::fmt::Display`
-  --> $DIR/element-fail.rs:30:21
+error[E0277]: the trait bound `(): IntoPropValue<Option<Cow<'static, str>>>` is not satisfied
+  --> $DIR/element-fail.rs:43:25
    |
-30 |     html! { <a href=() /> };
-   |                     ^^ `()` cannot be formatted with the default formatter
+43 |     html! { <input type=() /> };
+   |                         ^^ the trait `IntoPropValue<Option<Cow<'static, str>>>` is not implemented for `()`
    |
-   = help: the trait `std::fmt::Display` is not implemented for `()`
-   = note: in format strings you may be able to use `{:?}` (or {:#?} for pretty-print) instead
-   = note: required because of the requirements on the impl of `ToString` for `()`
-   = note: required by `to_string`
+   = note: required because of the requirements on the impl of `IntoOptPropValue<Cow<'static, str>>` for `()`
 
-error[E0308]: mismatched types
-  --> $DIR/element-fail.rs:32:28
+error[E0277]: the trait bound `(): IntoPropValue<Option<Cow<'static, str>>>` is not satisfied
+  --> $DIR/element-fail.rs:44:26
    |
-32 |     html! { <input onclick=1 /> };
-   |                            ^ expected enum `yew::Callback`, found integer
+44 |     html! { <input value=() /> };
+   |                          ^^ the trait `IntoPropValue<Option<Cow<'static, str>>>` is not implemented for `()`
    |
-   = note: expected enum `yew::Callback<MouseEvent>`
-              found type `{integer}`
+   = note: required because of the requirements on the impl of `IntoOptPropValue<Cow<'static, str>>` for `()`
 
-error[E0308]: mismatched types
-  --> $DIR/element-fail.rs:33:28
-   |
-33 |     html! { <input onclick=Callback::from(|a: String| ()) /> };
-   |                            ^^^^^^^^ expected struct `MouseEvent`, found struct `String`
-   |
-   = note: expected enum `yew::Callback<MouseEvent>`
-              found enum `yew::Callback<String>`
+error[E0277]: the trait bound `(): IntoPropValue<Option<Cow<'static, str>>>` is not satisfied
+  --> $DIR/element-fail.rs:45:21
+   |
+45 |     html! { <a href=() /> };
+   |                     ^^ the trait `IntoPropValue<Option<Cow<'static, str>>>` is not implemented for `()`
+   |
+  ::: $WORKSPACE/packages/yew/src/virtual_dom/mod.rs
+   |
+   |     pub fn new(key: &'static str, value: impl IntoOptPropValue<AttrValue>) -> Self {
+   |                                               --------------------------- required by this bound in `PositionalAttr::new`
+   |
+   = note: required because of the requirements on the impl of `IntoOptPropValue<Cow<'static, str>>` for `()`
+
+error[E0277]: the trait bound `NotToString: IntoPropValue<Option<Cow<'static, str>>>` is not satisfied
+  --> $DIR/element-fail.rs:46:27
+   |
+46 |     html! { <input string=NotToString /> };
+   |                           ^^^^^^^^^^^ the trait `IntoPropValue<Option<Cow<'static, str>>>` is not implemented for `NotToString`
+   |
+  ::: $WORKSPACE/packages/yew/src/virtual_dom/mod.rs
+   |
+   |     pub fn new(key: &'static str, value: impl IntoOptPropValue<AttrValue>) -> Self {
+   |                                               --------------------------- required by this bound in `PositionalAttr::new`
+   |
+   = note: required because of the requirements on the impl of `IntoOptPropValue<Cow<'static, str>>` for `NotToString`
+
+error[E0277]: the trait bound `Option<NotToString>: IntoPropValue<Option<Cow<'static, str>>>` is not satisfied
+  --> $DIR/element-fail.rs:47:22
+   |
+47 |     html! { <a media=Some(NotToString) /> };
+   |                      ^^^^^^^^^^^^^^^^^ the trait `IntoPropValue<Option<Cow<'static, str>>>` is not implemented for `Option<NotToString>`
+   |
+  ::: $WORKSPACE/packages/yew/src/virtual_dom/mod.rs
+   |
+   |     pub fn new(key: &'static str, value: impl IntoOptPropValue<AttrValue>) -> Self {
+   |                                               --------------------------- required by this bound in `PositionalAttr::new`
+   |
+   = note: required because of the requirements on the impl of `IntoOptPropValue<Cow<'static, str>>` for `Option<NotToString>`
+
+error[E0277]: the trait bound `Option<{integer}>: IntoPropValue<Option<Cow<'static, str>>>` is not satisfied
+  --> $DIR/element-fail.rs:48:21
+   |
+48 |     html! { <a href=Some(5) /> };
+   |                     ^^^^^^^ the trait `IntoPropValue<Option<Cow<'static, str>>>` is not implemented for `Option<{integer}>`
+   |
+  ::: $WORKSPACE/packages/yew/src/virtual_dom/mod.rs
+   |
+   |     pub fn new(key: &'static str, value: impl IntoOptPropValue<AttrValue>) -> Self {
+   |                                               --------------------------- required by this bound in `PositionalAttr::new`
+   |
+   = note: required because of the requirements on the impl of `IntoOptPropValue<Cow<'static, str>>` for `Option<{integer}>`
+
+error[E0277]: the trait bound `{integer}: IntoPropValue<Option<yew::Callback<MouseEvent>>>` is not satisfied
+   --> $DIR/element-fail.rs:51:28
+    |
+51  |       html! { <input onclick=1 /> };
+    |                              ^ the trait `IntoPropValue<Option<yew::Callback<MouseEvent>>>` is not implemented for `{integer}`
+    |
+   ::: $WORKSPACE/packages/yew/src/html/listener/events.rs
+    |
+    | / impl_action! {
+3   | |     onabort(name: "abort", event: Event) -> web_sys::Event => |_, event| { event }
+4   | |     onauxclick(name: "auxclick", event: MouseEvent) -> web_sys::MouseEvent => |_, event| { event }
+5   | |     onblur(name: "blur", event: FocusEvent) -> web_sys::FocusEvent => |_, event| { event }
+...   |
+99  | |     ontransitionstart(name: "transitionstart", event: TransitionEvent) -> web_sys::TransitionEvent => |_, event| { event }
+100 | | }
+    | |_- required by this bound in `yew::html::onclick::Wrapper::__macro_new`
+    |
+    = help: the following implementations were found:
+              <&'static str as IntoPropValue<Cow<'static, str>>>
+              <&'static str as IntoPropValue<String>>
+              <&T as IntoPropValue<Option<T>>>
+              <&T as IntoPropValue<T>>
+            and 4 others
+    = note: required because of the requirements on the impl of `IntoOptPropValue<yew::Callback<MouseEvent>>` for `{integer}`
+
+error[E0277]: the trait bound `yew::Callback<String>: IntoPropValue<Option<yew::Callback<MouseEvent>>>` is not satisfied
+   --> $DIR/element-fail.rs:52:28
+    |
+52  |       html! { <input onclick=Callback::from(|a: String| ()) /> };
+    |                              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ the trait `IntoPropValue<Option<yew::Callback<MouseEvent>>>` is not implemented for `yew::Callback<String>`
+    |
+   ::: $WORKSPACE/packages/yew/src/html/listener/events.rs
+    |
+    | / impl_action! {
+3   | |     onabort(name: "abort", event: Event) -> web_sys::Event => |_, event| { event }
+4   | |     onauxclick(name: "auxclick", event: MouseEvent) -> web_sys::MouseEvent => |_, event| { event }
+5   | |     onblur(name: "blur", event: FocusEvent) -> web_sys::FocusEvent => |_, event| { event }
+...   |
+99  | |     ontransitionstart(name: "transitionstart", event: TransitionEvent) -> web_sys::TransitionEvent => |_, event| { event }
+100 | | }
+    | |_- required by this bound in `yew::html::onclick::Wrapper::__macro_new`
+    |
+    = note: required because of the requirements on the impl of `IntoOptPropValue<yew::Callback<MouseEvent>>` for `yew::Callback<String>`
+
+error[E0277]: the trait bound `Option<{integer}>: IntoPropValue<Option<yew::Callback<FocusEvent>>>` is not satisfied
+   --> $DIR/element-fail.rs:53:28
+    |
+53  |       html! { <input onfocus=Some(5) /> };
+    |                              ^^^^^^^ the trait `IntoPropValue<Option<yew::Callback<FocusEvent>>>` is not implemented for `Option<{integer}>`
+    |
+   ::: $WORKSPACE/packages/yew/src/html/listener/events.rs
+    |
+    | / impl_action! {
+3   | |     onabort(name: "abort", event: Event) -> web_sys::Event => |_, event| { event }
+4   | |     onauxclick(name: "auxclick", event: MouseEvent) -> web_sys::MouseEvent => |_, event| { event }
+5   | |     onblur(name: "blur", event: FocusEvent) -> web_sys::FocusEvent => |_, event| { event }
+...   |
+99  | |     ontransitionstart(name: "transitionstart", event: TransitionEvent) -> web_sys::TransitionEvent => |_, event| { event }
+100 | | }
+    | |_- required by this bound in `yew::html::onfocus::Wrapper::__macro_new`
+    |
+    = note: required because of the requirements on the impl of `IntoOptPropValue<yew::Callback<FocusEvent>>` for `Option<{integer}>`
 
-error[E0277]: `NotToString` doesn't implement `std::fmt::Display`
-  --> $DIR/element-fail.rs:35:27
-   |
-35 |     html! { <input string=NotToString /> };
-   |                           ^^^^^^^^^^^ `NotToString` cannot be formatted with the default formatter
+error[E0308]: mismatched types
+  --> $DIR/element-fail.rs:56:24
    |
-   = help: the trait `std::fmt::Display` is not implemented for `NotToString`
-   = note: in format strings you may be able to use `{:?}` (or {:#?} for pretty-print) instead
-   = note: required because of the requirements on the impl of `ToString` for `NotToString`
-   = note: required by `to_string`
+56 |     html! { <input ref=() /> };
+   |                        ^^ expected struct `yew::NodeRef`, found `()`
 
 error[E0308]: mismatched types
-  --> $DIR/element-fail.rs:37:24
+  --> $DIR/element-fail.rs:57:24
    |
-37 |     html! { <input ref=() /> };
-   |                        ^^ expected struct `NodeRef`, found `()`
+57 |     html! { <input ref=Some(NodeRef::default()) /> };
+   |                        ^^^^^^^^^^^^^^^^^^^^^^^^ expected struct `yew::NodeRef`, found enum `Option`
+   |
+   = note: expected struct `yew::NodeRef`
+                found enum `Option<yew::NodeRef>`
 
 error[E0277]: the trait bound `Cow<'static, str>: From<{integer}>` is not satisfied
-  --> $DIR/element-fail.rs:45:15
+  --> $DIR/element-fail.rs:71:15
    |
-45 |     html! { <@{55}></@> };
+71 |     html! { <@{55}></@> };
    |               ^^^^ the trait `From<{integer}>` is not implemented for `Cow<'static, str>`
    |
    = help: the following implementations were found:
@@ -262,116 +340,3 @@ error[E0277]: the trait bound `Cow<'static, str>: From<{integer}>` is not satisf
            and 11 others
    = note: required because of the requirements on the impl of `Into<Cow<'static, str>>` for `{integer}`
    = note: required by `into`
-
-error[E0308]: mismatched types
-  --> $DIR/element-fail.rs:48:23
-   |
-48 |     html! { <a media?="media" /> };
-   |                       ^^^^^^^
-   |                       |
-   |                       expected enum `Option`, found `&str`
-   |                       help: try using a variant of the expected enum: `Some("media")`
-   |
-   = note:   expected enum `Option<_>`
-           found reference `&'static str`
-
-error[E0277]: `NotToString` doesn't implement `std::fmt::Display`
-  --> $DIR/element-fail.rs:49:23
-   |
-49 |     html! { <a media?=Some(NotToString) /> };
-   |                       ^^^^ `NotToString` cannot be formatted with the default formatter
-   |
-   = help: the trait `std::fmt::Display` is not implemented for `NotToString`
-   = note: in format strings you may be able to use `{:?}` (or {:#?} for pretty-print) instead
-   = note: required because of the requirements on the impl of `ToString` for `NotToString`
-   = note: required by `to_string`
-
-error[E0308]: mismatched types
-  --> $DIR/element-fail.rs:51:26
-   |
-51 |     html! { <input type?="kind" /> };
-   |                          ^^^^^^
-   |                          |
-   |                          expected enum `Option`, found `&str`
-   |                          help: try using a variant of the expected enum: `Some("kind")`
-   |
-   = note:   expected enum `Option<_>`
-           found reference `&'static str`
-
-error[E0277]: `NotToString` doesn't implement `std::fmt::Display`
-  --> $DIR/element-fail.rs:52:26
-   |
-52 |     html! { <input type?=Some(NotToString) /> };
-   |                          ^^^^ `NotToString` cannot be formatted with the default formatter
-   |
-   = help: the trait `std::fmt::Display` is not implemented for `NotToString`
-   = note: in format strings you may be able to use `{:?}` (or {:#?} for pretty-print) instead
-   = note: required because of the requirements on the impl of `ToString` for `NotToString`
-   = note: required by `to_string`
-
-error[E0308]: mismatched types
-  --> $DIR/element-fail.rs:53:24
-   |
-53 |     html! { <li value?="value" /> };
-   |                        ^^^^^^^
-   |                        |
-   |                        expected enum `Option`, found `&str`
-   |                        help: try using a variant of the expected enum: `Some("value")`
-   |
-   = note:   expected enum `Option<_>`
-           found reference `&'static str`
-
-error[E0277]: `NotToString` doesn't implement `std::fmt::Display`
-  --> $DIR/element-fail.rs:54:24
-   |
-54 |     html! { <li value?=Some(NotToString) /> };
-   |                        ^^^^ `NotToString` cannot be formatted with the default formatter
-   |
-   = help: the trait `std::fmt::Display` is not implemented for `NotToString`
-   = note: in format strings you may be able to use `{:?}` (or {:#?} for pretty-print) instead
-   = note: required because of the requirements on the impl of `ToString` for `NotToString`
-   = note: required by `to_string`
-
-error[E0308]: mismatched types
-  --> $DIR/element-fail.rs:56:22
-   |
-56 |     html! { <a href?="href" /> };
-   |                      ^^^^^^
-   |                      |
-   |                      expected enum `Option`, found `&str`
-   |                      help: try using a variant of the expected enum: `Some("href")`
-   |
-   = note:   expected enum `Option<_>`
-           found reference `&'static str`
-
-error[E0277]: `NotToString` doesn't implement `std::fmt::Display`
-  --> $DIR/element-fail.rs:57:22
-   |
-57 |     html! { <a href?=Some(NotToString) /> };
-   |                      ^^^^ `NotToString` cannot be formatted with the default formatter
-   |
-   = help: the trait `std::fmt::Display` is not implemented for `NotToString`
-   = note: in format strings you may be able to use `{:?}` (or {:#?} for pretty-print) instead
-   = note: required because of the requirements on the impl of `ToString` for `NotToString`
-   = note: required by `to_string`
-
-error[E0308]: mismatched types
-  --> $DIR/element-fail.rs:60:20
-   |
-60 |     html! { <input onfocus?=Some(5) /> };
-   |                    ^^^^^^^ expected enum `yew::Callback`, found integer
-   |
-   = note: expected enum `yew::Callback<FocusEvent>`
-              found type `{integer}`
-
-error[E0308]: mismatched types
-  --> $DIR/element-fail.rs:61:29
-   |
-61 |     html! { <input onfocus?=Callback::from(|_| ()) /> };
-   |                             ^^^^^^^^^^^^^^^^^^^^^^
-   |                             |
-   |                             expected enum `Option`, found enum `yew::Callback`
-   |                             help: try using a variant of the expected enum: `Some(Callback::from(|_| ()))`
-   |
-   = note: expected enum `Option<_>`
-              found enum `yew::Callback<_>`
diff --git a/packages/yew-macro/tests/html_macro/element-pass.rs b/packages/yew-macro/tests/html_macro/element-pass.rs
deleted file mode 100644
index 1ef22fdb862..00000000000
--- a/packages/yew-macro/tests/html_macro/element-pass.rs
+++ /dev/null
@@ -1,41 +0,0 @@
-#![no_implicit_prelude]
-
-fn main() {
-    let onclick: ::yew::Callback<_> = ::std::convert::From::from(|_: ::yew::MouseEvent| ());
-    let parent_ref: ::yew::NodeRef = ::std::default::Default::default();
-
-    ::yew::html! {
-        <div>
-            <div data-key="abc"></div>
-            <div ref=parent_ref class="parent">
-                <span class="child" value="anything"></span>
-                <label for="first-name">{ "First Name" }</label>
-                <input type="text" id="first-name" value="placeholder" />
-                <input type="checkbox" checked=true />
-                <textarea value="write a story" />
-                <select name="status">
-                    <option selected=true disabled=false value="">{ "Selected" }</option>
-                    <option selected=false disabled=true value="">{ "Unselected" }</option>
-                </select>
-            </div>
-            <img class=::yew::classes!("avatar", "hidden") src="http://pic.com" />
-            <img class="avatar hidden" />
-            <button onclick=&onclick onclick=onclick />
-            <a href="http://google.com" />
-            <custom-tag-a>
-                <custom-tag-b />
-            </custom-tag-a>
-
-            <a href?=::std::option::Option::Some("http://google.com") media?=::std::option::Option::<&str>::None />
-            <track kind?=::std::option::Option::Some("subtitles") src?=::std::option::Option::<&str>::None />
-            <track kind?=::std::option::Option::Some(5) mixed="works" />
-            <input value?=::std::option::Option::Some("value") onblur?=::std::option::Option::Some(<::yew::Callback<_> as ::std::convert::From<_>>::from(|_| ())) />
-        </div>
-    };
-
-    let children = ::std::vec![
-        ::yew::html! { <span>{ "Hello" }</span> },
-        ::yew::html! { <span>{ "World" }</span> },
-    ];
-    ::yew::html! { <div>{ children }</div> };
-}
diff --git a/packages/yew-macro/tests/html_macro/html-element-pass.rs b/packages/yew-macro/tests/html_macro/html-element-pass.rs
new file mode 100644
index 00000000000..0c8bb5c372f
--- /dev/null
+++ b/packages/yew-macro/tests/html_macro/html-element-pass.rs
@@ -0,0 +1,81 @@
+use std::borrow::Cow;
+use yew::prelude::*;
+
+fn compile_pass() {
+    let onclick = Callback::from(|_: MouseEvent| ());
+    let parent_ref = NodeRef::default();
+
+    let dyn_tag = || String::from("test");
+    let mut extra_tags_iter = vec!["a", "b"].into_iter();
+
+    let cow_none: Option<Cow<'static, str>> = None;
+
+    html! {
+        <div>
+            <div data-key="abc"></div>
+            <div ref=parent_ref class="parent">
+                <span class="child" value="anything"></span>
+                <label for="first-name">{"First Name"}</label>
+                <input type="text" id="first-name" value="placeholder" />
+                <input type="checkbox" checked=true />
+                <textarea value="write a story" />
+                <select name="status">
+                    <option selected=true disabled=false value="">{"Selected"}</option>
+                    <option selected=false disabled=true value="">{"Unselected"}</option>
+                </select>
+            </div>
+            <svg width="149" height="147" viewBox="0 0 149 147" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M60.5776 13.8268L51.8673 42.6431L77.7475 37.331L60.5776 13.8268Z" fill="#DEB819"/>
+                <path d="M108.361 94.9937L138.708 90.686L115.342 69.8642" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+                <g filter="url(#filter0_d)">
+                    <circle cx="75.3326" cy="73.4918" r="55" fill="#FDD630"/>
+                    <circle cx="75.3326" cy="73.4918" r="52.5" stroke="black" stroke-width="5"/>
+                </g>
+                <circle cx="71" cy="99" r="5" fill="white" fill-opacity="0.75" stroke="black" stroke-width="3"/>
+                <defs>
+                    <filter id="filter0_d" x="16.3326" y="18.4918" width="118" height="118" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+                        <feGaussianBlur stdDeviation="2"/>
+                        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+                    </filter>
+                </defs>
+            </svg>
+            <img class=classes!("avatar", "hidden") src="http://pic.com" />
+            <img class="avatar hidden" />
+            <button onclick=&onclick onclick=onclick />
+            <a href="http://google.com" />
+            <custom-tag-a>
+                <custom-tag-b />
+            </custom-tag-a>
+            <@{dyn_tag()}>
+                <@{extra_tags_iter.next().unwrap()} class="extra-a"/>
+                <@{extra_tags_iter.next().unwrap()} class="extra-b"/>
+            </@>
+
+            <@{
+                let tag = dyn_tag();
+                if tag == "test" {
+                    "div"
+                } else {
+                    "a"
+                }
+            }/>
+
+            <a href=Some(Cow::Borrowed("http://google.com")) media=cow_none.clone() />
+            <track kind=Some(Cow::Borrowed("subtitles")) src=cow_none.clone() />
+            <track kind=Some(Cow::Borrowed("5")) mixed="works" />
+            <input value=Some(Cow::Borrowed("value")) onblur=Some(Callback::from(|_| ())) />
+        </div>
+    };
+
+    let children = vec![
+        html! { <span>{ "Hello" }</span> },
+        html! { <span>{ "World" }</span> },
+    ];
+    html! { <div>{children}</div> };
+
+    // handle misleading angle brackets
+    html! { <div data-val=<String as Default>::default()></div> };
+    html! { <div><a data-val=<String as Default>::default() /></div> };
+}
+
+fn main() {}
diff --git a/packages/yew-macro/tests/html_macro/html-node-pass.rs b/packages/yew-macro/tests/html_macro/html-node-pass.rs
new file mode 100644
index 00000000000..eb06fae83e7
--- /dev/null
+++ b/packages/yew-macro/tests/html_macro/html-node-pass.rs
@@ -0,0 +1,23 @@
+use yew::prelude::*;
+
+fn compile_pass() {
+    html! { "" };
+    html! { 'a' };
+    html! { "hello" };
+    html! { 42 };
+    html! { 1.234 };
+
+    html! { <span>{ "" }</span> };
+    html! { <span>{ 'a' }</span> };
+    html! { <span>{ "hello" }</span> };
+    html! { <span>{ 42 }</span> };
+    html! { <span>{ 1.234 }</span> };
+
+    html! { format!("Hello") };
+    html! { String::from("Hello") };
+
+    let msg = "Hello";
+    html! { msg };
+}
+
+fn main() {}
diff --git a/packages/yew-macro/tests/html_macro/list-fail.rs b/packages/yew-macro/tests/html_macro/list-fail.rs
index 2fa362b4fdb..dde892f87f8 100644
--- a/packages/yew-macro/tests/html_macro/list-fail.rs
+++ b/packages/yew-macro/tests/html_macro/list-fail.rs
@@ -1,20 +1,28 @@
 use yew::prelude::*;
 
 fn compile_fail() {
+    // missing closing tag
     html! { <> };
-    html! { </> };
     html! { <><> };
-    html! { </></> };
     html! { <><></> };
+
+    // missing starting tag
+    html! { </> };
+    html! { </></> };
+
+    // multiple root nodes
     html! { <></><></> };
+    // invalid child content
     html! { <>invalid</> };
+    // no key value
     html! { <key=></> };
+    // wrong closing tag
     html! { <key="key".to_string()></key> };
 
+    // multiple keys
     html! { <key="first key" key="second key" /> };
+    // invalid prop
     html! { <some_attr="test"></> };
-
-    html! { <key?=None></> };
 }
 
 fn main() {}
diff --git a/packages/yew-macro/tests/html_macro/list-fail.stderr b/packages/yew-macro/tests/html_macro/list-fail.stderr
index aa2ea6c9719..f2271f4d420 100644
--- a/packages/yew-macro/tests/html_macro/list-fail.stderr
+++ b/packages/yew-macro/tests/html_macro/list-fail.stderr
@@ -1,14 +1,8 @@
 error: this opening fragment has no corresponding closing fragment
- --> $DIR/list-fail.rs:4:13
-  |
-4 |     html! { <> };
-  |             ^^
-
-error: this closing fragment has no corresponding opening fragment
  --> $DIR/list-fail.rs:5:13
   |
-5 |     html! { </> };
-  |             ^^^
+5 |     html! { <> };
+  |             ^^
 
 error: this opening fragment has no corresponding closing fragment
  --> $DIR/list-fail.rs:6:15
@@ -16,56 +10,56 @@ error: this opening fragment has no corresponding closing fragment
 6 |     html! { <><> };
   |               ^^
 
-error: this closing fragment has no corresponding opening fragment
- --> $DIR/list-fail.rs:7:13
-  |
-7 |     html! { </></> };
-  |             ^^^
-
 error: this opening fragment has no corresponding closing fragment
- --> $DIR/list-fail.rs:8:13
+ --> $DIR/list-fail.rs:7:13
   |
-8 |     html! { <><></> };
+7 |     html! { <><></> };
   |             ^^
 
+error: this closing fragment has no corresponding opening fragment
+  --> $DIR/list-fail.rs:10:13
+   |
+10 |     html! { </> };
+   |             ^^^
+
+error: this closing fragment has no corresponding opening fragment
+  --> $DIR/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:9:18
-  |
-9 |     html! { <></><></> };
-  |                  ^^^^^
+  --> $DIR/list-fail.rs:14:18
+   |
+14 |     html! { <></><></> };
+   |                  ^^^^^
 
 error: expected a valid html element
-  --> $DIR/list-fail.rs:10:15
+  --> $DIR/list-fail.rs:16:15
    |
-10 |     html! { <>invalid</> };
+16 |     html! { <>invalid</> };
    |               ^^^^^^^
 
 error: expected an expression following this equals sign
-  --> $DIR/list-fail.rs:11:17
+  --> $DIR/list-fail.rs:18:17
    |
-11 |     html! { <key=></> };
+18 |     html! { <key=></> };
    |                 ^^
 
 error: this closing tag has no corresponding opening tag
-  --> $DIR/list-fail.rs:12:36
+  --> $DIR/list-fail.rs:20:36
    |
-12 |     html! { <key="key".to_string()></key> };
+20 |     html! { <key="key".to_string()></key> };
    |                                    ^^^^^^
 
 error: only a single `key` prop is allowed on a fragment
-  --> $DIR/list-fail.rs:14:30
+  --> $DIR/list-fail.rs:23:30
    |
-14 |     html! { <key="first key" key="second key" /> };
+23 |     html! { <key="first key" key="second key" /> };
    |                              ^^^
 
 error: fragments only accept the `key` prop
-  --> $DIR/list-fail.rs:15:14
+  --> $DIR/list-fail.rs:25:14
    |
-15 |     html! { <some_attr="test"></> };
+25 |     html! { <some_attr="test"></> };
    |              ^^^^^^^^^
-
-error: `key` does not support being used as an optional attribute
-  --> $DIR/list-fail.rs:17:14
-   |
-17 |     html! { <key?=None></> };
-   |              ^^^^^
diff --git a/packages/yew-macro/tests/html_macro/node-pass.rs b/packages/yew-macro/tests/html_macro/node-pass.rs
index 7f8f8fad740..cffe7db6f7e 100644
--- a/packages/yew-macro/tests/html_macro/node-pass.rs
+++ b/packages/yew-macro/tests/html_macro/node-pass.rs
@@ -4,16 +4,16 @@ fn main() {
     ::yew::html! { "" };
     ::yew::html! { 'a' };
     ::yew::html! { "hello" };
-    ::yew::html! { 42 };
-    ::yew::html! { 1.234 };
-    ::yew::html! { true };
+    ::yew::html! { "42" };
+    ::yew::html! { "1.234" };
+    ::yew::html! { "true" };
 
     ::yew::html! { <span>{ "" }</span> };
     ::yew::html! { <span>{ 'a' }</span> };
     ::yew::html! { <span>{ "hello" }</span> };
-    ::yew::html! { <span>{ 42 }</span> };
-    ::yew::html! { <span>{ 1.234 }</span> };
-    ::yew::html! { <span>{ true }</span> };
+    ::yew::html! { <span>{ "42" }</span> };
+    ::yew::html! { <span>{ "1.234" }</span> };
+    ::yew::html! { <span>{ "true" }</span> };
 
     ::yew::html! { ::std::format!("Hello") };
     ::yew::html! { ::std::string::ToString::to_string("Hello") };
diff --git a/packages/yew/src/agent/link.rs b/packages/yew/src/agent/link.rs
index cc365208a80..b9188c5373b 100644
--- a/packages/yew/src/agent/link.rs
+++ b/packages/yew/src/agent/link.rs
@@ -1,5 +1,6 @@
 use super::*;
 use crate::callback::Callback;
+use crate::html::ImplicitClone;
 use crate::scheduler::{scheduler, Runnable, Shared};
 use std::cell::RefCell;
 use std::fmt;
@@ -123,6 +124,8 @@ impl<AGN: Agent> Default for AgentScope<AGN> {
     }
 }
 
+impl<AGN: Agent> ImplicitClone for AgentScope<AGN> {}
+
 struct AgentState<AGN> {
     agent: Option<AGN>,
     // TODO(#939): Use agent field to control create message this flag
diff --git a/packages/yew/src/callback.rs b/packages/yew/src/callback.rs
index 75e306b2340..aa28cb59873 100644
--- a/packages/yew/src/callback.rs
+++ b/packages/yew/src/callback.rs
@@ -4,6 +4,7 @@
 //! - [Counter](https://github.com/yewstack/yew/tree/master/examples/counter)
 //! - [Timer](https://github.com/yewstack/yew/tree/master/examples/timer)
 
+use crate::html::ImplicitClone;
 use std::cell::RefCell;
 use std::fmt;
 use std::rc::Rc;
@@ -115,3 +116,5 @@ impl<IN: 'static> Callback<IN> {
         Callback::from(func)
     }
 }
+
+impl<T> ImplicitClone for Callback<T> {}
diff --git a/packages/yew/src/html/classes.rs b/packages/yew/src/html/classes.rs
index 7a706541f02..5af9aee39e0 100644
--- a/packages/yew/src/html/classes.rs
+++ b/packages/yew/src/html/classes.rs
@@ -1,3 +1,5 @@
+use super::{IntoOptPropValue, IntoPropValue};
+use crate::virtual_dom::AttrValue;
 use indexmap::IndexSet;
 use std::{
     borrow::{Borrow, Cow},
@@ -62,6 +64,26 @@ impl Classes {
     }
 }
 
+impl IntoPropValue<AttrValue> for Classes {
+    fn into_prop_value(mut self) -> AttrValue {
+        if self.set.len() == 1 {
+            self.set.pop().unwrap()
+        } else {
+            Cow::Owned(self.to_string())
+        }
+    }
+}
+
+impl IntoOptPropValue<AttrValue> for Classes {
+    fn into_opt_prop_value(self) -> Option<AttrValue> {
+        if self.is_empty() {
+            None
+        } else {
+            Some(self.into_prop_value())
+        }
+    }
+}
+
 impl<T: Into<Classes>> Extend<T> for Classes {
     fn extend<I: IntoIterator<Item = T>>(&mut self, iter: I) {
         let classes = iter
diff --git a/packages/yew/src/html/component/lifecycle.rs b/packages/yew/src/html/component/lifecycle.rs
index 1ac13fe6b27..0631956112c 100644
--- a/packages/yew/src/html/component/lifecycle.rs
+++ b/packages/yew/src/html/component/lifecycle.rs
@@ -248,6 +248,7 @@ mod tests {
     #[derive(Clone, Properties, Default)]
     struct Props {
         lifecycle: Rc<RefCell<Vec<String>>>,
+        #[cfg(feature = "wasm_test")]
         create_message: Option<bool>,
         update_message: RefCell<Option<bool>>,
         view_message: RefCell<Option<bool>>,
@@ -265,6 +266,7 @@ mod tests {
 
         fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
             props.lifecycle.borrow_mut().push("create".into());
+            #[cfg(feature = "wasm_test")]
             if let Some(msg) = props.create_message {
                 link.send_message(msg);
             }
@@ -344,6 +346,7 @@ mod tests {
         test_lifecycle(
             Props {
                 lifecycle: lifecycle.clone(),
+                #[cfg(feature = "wasm_test")]
                 create_message: Some(false),
                 ..Props::default()
             },
@@ -423,6 +426,7 @@ mod tests {
         test_lifecycle(
             Props {
                 lifecycle,
+                #[cfg(feature = "wasm_test")]
                 create_message: Some(true),
                 update_message: RefCell::new(Some(true)),
                 ..Props::default()
diff --git a/packages/yew/src/html/conversion.rs b/packages/yew/src/html/conversion.rs
new file mode 100644
index 00000000000..6a6a36cd57b
--- /dev/null
+++ b/packages/yew/src/html/conversion.rs
@@ -0,0 +1,89 @@
+use super::{Component, NodeRef, Scope};
+use std::{borrow::Cow, rc::Rc};
+
+/// Marker trait for types that the [`html!`] macro may clone implicitly.
+pub trait ImplicitClone: Clone {}
+
+// this is only implemented because there's no way to avoid cloning this value
+impl ImplicitClone for Cow<'static, str> {}
+
+impl<T: ImplicitClone> ImplicitClone for Option<T> {}
+impl<T> ImplicitClone for Rc<T> {}
+
+impl ImplicitClone for NodeRef {}
+impl<Comp: Component> ImplicitClone for Scope<Comp> {}
+// TODO there are still a few missing like AgentScope
+
+/// A trait similar to `Into<T>` which allows conversion to a value of a `Properties` struct.
+pub trait IntoPropValue<T> {
+    /// Convert `self` to a value of a `Properties` struct.
+    fn into_prop_value(self) -> T;
+}
+
+impl<T> IntoPropValue<T> for T {
+    fn into_prop_value(self) -> T {
+        self
+    }
+}
+impl<T> IntoPropValue<T> for &T
+where
+    T: ImplicitClone,
+{
+    fn into_prop_value(self) -> T {
+        self.clone()
+    }
+}
+
+impl<T> IntoPropValue<Option<T>> for T {
+    fn into_prop_value(self) -> Option<T> {
+        Some(self)
+    }
+}
+impl<T> IntoPropValue<Option<T>> for &T
+where
+    T: ImplicitClone,
+{
+    fn into_prop_value(self) -> Option<T> {
+        Some(self.clone())
+    }
+}
+
+macro_rules! impl_into_prop {
+    (|$value:ident: $from_ty:ty| -> $to_ty:ty { $conversion:expr }) => {
+        // implement V -> T
+        impl IntoPropValue<$to_ty> for $from_ty {
+            fn into_prop_value(self) -> $to_ty {
+                let $value = self;
+                $conversion
+            }
+        }
+        // implement V -> Option<T>
+        impl IntoOptPropValue<$to_ty> for $from_ty {
+            fn into_opt_prop_value(self) -> Option<$to_ty> {
+                let $value = self;
+                Some({ $conversion })
+            }
+        }
+    };
+}
+
+// implemented with literals in mind
+impl_into_prop!(|value: &'static str| -> String { value.to_owned() });
+
+impl_into_prop!(|value: &'static str| -> Cow<'static, str> { Cow::Borrowed(value) });
+impl_into_prop!(|value: String| -> Cow<'static, str> { Cow::Owned(value) });
+
+/// A trait similar to `Into<Option<T>>` which allows conversion to an optional value of a
+/// `Properties` struct.
+pub trait IntoOptPropValue<T> {
+    /// Convert `self` to an optional value of a `Properties` struct.
+    fn into_opt_prop_value(self) -> Option<T>;
+}
+impl<T, V> IntoOptPropValue<V> for T
+where
+    T: IntoPropValue<Option<V>>,
+{
+    fn into_opt_prop_value(self) -> Option<V> {
+        self.into_prop_value()
+    }
+}
diff --git a/packages/yew/src/html/listener/macros.rs b/packages/yew/src/html/listener/macros.rs
index 786e4ed1599..c60dff05889 100644
--- a/packages/yew/src/html/listener/macros.rs
+++ b/packages/yew/src/html/listener/macros.rs
@@ -6,11 +6,12 @@ macro_rules! impl_action {
         pub mod $action {
             use crate::callback::Callback;
             #[allow(unused_imports)]
-            use crate::html::listener::*;
+            use crate::html::{listener::*, IntoOptPropValue};
             use crate::virtual_dom::Listener;
             use gloo::events::{EventListener, EventListenerOptions};
             use wasm_bindgen::JsValue;
             use web_sys::{$type as WebSysType, Element, EventTarget};
+            use std::rc::Rc;
 
             /// A wrapper for a callback which attaches event listeners to elements.
             #[derive(Clone, Debug)]
@@ -23,6 +24,12 @@ macro_rules! impl_action {
                 pub fn new(callback: Callback<Event>) -> Self {
                     Wrapper { callback }
                 }
+
+                #[doc(hidden)]
+                pub fn __macro_new(callback: impl IntoOptPropValue<Callback<Event>>) -> Option<Rc<dyn Listener>> {
+                    let callback = callback.into_opt_prop_value()?;
+                    Some(Rc::new(Self::new(callback)))
+                }
             }
 
             /// And event type which keeps the returned type.
diff --git a/packages/yew/src/html/mod.rs b/packages/yew/src/html/mod.rs
index 582792afa0c..6e761a2f959 100644
--- a/packages/yew/src/html/mod.rs
+++ b/packages/yew/src/html/mod.rs
@@ -2,10 +2,12 @@
 
 mod classes;
 mod component;
+mod conversion;
 mod listener;
 
 pub use classes::*;
 pub use component::*;
+pub use conversion::*;
 pub use listener::*;
 
 use crate::virtual_dom::VNode;
diff --git a/packages/yew/src/virtual_dom/key.rs b/packages/yew/src/virtual_dom/key.rs
index 0ee46cb64bd..0ca1c839af0 100644
--- a/packages/yew/src/virtual_dom/key.rs
+++ b/packages/yew/src/virtual_dom/key.rs
@@ -1,5 +1,6 @@
 //! This module contains the implementation yew's virtual nodes' keys.
 
+use crate::html::ImplicitClone;
 use std::fmt::{self, Display, Formatter};
 use std::ops::Deref;
 use std::rc::Rc;
@@ -39,6 +40,8 @@ impl From<&'_ str> for Key {
     }
 }
 
+impl ImplicitClone for Key {}
+
 macro_rules! key_impl_from_to_string {
     ($type:ty) => {
         impl From<$type> for Key {
@@ -50,7 +53,6 @@ macro_rules! key_impl_from_to_string {
 }
 
 key_impl_from_to_string!(String);
-key_impl_from_to_string!(Rc<String>);
 key_impl_from_to_string!(char);
 key_impl_from_to_string!(u8);
 key_impl_from_to_string!(u16);
@@ -81,7 +83,6 @@ mod test {
         html! {
             <key="string literal">
                 <img key="String".to_owned() />
-                <p key=Rc::new("rc".to_owned())></p>
                 <p key=Rc::<str>::from("rc")></p>
                 <key='a'>
                     <p key=11_usize></p>
@@ -90,6 +91,7 @@ mod test {
                     <p key=14_u32></p>
                     <p key=15_u64></p>
                     <p key=15_u128></p>
+                    <p key=21_isize></p>
                     <p key=22_i8></p>
                     <p key=23_i16></p>
                     <p key=24_i32></p>
diff --git a/packages/yew/src/virtual_dom/mod.rs b/packages/yew/src/virtual_dom/mod.rs
index eb5ffead223..fd02774af36 100644
--- a/packages/yew/src/virtual_dom/mod.rs
+++ b/packages/yew/src/virtual_dom/mod.rs
@@ -13,7 +13,7 @@ pub mod vtag;
 #[doc(hidden)]
 pub mod vtext;
 
-use crate::html::{AnyScope, NodeRef};
+use crate::html::{AnyScope, IntoOptPropValue, NodeRef};
 use gloo::events::EventListener;
 use indexmap::IndexMap;
 use std::{borrow::Cow, collections::HashMap, fmt, hint::unreachable_unchecked, iter, mem, rc::Rc};
@@ -50,25 +50,40 @@ impl fmt::Debug for dyn Listener {
 /// A list of event listeners.
 type Listeners = Vec<Rc<dyn Listener>>;
 
+/// Attribute value
+pub type AttrValue = Cow<'static, str>;
+
 /// Key-value tuple which makes up an item of the [`Attributes::Vec`] variant.
 #[derive(Clone, Debug, Eq, PartialEq)]
-pub struct PositionalAttr(pub &'static str, pub Option<Cow<'static, str>>);
+pub struct PositionalAttr(pub &'static str, pub Option<AttrValue>);
 impl PositionalAttr {
     /// Create a positional attribute
-    pub fn new(key: &'static str, value: impl Into<Cow<'static, str>>) -> Self {
-        Self(key, Some(value.into()))
+    pub fn new(key: &'static str, value: impl IntoOptPropValue<AttrValue>) -> Self {
+        Self(key, value.into_opt_prop_value())
+    }
+
+    /// Create a boolean attribute.
+    /// `present` controls whether the attribute is added
+    pub fn new_boolean(key: &'static str, present: bool) -> Self {
+        let value = if present {
+            Some(Cow::Borrowed(key))
+        } else {
+            None
+        };
+        Self::new(key, value)
     }
+
     /// Create a placeholder for removed attributes
     pub fn new_placeholder(key: &'static str) -> Self {
         Self(key, None)
     }
 
-    fn transpose(self) -> Option<(&'static str, Cow<'static, str>)> {
+    fn transpose(self) -> Option<(&'static str, AttrValue)> {
         let Self(key, value) = self;
         value.map(|v| (key, v))
     }
 
-    fn transposed<'a>(&'a self) -> Option<(&'static str, &'a Cow<'static, str>)> {
+    fn transposed<'a>(&'a self) -> Option<(&'static str, &'a AttrValue)> {
         let Self(key, value) = self;
         value.as_ref().map(|v| (*key, v))
     }
@@ -83,12 +98,12 @@ pub enum Attributes {
 
     /// IndexMap is used to provide runtime attribute deduplication in cases where the html! macro
     /// was not used to guarantee it.
-    IndexMap(IndexMap<&'static str, Cow<'static, str>>),
+    IndexMap(IndexMap<&'static str, AttrValue>),
 }
 impl Attributes {
     /// Construct a default Attributes instance
     pub fn new() -> Self {
-        Default::default()
+        Self::default()
     }
 
     /// Return iterator over attribute key-value pairs
@@ -105,7 +120,7 @@ impl Attributes {
 
     /// 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<&'static str, Cow<'static, str>> {
+    pub fn get_mut_index_map(&mut self) -> &mut IndexMap<&'static str, AttrValue> {
         match self {
             Self::IndexMap(m) => m,
             Self::Vec(v) => {
@@ -290,8 +305,8 @@ impl From<Vec<PositionalAttr>> for Attributes {
         Self::Vec(v)
     }
 }
-impl From<IndexMap<&'static str, Cow<'static, str>>> for Attributes {
-    fn from(v: IndexMap<&'static str, Cow<'static, str>>) -> Self {
+impl From<IndexMap<&'static str, AttrValue>> for Attributes {
+    fn from(v: IndexMap<&'static str, AttrValue>) -> Self {
         Self::IndexMap(v)
     }
 }
@@ -362,12 +377,6 @@ pub(crate) fn insert_node(node: &Node, parent: &Element, next_sibling: Option<No
     };
 }
 
-/// Transform properties to the expected type.
-pub trait Transformer<FROM, TO> {
-    /// Transforms one type to another.
-    fn transform(from: FROM) -> TO;
-}
-
 #[cfg(test)]
 mod layout_tests {
     use super::*;
diff --git a/packages/yew/src/virtual_dom/vcomp.rs b/packages/yew/src/virtual_dom/vcomp.rs
index c72346108b9..e49f417c462 100644
--- a/packages/yew/src/virtual_dom/vcomp.rs
+++ b/packages/yew/src/virtual_dom/vcomp.rs
@@ -1,6 +1,6 @@
 //! This module contains the implementation of a virtual component (`VComp`).
 
-use super::{Key, Transformer, VDiff, VNode};
+use super::{Key, VDiff, VNode};
 use crate::html::{AnyScope, Component, NodeRef, Scope, Scoped};
 use std::any::TypeId;
 use std::borrow::Borrow;
@@ -194,54 +194,6 @@ impl VDiff for VComp {
     }
 }
 
-impl<T> Transformer<T, T> for VComp {
-    fn transform(from: T) -> T {
-        from
-    }
-}
-
-impl<'a, T> Transformer<&'a T, T> for VComp
-where
-    T: Clone,
-{
-    fn transform(from: &'a T) -> T {
-        from.clone()
-    }
-}
-
-impl<'a> Transformer<&'a str, String> for VComp {
-    fn transform(from: &'a str) -> String {
-        from.to_owned()
-    }
-}
-
-impl<T> Transformer<T, Option<T>> for VComp {
-    fn transform(from: T) -> Option<T> {
-        Some(from)
-    }
-}
-
-impl<'a, T> Transformer<&'a T, Option<T>> for VComp
-where
-    T: Clone,
-{
-    fn transform(from: &T) -> Option<T> {
-        Some(from.clone())
-    }
-}
-
-impl<'a> Transformer<&'a str, Option<String>> for VComp {
-    fn transform(from: &'a str) -> Option<String> {
-        Some(from.to_owned())
-    }
-}
-
-impl<'a> Transformer<Option<&'a str>, Option<String>> for VComp {
-    fn transform(from: Option<&'a str>) -> Option<String> {
-        from.map(|s| s.to_owned())
-    }
-}
-
 impl PartialEq for VComp {
     fn eq(&self, other: &VComp) -> bool {
         self.type_id == other.type_id
diff --git a/packages/yew/src/virtual_dom/vtag.rs b/packages/yew/src/virtual_dom/vtag.rs
index df18c852853..61694f8c325 100644
--- a/packages/yew/src/virtual_dom/vtag.rs
+++ b/packages/yew/src/virtual_dom/vtag.rs
@@ -1,9 +1,9 @@
 //! This module contains the implementation of a virtual element node `VTag`.
 
 use super::{
-    Attributes, Key, Listener, Listeners, Patch, PositionalAttr, Transformer, VDiff, VList, VNode,
+    AttrValue, Attributes, Key, Listener, Listeners, Patch, PositionalAttr, VDiff, VList, VNode,
 };
-use crate::html::{AnyScope, NodeRef};
+use crate::html::{AnyScope, IntoOptPropValue, IntoPropValue, NodeRef};
 use crate::utils::document;
 use gloo::events::EventListener;
 use log::warn;
@@ -62,11 +62,11 @@ pub struct VTag {
     pub children: VList,
     /// Contains a value of an
     /// [InputElement](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input).
-    pub value: Option<String>,
+    pub value: Option<AttrValue>,
     /// Contains
     /// [kind](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types)
     /// value of an `InputElement`.
-    pub kind: Option<Cow<'static, str>>,
+    pub kind: Option<AttrValue>,
     /// Represents `checked` attribute of
     /// [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-checked).
     /// It exists to override standard behavior of `checked` attribute, because
@@ -103,56 +103,23 @@ impl Clone for VTag {
 impl VTag {
     /// Creates a new `VTag` instance with `tag` name (cannot be changed later in DOM).
     pub fn new(tag: impl Into<Cow<'static, str>>) -> Self {
-        Self::__new_complete(
-            tag,
-            Default::default(),
-            Default::default(),
-            None,
-            None,
-            Default::default(),
-            Default::default(),
-            Default::default(),
-            Default::default(),
-        )
-    }
-
-    /// Creates a new `VTag` instance with `tag` name (cannot be changed later in DOM).
-    ///
-    /// Unlike `new()`, this sets all the public fields of `VTag` in one call. This allows the
-    /// compiler to inline property and child list construction in the html! macro. This enables
-    /// higher instruction parallelism by reducing data dependency and avoids `memcpy` of Vtag
-    /// fields amd child `VTag`s.
-    #[doc(hidden)]
-    #[allow(clippy::too_many_arguments)]
-    pub fn __new_complete(
-        tag: impl Into<Cow<'static, str>>,
-        node_ref: NodeRef,
-        key: Option<Key>,
-        value: Option<String>,
-        kind: Option<Cow<'static, str>>,
-        checked: bool,
-        // at bottom for more readable macro-expanded coded
-        attributes: Attributes,
-        listeners: Listeners,
-        children: VList,
-    ) -> Self {
-        let tag: Cow<'static, str> = tag.into();
+        let tag = tag.into();
         let element_type = ElementType::from_tag(&tag);
         VTag {
             tag,
             element_type,
             reference: None,
-            attributes,
-            listeners,
+            attributes: Attributes::new(),
+            listeners: Vec::new(),
             captured: Vec::new(),
-            children,
-            node_ref,
-            key,
-            value,
-            kind,
+            children: VList::new(),
+            node_ref: NodeRef::default(),
+            key: None,
+            value: None,
+            kind: None,
             // In HTML node `checked` attribute sets `defaultChecked` parameter,
             // but we use own field to control real `checked` parameter
-            checked,
+            checked: false,
         }
     }
 
@@ -173,15 +140,20 @@ impl VTag {
 
     /// Sets `value` for an
     /// [InputElement](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input).
-    pub fn set_value<T: ToString>(&mut self, value: &T) {
-        self.value = Some(value.to_string());
+    pub fn set_value(&mut self, value: impl IntoOptPropValue<AttrValue>) {
+        self.value = value.into_opt_prop_value();
     }
 
     /// Sets `kind` property of an
     /// [InputElement](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input).
     /// Same as set `type` attribute.
-    pub fn set_kind(&mut self, value: impl Into<Cow<'static, str>>) {
-        self.kind = Some(value.into());
+    pub fn set_kind(&mut self, value: impl IntoOptPropValue<AttrValue>) {
+        self.kind = value.into_opt_prop_value();
+    }
+
+    #[doc(hidden)]
+    pub fn __macro_set_key(&mut self, value: impl Into<Key>) {
+        self.key = Some(value.into())
     }
 
     /// Sets `checked` property of an
@@ -191,35 +163,16 @@ impl VTag {
         self.checked = value;
     }
 
-    /// Pushes a key-value pair to the attributes without ensuring uniqueness.
-    ///
-    /// Adding multiple attributes with the same key will cause unexpected behaviour
-    /// if the variant is `Attributes::Vec`.
-    #[doc(hidden)]
-    pub fn __macro_push_attribute(&mut self, key: &'static str, value: Cow<'static, str>) {
-        match &mut self.attributes {
-            Attributes::Vec(v) => v.push(PositionalAttr::new(key, value)),
-            Attributes::IndexMap(m) => {
-                m.insert(key, value);
-            }
-        }
-    }
-
-    /// Pushes a placeholder to the attributes to preserve alignment.
-    /// This is only required for the `Attributes::Vec` variant.
     #[doc(hidden)]
-    pub fn __macro_push_attribute_placeholder(&mut self, key: &'static str) {
-        // only the `Vec` variant needs placeholders
-        if let Attributes::Vec(v) = &mut self.attributes {
-            v.push(PositionalAttr::new_placeholder(key));
-        }
+    pub fn __macro_set_node_ref(&mut self, value: impl IntoPropValue<NodeRef>) {
+        self.node_ref = value.into_prop_value()
     }
 
     /// Adds a key-value pair to attributes
     ///
     /// Not every attribute works when it set as an attribute. We use workarounds for:
     /// `type/kind`, `value` and `checked`.
-    pub fn add_attribute(&mut self, key: &'static str, value: impl Into<Cow<'static, str>>) {
+    pub fn add_attribute(&mut self, key: &'static str, value: impl Into<AttrValue>) {
         self.attributes
             .get_mut_index_map()
             .insert(key, value.into());
@@ -233,6 +186,14 @@ impl VTag {
         self.attributes = attrs.into();
     }
 
+    #[doc(hidden)]
+    pub fn __macro_push_attr(&mut self, attr: PositionalAttr) {
+        match &mut self.attributes {
+            Attributes::Vec(attrs) => attrs.push(attr),
+            _ => unreachable!("the macro always uses positional attributes"),
+        }
+    }
+
     /// Adds new listener to the node.
     /// It's boxed because we want to keep it in a single list.
     /// Later `Listener::attach` will attach an actual listener to a DOM node.
@@ -243,10 +204,21 @@ impl VTag {
     /// Adds new listeners to the node.
     /// They are boxed because we want to keep them in a single list.
     /// Later `Listener::attach` will attach an actual listener to a DOM node.
-    pub fn add_listeners(&mut self, listeners: Vec<Rc<dyn Listener>>) {
+    pub fn add_listeners(&mut self, listeners: Listeners) {
         self.listeners.extend(listeners);
     }
 
+    #[doc(hidden)]
+    pub fn __macro_set_listeners(
+        &mut self,
+        listeners: impl IntoIterator<Item = Option<Rc<dyn Listener>>>,
+    ) {
+        self.listeners = listeners
+            .into_iter()
+            .filter_map(std::convert::identity)
+            .collect();
+    }
+
     /// Every render it removes all listeners and attach it back later
     /// TODO(#943): Compare references of handler to do listeners update better
     fn recreate_listeners(&mut self, ancestor: &mut Option<Box<Self>>) {
@@ -273,13 +245,13 @@ impl VTag {
                 let input_el = element.dyn_ref::<InputElement>();
                 if let Some(input) = input_el {
                     let current_value = input.value();
-                    self.set_value(&current_value)
+                    self.set_value(Cow::Owned(current_value))
                 }
             } else if self.element_type == ElementType::Textarea {
                 let textarea_el = element.dyn_ref::<TextAreaElement>();
                 if let Some(tae) = textarea_el {
-                    let current_value = &tae.value();
-                    self.set_value(&current_value)
+                    let value = tae.value();
+                    self.set_value(Cow::Owned(value));
                 }
             }
         }
@@ -516,21 +488,6 @@ impl PartialEq for VTag {
     }
 }
 
-impl<T> Transformer<T, T> for VTag {
-    fn transform(from: T) -> T {
-        from
-    }
-}
-
-impl<'a, T> Transformer<&'a T, T> for VTag
-where
-    T: Clone,
-{
-    fn transform(from: &'a T) -> T {
-        from.clone()
-    }
-}
-
 #[cfg(test)]
 mod tests {
     use super::*;
@@ -780,22 +737,6 @@ mod tests {
         }
     }
 
-    #[test]
-    fn it_checks_mixed_closing_tags() {
-        let a = html! { <div> <div/>      </div> };
-        let b = html! { <div> <div></div> </div> };
-        assert_eq!(a, b);
-    }
-
-    #[test]
-    fn it_checks_misleading_gt() {
-        html! { <div data-val=<u32 as Default>::default()></div> };
-        html! { <div data-val=Box::<u32>::default()></div> };
-
-        html! { <div><a data-val=<u32 as Default>::default() /> </div> };
-        html! { <div><a data-val=Box::<u32>::default() /></div> };
-    }
-
     #[test]
     fn it_does_not_set_missing_class_name() {
         let scope = test_scope();
@@ -952,7 +893,7 @@ mod tests {
             <@{"input"} value="World"/>
         };
         let input_vtag = assert_vtag(&mut input_el);
-        assert_eq!(input_vtag.value, Some("World".to_string()));
+        assert_eq!(input_vtag.value, Some(Cow::Borrowed("World")));
         assert!(!input_vtag.attributes.iter().any(|(k, _)| k == "value"));
     }
 
diff --git a/packages/yew/src/virtual_dom/vtext.rs b/packages/yew/src/virtual_dom/vtext.rs
index badad5922d0..b33c2ef9b5f 100644
--- a/packages/yew/src/virtual_dom/vtext.rs
+++ b/packages/yew/src/virtual_dom/vtext.rs
@@ -1,10 +1,9 @@
 //! This module contains the implementation of a virtual text node `VText`.
 
-use super::{VDiff, VNode};
+use super::{AttrValue, VDiff, VNode};
 use crate::html::{AnyScope, NodeRef};
 use crate::utils::document;
 use log::warn;
-use std::borrow::Cow;
 use std::cmp::PartialEq;
 use web_sys::{Element, Text as TextNode};
 
@@ -14,14 +13,14 @@ use web_sys::{Element, Text as TextNode};
 #[derive(Clone, Debug)]
 pub struct VText {
     /// Contains a text of the node.
-    pub text: Cow<'static, str>,
+    pub text: AttrValue,
     /// A reference to the `TextNode`.
     pub reference: Option<TextNode>,
 }
 
 impl VText {
     /// Creates new virtual text node with a content.
-    pub fn new(text: impl Into<Cow<'static, str>>) -> Self {
+    pub fn new(text: impl Into<AttrValue>) -> Self {
         VText {
             text: text.into(),
             reference: None,
diff --git a/packages/yewtil/src/history.rs b/packages/yewtil/src/history.rs
index bf3abe043c9..1f37c5136fe 100644
--- a/packages/yewtil/src/history.rs
+++ b/packages/yewtil/src/history.rs
@@ -64,7 +64,7 @@ use std::ops::Deref;
 ///                 <div>
 ///                     <input
 ///                         type="text"
-///                         value=&*self.text
+///                         value=(*self.text).clone()
 ///                         oninput=self.link.callback(|data: InputData| Msg::SetText(data.value))
 ///                     />
 ///                     <button onclick=self.link.callback(|_| Msg::Reset)>{ "Reset to the oldest value" }</button>
diff --git a/website/docs/concepts/html/components.md b/website/docs/concepts/html/components.md
index 200db0037ad..07dd8125bc0 100644
--- a/website/docs/concepts/html/components.md
+++ b/website/docs/concepts/html/components.md
@@ -67,7 +67,7 @@ impl Component for Container {
 
     fn view(&self) -> Html {
        html! {
-           <div id=&self.0.id>
+           <div id=self.0.id.clone()>
                { self.0.children.clone() }
            </div>
        }
@@ -112,45 +112,6 @@ impl Component for List {
 }
 ```
 
-## Transformers
-
-Whenever you set a prop its value goes through a transformation step first.
-If the value already has the correct type, this step doesn't do anything.
-However, transformers can be useful to reduce code repetition.
-
-The following is a list of transformers you should know about:
-
-- `&T` -> `T`
-
-  Clones the reference to get an owned value.
-
-- `&str` -> `String`
-
-  Allows you to use string literals without adding `.to_owned()` at the end.
-
-- `T` -> `Option<T>`
-
-  Wraps the value in `Some`.
-
-```rust
-struct Props {
-    unique_id: Option<usize>,
-    text: String,
-}
-
-struct Model;
-impl Component for Model {
-    type Properties = Props;
-
-    // ...
-}
-
-// transformers allow you to write this:
-html! { <Model unique_id=5 text="literals are fun" /> };
-// instead of:
-html! { <Model unique_id=Some(5) text="literals are fun".to_owned() /> };
-```
-
 ## Relevant examples
 - [Boids](https://github.com/yewstack/yew/tree/master/examples/boids)
 - [Router](https://github.com/yewstack/yew/tree/master/examples/router)