diff --git a/examples/boids/src/boid.rs b/examples/boids/src/boid.rs
index f5a6fd31822..f842ab4e233 100644
--- a/examples/boids/src/boid.rs
+++ b/examples/boids/src/boid.rs
@@ -130,7 +130,7 @@ impl Boid {
             points.push_str(&format!("{:.2},{:.2} ", x, y));
         }
 
-        html! { <polygon {points} fill={color} /> }
+        html! { <@{"polygon"} {points} fill={color} /> }
     }
 }
 
diff --git a/examples/boids/src/simulation.rs b/examples/boids/src/simulation.rs
index 0e5c21c61ce..0ca08cae6ba 100644
--- a/examples/boids/src/simulation.rs
+++ b/examples/boids/src/simulation.rs
@@ -87,9 +87,9 @@ impl Component for Simulation {
         let view_box = format!("0 0 {} {}", SIZE.x, SIZE.y);
 
         html! {
-            <svg class="simulation-window" viewBox={view_box}>
+            <@{"svg"} class="simulation-window" viewBox={view_box}>
                 { for self.boids.iter().map(Boid::render) }
-            </svg>
+            </@>
         }
     }
 }
diff --git a/examples/function_memory_game/src/components/chessboard_card.rs b/examples/function_memory_game/src/components/chessboard_card.rs
index a3c2ce43b80..c53f62e7c85 100644
--- a/examples/function_memory_game/src/components/chessboard_card.rs
+++ b/examples/function_memory_game/src/components/chessboard_card.rs
@@ -42,7 +42,7 @@ pub fn ChessboardCard(props: &Props) -> Html {
 
     html! {
       <div class="chess-board-card-container">
-          <div class={classes!("card", flipped.then(|| "flipped"))} {onclick}>
+          <div class={classes!("card", flipped.then(|| "flipped"))} onclick={onclick}>
               <img class="front" src={get_link_by_cardname} alt="card" />
               <img class="back" src="public/back.png" alt="card" />
           </div>
diff --git a/examples/js_callback/src/main.rs b/examples/js_callback/src/main.rs
index b69e8cbd182..097b657dd0f 100644
--- a/examples/js_callback/src/main.rs
+++ b/examples/js_callback/src/main.rs
@@ -56,8 +56,9 @@ impl Component for App {
                         let input: HtmlTextAreaElement = e.target_unchecked_into();
                         Msg::Payload(input.value())
                     })}
-                    value={self.payload.clone()}
-                />
+                >
+                    {self.payload.clone()}
+                </textarea>
                 <button onclick={ctx.link().callback(|_| Msg::Payload(bindings::get_payload()))}>
                     { "Get the payload!" }
                 </button>
diff --git a/examples/router/src/components/pagination.rs b/examples/router/src/components/pagination.rs
index 50e940d0ae3..6568bef7804 100644
--- a/examples/router/src/components/pagination.rs
+++ b/examples/router/src/components/pagination.rs
@@ -31,7 +31,7 @@ impl Component for Pagination {
 
     fn view(&self, ctx: &Context<Self>) -> Html {
         html! {
-            <nav class="pagination is-right" role="navigation" aria-label="pagination">
+            <nav class="pagination is-right" role="navigation" aria_label="pagination">
                 { self.view_relnav_buttons(ctx.props()) }
                 <ul class="pagination-list">
                     { self.view_links(ctx.props()) }
diff --git a/examples/router/src/components/progress_delay.rs b/examples/router/src/components/progress_delay.rs
index 888887674c9..f20550a61bb 100644
--- a/examples/router/src/components/progress_delay.rs
+++ b/examples/router/src/components/progress_delay.rs
@@ -58,7 +58,7 @@ impl Component for ProgressDelay {
     fn view(&self, _ctx: &Context<Self>) -> Html {
         let value = self.value;
         html! {
-            <progress class="progress is-primary" value={value.to_string()} 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/main.rs b/examples/router/src/main.rs
index 55c424857db..026c1785abc 100644
--- a/examples/router/src/main.rs
+++ b/examples/router/src/main.rs
@@ -83,17 +83,17 @@ impl App {
         let active_class = if !navbar_active { "is-active" } else { "" };
 
         html! {
-            <nav class="navbar is-primary" role="navigation" aria-label="main navigation">
+            <nav class="navbar is-primary" aria_roledescription="navigation" aria_label="main navigation">
                 <div class="navbar-brand">
                     <h1 class="navbar-item is-size-3">{ "Yew Blog" }</h1>
 
                     <button class={classes!("navbar-burger", "burger", active_class)}
-                        aria-label="menu" aria-expanded="false"
+                        aria_label="menu" aria_expanded="false"
                         onclick={link.callback(|_| Msg::ToggleNavbar)}
                     >
-                        <span aria-hidden="true"></span>
-                        <span aria-hidden="true"></span>
-                        <span aria-hidden="true"></span>
+                        <span aria_hidden="true"></span>
+                        <span aria_hidden="true"></span>
+                        <span aria_hidden="true"></span>
                     </button>
                 </div>
                 <div class={classes!("navbar-menu", active_class)}>
diff --git a/examples/suspense/src/main.rs b/examples/suspense/src/main.rs
index 31f0a3d3591..cc5b8fe2f2c 100644
--- a/examples/suspense/src/main.rs
+++ b/examples/suspense/src/main.rs
@@ -30,7 +30,7 @@ fn app_content() -> HtmlResult {
 
     Ok(html! {
         <div class="content-area">
-            <textarea value={value.to_string()} oninput={on_text_input}></textarea>
+            <textarea oninput={on_text_input}>{value.to_string()}</textarea>
             <div class="action-area">
                 <button onclick={on_take_a_break}>{"Take a break!"}</button>
                 <div class="hint">{"You can take a break at anytime"}<br />{"and your work will be preserved."}</div>
diff --git a/packages/yew-macro/Cargo.toml b/packages/yew-macro/Cargo.toml
index 85fb249eff4..fd8d8174ab1 100644
--- a/packages/yew-macro/Cargo.toml
+++ b/packages/yew-macro/Cargo.toml
@@ -17,6 +17,7 @@ proc-macro = true
 
 [dependencies]
 boolinator = "2"
+convert_case = "0.5"
 lazy_static = "1"
 proc-macro-error = "1"
 proc-macro2 = "1"
diff --git a/packages/yew-macro/Makefile.toml b/packages/yew-macro/Makefile.toml
index c6c8f0209a6..f211deef255 100644
--- a/packages/yew-macro/Makefile.toml
+++ b/packages/yew-macro/Makefile.toml
@@ -1,6 +1,6 @@
 [tasks.test]
 clear = true
-toolchain = ""
+toolchain = "1.56"
 command = "cargo"
 # test target can be optionally specified like `cargo make test html_macro`,
 args = ["test", "${@}"]
diff --git a/packages/yew-macro/src/html_tree/html_component.rs b/packages/yew-macro/src/html_tree/html_component.rs
index 20758495f73..d4104e7995f 100644
--- a/packages/yew-macro/src/html_tree/html_component.rs
+++ b/packages/yew-macro/src/html_tree/html_component.rs
@@ -8,14 +8,14 @@ use syn::parse::{Parse, ParseStream};
 use syn::punctuated::Punctuated;
 use syn::spanned::Spanned;
 use syn::{
-    AngleBracketedGenericArguments, GenericArgument, Path, PathArguments, PathSegment, Token, Type,
-    TypePath,
+    parse_quote_spanned, AngleBracketedGenericArguments, GenericArgument, Path, PathArguments,
+    PathSegment, Token, Type, TypePath,
 };
 
 pub struct HtmlComponent {
-    ty: Type,
-    props: ComponentProps,
-    children: HtmlChildrenTree,
+    pub ty: Type,
+    pub props: ComponentProps,
+    pub children: HtmlChildrenTree,
 }
 
 impl PeekValue<()> for HtmlComponent {
@@ -26,6 +26,14 @@ impl PeekValue<()> for HtmlComponent {
     }
 }
 
+fn element_or_ty(ty: &Type) -> Type {
+    if crate::typed_vdom::element_names().contains(&&*ty.to_token_stream().to_string()) {
+        parse_quote_spanned! {ty.span()=> ::yew::virtual_dom::typings::#ty}
+    } else {
+        ty.clone()
+    }
+}
+
 impl Parse for HtmlComponent {
     fn parse(input: ParseStream) -> syn::Result<Self> {
         if HtmlComponentClose::peek(input.cursor()).is_some() {
@@ -42,7 +50,7 @@ impl Parse for HtmlComponent {
         // Return early if it's a self-closing tag
         if open.is_self_closing() {
             return Ok(HtmlComponent {
-                ty: open.ty,
+                ty: element_or_ty(&open.ty),
                 props: open.props,
                 children: HtmlChildrenTree::new(),
             });
@@ -77,7 +85,7 @@ impl Parse for HtmlComponent {
         }
 
         Ok(HtmlComponent {
-            ty: open.ty,
+            ty: element_or_ty(&open.ty),
             props: open.props,
             children,
         })
@@ -91,6 +99,23 @@ impl ToTokens for HtmlComponent {
             props,
             children,
         } = self;
+        // incredibly jank but works ¯\_(ツ)_/¯
+        let is_element = {
+            let ty_str = ty.to_token_stream().to_string();
+            let ty_str = ty_str
+                .split("::")
+                .filter_map(|it| {
+                    let trimmed = it.trim();
+                    if trimmed.is_empty() {
+                        None
+                    } else {
+                        Some(trimmed)
+                    }
+                })
+                .take(3)
+                .collect::<Vec<_>>();
+            ty_str == vec!["yew", "virtual_dom", "typings"]
+        };
 
         let props_ty = quote_spanned!(ty.span()=> <#ty as ::yew::html::IntoComponent>::Properties);
         let children_renderer = if children.is_empty() {
@@ -98,7 +123,7 @@ impl ToTokens for HtmlComponent {
         } else {
             Some(quote! { ::yew::html::ChildrenRenderer::new(#children) })
         };
-        let build_props = props.build_properties_tokens(&props_ty, children_renderer);
+        let build_props = props.build_properties_tokens(&props_ty, children_renderer, is_element);
 
         let special_props = props.special();
         let node_ref = if let Some(node_ref) = &special_props.node_ref {
diff --git a/packages/yew-macro/src/html_tree/html_dashed_name.rs b/packages/yew-macro/src/html_tree/html_dashed_name.rs
index c0e4326570a..6e32298400e 100644
--- a/packages/yew-macro/src/html_tree/html_dashed_name.rs
+++ b/packages/yew-macro/src/html_tree/html_dashed_name.rs
@@ -18,6 +18,7 @@ pub struct HtmlDashedName {
 impl HtmlDashedName {
     /// Checks if this name is equal to the provided item (which can be anything implementing
     /// `Into<String>`).
+    #[allow(dead_code)]
     pub fn eq_ignore_ascii_case<S>(&self, other: S) -> bool
     where
         S: Into<String>,
@@ -76,7 +77,7 @@ impl Parse for HtmlDashedName {
         let name = input.call(Ident::parse_any)?;
         let mut extended = Vec::new();
         while input.peek(Token![-]) {
-            extended.push((input.parse::<Token![-]>()?, input.parse::<Ident>()?));
+            extended.push((input.parse::<Token![-]>()?, Ident::parse_any(input)?));
         }
 
         Ok(HtmlDashedName { name, extended })
@@ -89,7 +90,8 @@ impl ToTokens for HtmlDashedName {
         let dashes = extended.iter().map(|(dash, _)| quote! {#dash});
         let idents = extended.iter().map(|(_, ident)| quote! {#ident});
         let extended = quote! { #(#dashes #idents)* };
-        tokens.extend(quote! { #name #extended });
+        let label = quote! { #name #extended };
+        tokens.extend(label.to_token_stream())
     }
 }
 
diff --git a/packages/yew-macro/src/html_tree/html_element.rs b/packages/yew-macro/src/html_tree/html_element.rs
index 2b96125285e..2cf24ca602f 100644
--- a/packages/yew-macro/src/html_tree/html_element.rs
+++ b/packages/yew-macro/src/html_tree/html_element.rs
@@ -272,7 +272,7 @@ impl ToTokens for HtmlElement {
             quote! { ::yew::virtual_dom::listeners::Listeners::None }
         } else {
             let listeners_it = listeners.iter().map(|Prop { label, value, .. }| {
-                let name = &label.name;
+                let name = &label.name();
                 quote! {
                     ::yew::html::#name::Wrapper::__macro_new(#value)
                 }
@@ -313,19 +313,6 @@ impl ToTokens for HtmlElement {
                             )
                         }
                     }
-                    "textarea" => {
-                        quote! {
-                            ::std::convert::Into::<::yew::virtual_dom::VNode>::into(
-                                ::yew::virtual_dom::VTag::__new_textarea(
-                                    #value,
-                                    #node_ref,
-                                    #key,
-                                    #attributes,
-                                    #listeners,
-                                ),
-                            )
-                        }
-                    }
                     _ => {
                         quote! {
                             ::std::convert::Into::<::yew::virtual_dom::VNode>::into(
@@ -387,17 +374,9 @@ impl ToTokens for HtmlElement {
                     #[allow(clippy::redundant_clone, unused_braces, clippy::let_and_return)]
                     let mut #vtag = match ::std::convert::AsRef::<::std::primitive::str>::as_ref(&#vtag_name) {
                         "input" => {
-                            ::yew::virtual_dom::VTag::__new_textarea(
-                                #value,
-                                #node_ref,
-                                #key,
-                                #attributes,
-                                #listeners,
-                            )
-                        }
-                        "textarea" => {
-                            ::yew::virtual_dom::VTag::__new_textarea(
+                            ::yew::virtual_dom::VTag::__new_input(
                                 #value,
+                                #checked,
                                 #node_ref,
                                 #key,
                                 #attributes,
@@ -449,7 +428,7 @@ impl ToTokens for HtmlElement {
     }
 }
 
-fn wrap_attr_prop(prop: &Prop) -> TokenStream {
+fn wrap_attr_prop(prop: &Prop<false>) -> TokenStream {
     let value = prop.value.optimize_literals();
     quote_spanned! {value.span()=>
         ::yew::html::IntoPropValue::<
diff --git a/packages/yew-macro/src/html_tree/html_list.rs b/packages/yew-macro/src/html_tree/html_list.rs
index 4925ebdb3b3..2e3135e417e 100644
--- a/packages/yew-macro/src/html_tree/html_list.rs
+++ b/packages/yew-macro/src/html_tree/html_list.rs
@@ -125,12 +125,12 @@ impl Parse for HtmlListProps {
         let key = if input.is_empty() {
             None
         } else {
-            let prop: Prop = input.parse()?;
+            let prop: Prop<true> = input.parse()?;
             if !input.is_empty() {
                 return Err(input.error("only a single `key` prop is allowed on a fragment"));
             }
 
-            if prop.label.to_ascii_lowercase_string() != "key" {
+            if prop.label.to_string().to_ascii_lowercase() != "key" {
                 return Err(syn::Error::new_spanned(
                     prop.label,
                     "fragments only accept the `key` prop",
diff --git a/packages/yew-macro/src/html_tree/lint/mod.rs b/packages/yew-macro/src/html_tree/lint/mod.rs
index 48ca63406df..5be975a1047 100644
--- a/packages/yew-macro/src/html_tree/lint/mod.rs
+++ b/packages/yew-macro/src/html_tree/lint/mod.rs
@@ -1,19 +1,21 @@
 //! Lints to catch possible misuse of the `html!` macro use. At the moment these are mostly focused
 //! on accessibility.
 
+use crate::html_tree::html_component::HtmlComponent;
 use proc_macro_error::emit_warning;
+use quote::ToTokens;
 use syn::spanned::Spanned;
+use syn::Type;
 
-use crate::props::{ElementProps, Prop};
+use crate::props::{ComponentProps, Prop};
 
-use super::html_element::TagName;
-use super::{html_element::HtmlElement, HtmlTree};
+use super::HtmlTree;
 
 /// Lints HTML elements to check if they are well formed. If the element is not well-formed, then
 /// use `proc-macro-error` (and the `emit_warning!` macro) to produce a warning. At present, these
 /// are only emitted on nightly.
 pub trait Lint {
-    fn lint(element: &HtmlElement);
+    fn lint(element: &HtmlComponent);
 }
 
 /// Applies all the lints to the HTML tree.
@@ -33,7 +35,7 @@ where
                 lint::<L>(child)
             }
         }
-        HtmlTree::Element(el) => L::lint(el),
+        HtmlTree::Component(el) => L::lint(el),
         _ => {}
     }
 }
@@ -42,47 +44,59 @@ where
 /// element (if that attribute can be found on the prop).
 ///
 /// Attribute names are lowercased before being compared (so pass "href" for `name` and not "HREF").
-fn get_attribute<'a>(props: &'a ElementProps, name: &str) -> Option<&'a Prop> {
+fn get_attribute<'a>(props: &'a ComponentProps, name: &str) -> Option<&'a Prop<true>> {
     props
-        .attributes
+        .props
         .iter()
-        .find(|item| item.label.eq_ignore_ascii_case(name))
+        .find(|item| item.label.to_string().eq_ignore_ascii_case(name))
+}
+
+fn get_component_name(component: &HtmlComponent) -> String {
+    match &component.ty {
+        Type::Path(type_path) => type_path
+            .path
+            .segments
+            .last()
+            .as_ref()
+            .map(|it| it.ident.to_token_stream().to_string())
+            .unwrap_or_default(),
+        _ => String::new(),
+    }
 }
 
 /// Lints to check if anchor (`<a>`) tags have valid `href` attributes defined.
 pub struct AHrefLint;
 
 impl Lint for AHrefLint {
-    fn lint(element: &HtmlElement) {
-        if let TagName::Lit(ref tag_name) = element.name {
-            if !tag_name.eq_ignore_ascii_case("a") {
-                return;
-            };
-            if let Some(prop) = get_attribute(&element.props, "href") {
-                if let syn::Expr::Lit(lit) = &prop.value {
-                    if let syn::Lit::Str(href) = &lit.lit {
-                        let href_value = href.value();
-                        match href_value.as_ref() {
-                            "#" | "javascript:void(0)" => emit_warning!(
-                                lit.span(),
-                                format!("'{}' is not a suitable value for the `href` attribute. \
-                                        Without a meaningful attribute assistive technologies \
-                                        will struggle to understand your webpage. \
-                                        https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML#onclick_events"
-                            ,href_value)),
-                            _ => {}
+    fn lint(element: &HtmlComponent) {
+        let name = &element.ty;
+        if !get_component_name(element).eq_ignore_ascii_case("a") {
+            return;
+        };
+        if let Some(prop) = get_attribute(&element.props, "href") {
+            if let syn::Expr::Lit(lit) = &prop.value {
+                if let syn::Lit::Str(href) = &lit.lit {
+                    let href_value = href.value();
+                    match href_value.as_ref() {
+                        "#" | "javascript:void(0)" => emit_warning!(
+                            lit.span(),
+                            format!("'{}' is not a suitable value for the `href` attribute. \
+                                    Without a meaningful attribute assistive technologies \
+                                    will struggle to understand your webpage. \
+                                    https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML#onclick_events"
+                        ,href_value)),
+                        _ => {}
 
-                        }
                     }
-                };
-            } else {
-                emit_warning!(
-                    quote::quote! {#tag_name}.span(),
-                    "All `<a>` elements should have a `href` attribute. This makes it possible \
-                        for assistive technologies to correctly interpret what your links point to. \
-                        https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML#more_on_links"
-                )
-            }
+                }
+            };
+        } else {
+            emit_warning!(
+                quote::quote! {#name}.span(),
+                "All `<a>` elements should have a `href` attribute. This makes it possible \
+                    for assistive technologies to correctly interpret what your links point to. \
+                    https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML#more_on_links"
+            )
         }
     }
 }
@@ -91,18 +105,17 @@ impl Lint for AHrefLint {
 pub struct ImgAltLint;
 
 impl Lint for ImgAltLint {
-    fn lint(element: &HtmlElement) {
-        if let super::html_element::TagName::Lit(ref tag_name) = element.name {
-            if !tag_name.eq_ignore_ascii_case("img") {
-                return;
-            };
-            if get_attribute(&element.props, "alt").is_none() {
-                emit_warning!(
-                    quote::quote! {#tag_name}.span(),
-                    "All `<img>` tags should have an `alt` attribute which provides a \
-                        human-readable description "
-                )
-            }
+    fn lint(element: &HtmlComponent) {
+        let name = &element.ty;
+        if !get_component_name(element).eq_ignore_ascii_case("img") {
+            return;
+        };
+        if get_attribute(&element.props, "alt").is_none() {
+            emit_warning!(
+                quote::quote! {#name}.span(),
+                "All `<img>` tags should have an `alt` attribute which provides a \
+                    human-readable description "
+            )
         }
     }
 }
diff --git a/packages/yew-macro/src/html_tree/mod.rs b/packages/yew-macro/src/html_tree/mod.rs
index ad18325da78..3166f1d4143 100644
--- a/packages/yew-macro/src/html_tree/mod.rs
+++ b/packages/yew-macro/src/html_tree/mod.rs
@@ -97,14 +97,13 @@ impl HtmlTree {
                 let ident = Ident::parse_any(&input).ok()?;
                 let ident_str = ident.to_string();
 
-                if input.peek(Token![=]) || (input.peek(Token![?]) && input.peek2(Token![=])) {
-                    Some(HtmlType::List)
-                } else if ident_str.chars().next().unwrap().is_ascii_uppercase()
-                    || input.peek(Token![::])
+                if input.peek(Token![=])
+                    || (input.peek(Token![?]) && input.peek2(Token![=]))
+                    || ident_str == "key"
                 {
-                    Some(HtmlType::Component)
+                    Some(HtmlType::List)
                 } else {
-                    Some(HtmlType::Element)
+                    Some(HtmlType::Component)
                 }
             } else {
                 None
diff --git a/packages/yew-macro/src/lib.rs b/packages/yew-macro/src/lib.rs
index b01a9595c44..8d97619d0c8 100644
--- a/packages/yew-macro/src/lib.rs
+++ b/packages/yew-macro/src/lib.rs
@@ -53,6 +53,7 @@ mod hook;
 mod html_tree;
 mod props;
 mod stringify;
+mod typed_vdom;
 
 use derive_props::DerivePropsInput;
 use function_component::{function_component_impl, FunctionComponent, FunctionComponentName};
@@ -150,3 +151,19 @@ pub fn hook(attr: TokenStream, item: TokenStream) -> proc_macro::TokenStream {
         .unwrap_or_else(|err| err.to_compile_error())
         .into()
 }
+
+/// Declares HTML element
+///
+/// Every HTML element is a component, which returns a manually constructed `VTag`.
+/// This macro is used to generate this component.
+#[proc_macro]
+pub fn generate_element(input: proc_macro::TokenStream) -> proc_macro::TokenStream {
+    let input = parse_macro_input!(input as typed_vdom::generate_element::GenerateElement);
+
+    input.to_token_stream().into()
+}
+
+#[proc_macro]
+pub fn globals(_: TokenStream) -> TokenStream {
+    TokenStream::from(typed_vdom::globals_macro::globals_impl())
+}
diff --git a/packages/yew-macro/src/props/component.rs b/packages/yew-macro/src/props/component.rs
index 7dcc97ac6a0..e4195663ee8 100644
--- a/packages/yew-macro/src/props/component.rs
+++ b/packages/yew-macro/src/props/component.rs
@@ -1,4 +1,6 @@
 use super::{Prop, Props, SpecialProps, CHILDREN_LABEL};
+use crate::props::PropLabel;
+use crate::typed_vdom::all_shared_attributes_as_string;
 use proc_macro2::{Ident, TokenStream};
 use quote::{quote, quote_spanned, ToTokens};
 use std::convert::TryFrom;
@@ -35,21 +37,28 @@ impl ToTokens for BaseExpr {
 }
 
 pub struct ComponentProps {
-    props: Props,
+    pub props: Props<true>,
     base_expr: Option<Expr>,
 }
 impl ComponentProps {
     /// Get the special props supported by both variants
-    pub fn special(&self) -> &SpecialProps {
+    pub fn special(&self) -> &SpecialProps<true> {
         &self.props.special
     }
 
     // check if the `children` prop is given explicitly
-    pub fn children(&self) -> Option<&Prop> {
+    pub fn children(&self) -> Option<&Prop<true>> {
         self.props.get_by_label(CHILDREN_LABEL)
     }
 
-    fn prop_validation_tokens(&self, props_ty: impl ToTokens, has_children: bool) -> TokenStream {
+    fn prop_validation_tokens(
+        &self,
+        props_ty: impl ToTokens,
+        has_children: bool,
+        is_element_component: bool,
+    ) -> TokenStream {
+        let shared = all_shared_attributes_as_string();
+
         let check_children = if has_children {
             Some(quote_spanned! {props_ty.span()=> __yew_props.children; })
         } else {
@@ -59,7 +68,17 @@ impl ComponentProps {
         let check_props: TokenStream = self
             .props
             .iter()
-            .map(|Prop { label, .. }| quote_spanned! ( label.span()=> __yew_props.#label; ))
+            .map(|Prop { label, .. }| {
+                let should_check = {
+                    let label = label.to_string();
+                    label == "__globals" || (is_element_component && shared.contains(&label))
+                };
+                if should_check {
+                    quote! {}
+                } else {
+                    quote_spanned!( label.span()=> __yew_props.#label; )
+                }
+            })
             .chain(self.base_expr.iter().map(|expr| {
                 quote_spanned! {props_ty.span()=>
                     let _: #props_ty = #expr;
@@ -82,16 +101,33 @@ impl ComponentProps {
         &self,
         props_ty: impl ToTokens,
         children_renderer: Option<CR>,
+        is_element: bool,
     ) -> TokenStream {
-        let validate_props = self.prop_validation_tokens(&props_ty, children_renderer.is_some());
+        let validate_props =
+            self.prop_validation_tokens(&props_ty, children_renderer.is_some(), is_element);
+        let shared = all_shared_attributes_as_string();
         let build_props = match &self.base_expr {
             None => {
-                let set_props = self.props.iter().map(|Prop { label, value, .. }| {
-                    quote_spanned! {value.span()=>
-                        .#label(#value)
+                let mut set_props = vec![];
+                let mut global_props = vec![];
+                for Prop { label, value, .. } in self.props.iter() {
+                    if is_element && shared.contains(&label.to_string()) {
+                        global_props.push(quote_spanned! {value.span()=>
+                            .#label(#value)
+                        })
+                    } else {
+                        set_props.push(quote_spanned! {value.span()=>
+                            .#label(#value)
+                        })
                     }
+                }
+                let globals_setter = is_element.then(|| quote! {
+                    .__globals(
+                        <::yew::virtual_dom::typings::globals::Globals as ::yew::html::Properties>::builder()
+                        #(#global_props)*
+                        .build()
+                    )
                 });
-
                 let set_children = children_renderer.map(|children| {
                     quote_spanned! {props_ty.span()=>
                         .children(#children)
@@ -100,6 +136,7 @@ impl ComponentProps {
 
                 quote_spanned! {props_ty.span()=>
                     <#props_ty as ::yew::html::Properties>::builder()
+                        #globals_setter
                         #(#set_props)*
                         #set_children
                         .build()
@@ -159,10 +196,10 @@ impl Parse for ComponentProps {
     }
 }
 
-impl TryFrom<Props> for ComponentProps {
+impl TryFrom<Props<true>> for ComponentProps {
     type Error = syn::Error;
 
-    fn try_from(props: Props) -> Result<Self, Self::Error> {
+    fn try_from(props: Props<true>) -> Result<Self, Self::Error> {
         Ok(Self {
             props: validate(props)?,
             base_expr: None,
@@ -170,17 +207,18 @@ impl TryFrom<Props> for ComponentProps {
     }
 }
 
-fn validate(props: Props) -> Result<Props, syn::Error> {
+fn validate(props: Props<true>) -> Result<Props<true>, syn::Error> {
     props.check_no_duplicates()?;
-    props.check_all(|prop| {
-        if !prop.label.extended.is_empty() {
+    props.check_all(|prop| match &prop.label {
+        PropLabel::HtmlDashedName(name)
+            if syn::parse2::<Ident>(name.to_token_stream()).is_err() =>
+        {
             Err(syn::Error::new_spanned(
-                &prop.label,
+                &name,
                 "expected a valid Rust identifier",
             ))
-        } else {
-            Ok(())
         }
+        _ => Ok(()),
     })?;
 
     Ok(props)
diff --git a/packages/yew-macro/src/props/element.rs b/packages/yew-macro/src/props/element.rs
index a3b06339e0a..3a8a9dbd2ee 100644
--- a/packages/yew-macro/src/props/element.rs
+++ b/packages/yew-macro/src/props/element.rs
@@ -18,19 +18,19 @@ impl ClassesForm {
 }
 
 pub struct ElementProps {
-    pub attributes: Vec<Prop>,
-    pub listeners: Vec<Prop>,
+    pub attributes: Vec<Prop<false>>,
+    pub listeners: Vec<Prop<false>>,
     pub classes: Option<ClassesForm>,
-    pub booleans: Vec<Prop>,
-    pub value: Option<Prop>,
-    pub checked: Option<Prop>,
-    pub node_ref: Option<Prop>,
-    pub key: Option<Prop>,
+    pub booleans: Vec<Prop<false>>,
+    pub value: Option<Prop<false>>,
+    pub checked: Option<Prop<false>>,
+    pub node_ref: Option<Prop<false>>,
+    pub key: Option<Prop<false>>,
 }
 
 impl Parse for ElementProps {
     fn parse(input: ParseStream) -> syn::Result<Self> {
-        let mut props = input.parse::<Props>()?;
+        let mut props = input.parse::<Props<false>>()?;
 
         let listeners =
             props.drain_filter(|prop| LISTENER_SET.contains(prop.label.to_string().as_str()));
diff --git a/packages/yew-macro/src/props/prop.rs b/packages/yew-macro/src/props/prop.rs
index 856b0a25d3d..ae014afe510 100644
--- a/packages/yew-macro/src/props/prop.rs
+++ b/packages/yew-macro/src/props/prop.rs
@@ -1,24 +1,58 @@
-use super::CHILDREN_LABEL;
-use crate::html_tree::HtmlDashedName;
-use proc_macro2::{Spacing, TokenTree};
+use proc_macro2::{Ident, Spacing, TokenStream, TokenTree};
+use quote::{format_ident, ToTokens};
+use std::fmt;
 use std::{
     cmp::Ordering,
     convert::TryFrom,
     ops::{Deref, DerefMut},
 };
+use syn::ext::IdentExt;
+use syn::spanned::Spanned;
 use syn::{
     braced,
     parse::{Parse, ParseBuffer, ParseStream},
     token::Brace,
-    Block, Expr, ExprBlock, ExprPath, ExprRange, Stmt, Token,
+    Block, Expr, ExprBlock, ExprPath, ExprRange, LitStr, Stmt, Token,
 };
 
-pub struct Prop {
-    pub label: HtmlDashedName,
+use crate::html_tree::HtmlDashedName;
+
+use super::CHILDREN_LABEL;
+
+#[derive(Clone, PartialEq)]
+pub enum PropLabel {
+    HtmlDashedName(HtmlDashedName),
+    Ident(Ident),
+}
+
+impl PropLabel {
+    pub fn name(&self) -> &Ident {
+        match self {
+            PropLabel::HtmlDashedName(n) => &n.name,
+            PropLabel::Ident(i) => i,
+        }
+    }
+
+    pub fn to_lit_str(&self) -> LitStr {
+        LitStr::new(&self.to_string(), self.span())
+    }
+}
+
+impl fmt::Display for PropLabel {
+    fn fmt(&self, f: &mut fmt::Formatter) -> fmt::Result {
+        match self {
+            PropLabel::HtmlDashedName(v) => write!(f, "{}", v),
+            PropLabel::Ident(v) => write!(f, "{}", v),
+        }
+    }
+}
+
+pub struct Prop<const IS_COMP: bool> {
+    pub label: PropLabel,
     /// Punctuation between `label` and `value`.
     pub value: Expr,
 }
-impl Parse for Prop {
+impl<const IS_COMP: bool> Parse for Prop<IS_COMP> {
     fn parse(input: ParseStream) -> syn::Result<Self> {
         if input.peek(Brace) {
             Self::parse_shorthand_prop_assignment(input)
@@ -28,8 +62,17 @@ impl Parse for Prop {
     }
 }
 
+impl ToTokens for PropLabel {
+    fn to_tokens(&self, tokens: &mut TokenStream) {
+        tokens.extend(match self {
+            PropLabel::HtmlDashedName(n) => n.to_token_stream(),
+            PropLabel::Ident(i) => format_ident!("r#{}", i).to_token_stream(),
+        })
+    }
+}
+
 /// Helpers for parsing props
-impl Prop {
+impl<const IS_COMP: bool> Prop<IS_COMP> {
     /// Parse a prop using the shorthand syntax `{value}`, short for `value={value}`
     /// This only allows for labels with no hyphens, as it would otherwise create
     /// an ambiguity in the syntax
@@ -37,33 +80,38 @@ impl Prop {
         let value;
         let _brace = braced!(value in input);
         let expr = value.parse::<Expr>()?;
-        let label = if let Expr::Path(ExprPath {
-            ref attrs,
-            qself: None,
-            ref path,
-        }) = expr
-        {
-            if let (Some(ident), true) = (path.get_ident(), attrs.is_empty()) {
-                syn::Result::Ok(HtmlDashedName::from(ident.clone()))
-            } else {
-                Err(syn::Error::new_spanned(
-                    path,
-                    "only simple identifiers are allowed in the shorthand property syntax",
-                ))
+        let label = match expr {
+            Expr::Path(ExprPath {
+                ref attrs,
+                qself: None,
+                ref path,
+            }) => match (path.get_ident(), attrs.is_empty()) {
+                (Some(ident), true) => PropLabel::Ident(ident.clone()),
+                _ => {
+                    return Err(syn::Error::new_spanned(
+                        path,
+                        "only simple identifiers are allowed in the shorthand property syntax",
+                    ))
+                }
+            },
+            _ => {
+                return Err(syn::Error::new_spanned(
+                    expr,
+                    "missing label for property value. If trying to use the shorthand property syntax, only identifiers may be used",
+                ));
             }
-        } else {
-            return Err(syn::Error::new_spanned(
-                expr,
-                "missing label for property value. If trying to use the shorthand property syntax, only identifiers may be used",
-            ));
-        }?;
+        };
 
         Ok(Self { label, value: expr })
     }
 
     /// Parse a prop of the form `label={value}`
     fn parse_prop_assignment(input: ParseStream) -> syn::Result<Self> {
-        let label = input.parse::<HtmlDashedName>()?;
+        let label = if IS_COMP {
+            PropLabel::Ident(Ident::parse_any(input)?)
+        } else {
+            PropLabel::HtmlDashedName(input.parse::<HtmlDashedName>()?)
+        };
         let equals = input.parse::<Token![=]>().map_err(|_| {
             syn::Error::new_spanned(
                 &label,
@@ -82,6 +130,10 @@ impl Prop {
     }
 }
 
+impl Prop<true> {}
+
+impl Prop<false> {}
+
 fn parse_prop_value(input: &ParseBuffer) -> syn::Result<Expr> {
     if input.peek(Brace) {
         strip_braces(input.parse()?)
@@ -175,11 +227,11 @@ fn advance_until_next_dot2(input: &ParseBuffer) -> syn::Result<()> {
 ///
 /// The list may contain multiple props with the same label.
 /// Use `check_no_duplicates` to ensure that there are no duplicates.
-pub struct SortedPropList(Vec<Prop>);
-impl SortedPropList {
+pub struct SortedPropList<const IS_COMP: bool>(Vec<Prop<IS_COMP>>);
+impl<const IS_COMP: bool> SortedPropList<IS_COMP> {
     /// Create a new `SortedPropList` from a vector of props.
     /// The given `props` doesn't need to be sorted.
-    pub fn new(mut props: Vec<Prop>) -> Self {
+    pub fn new(mut props: Vec<Prop<IS_COMP>>) -> Self {
         props.sort_by(|a, b| Self::cmp_label(&a.label.to_string(), &b.label.to_string()));
         Self(props)
     }
@@ -203,17 +255,17 @@ impl SortedPropList {
     }
 
     /// Get the first prop with the given key.
-    pub fn get_by_label(&self, key: &str) -> Option<&Prop> {
+    pub fn get_by_label(&self, key: &str) -> Option<&Prop<IS_COMP>> {
         self.position(key).and_then(|i| self.0.get(i))
     }
 
     /// Pop the first prop with the given key.
-    pub fn pop(&mut self, key: &str) -> Option<Prop> {
+    pub fn pop(&mut self, key: &str) -> Option<Prop<IS_COMP>> {
         self.position(key).map(|i| self.0.remove(i))
     }
 
     /// Pop the prop with the given key and error if there are multiple ones.
-    pub fn pop_unique(&mut self, key: &str) -> syn::Result<Option<Prop>> {
+    pub fn pop_unique(&mut self, key: &str) -> syn::Result<Option<Prop<IS_COMP>>> {
         let prop = self.pop(key);
         if prop.is_some() {
             if let Some(other_prop) = self.get_by_label(key) {
@@ -228,12 +280,12 @@ impl SortedPropList {
     }
 
     /// Turn the props into a vector of `Prop`.
-    pub fn into_vec(self) -> Vec<Prop> {
+    pub fn into_vec(self) -> Vec<Prop<IS_COMP>> {
         self.0
     }
 
     /// Iterate over all duplicate props in order of appearance.
-    fn iter_duplicates(&self) -> impl Iterator<Item = &Prop> {
+    fn iter_duplicates(&self) -> impl Iterator<Item = &Prop<IS_COMP>> {
         self.0.windows(2).filter_map(|pair| {
             let (a, b) = (&pair[0], &pair[1]);
 
@@ -246,7 +298,7 @@ impl SortedPropList {
     }
 
     /// Remove and return all props for which `filter` returns `true`.
-    pub fn drain_filter(&mut self, filter: impl FnMut(&Prop) -> bool) -> Self {
+    pub fn drain_filter(&mut self, filter: impl FnMut(&Prop<IS_COMP>) -> bool) -> Self {
         let (drained, others) = self.0.drain(..).partition(filter);
         self.0 = others;
         Self(drained)
@@ -254,7 +306,7 @@ impl SortedPropList {
 
     /// Run the given function for all props and aggregate the errors.
     /// If there's at least one error, the result will be `Result::Err`.
-    pub fn check_all(&self, f: impl FnMut(&Prop) -> syn::Result<()>) -> syn::Result<()> {
+    pub fn check_all(&self, f: impl FnMut(&Prop<IS_COMP>) -> syn::Result<()>) -> syn::Result<()> {
         crate::join_errors(self.0.iter().map(f).filter_map(Result::err))
     }
 
@@ -271,9 +323,9 @@ impl SortedPropList {
         }))
     }
 }
-impl Parse for SortedPropList {
+impl<const IS_COMP: bool> Parse for SortedPropList<IS_COMP> {
     fn parse(input: ParseStream) -> syn::Result<Self> {
-        let mut props: Vec<Prop> = Vec::new();
+        let mut props: Vec<Prop<IS_COMP>> = Vec::new();
         // Stop parsing props if a base expression preceded by `..` is reached
         while !input.is_empty() && !input.peek(Token![..]) {
             props.push(input.parse()?);
@@ -282,8 +334,8 @@ impl Parse for SortedPropList {
         Ok(Self::new(props))
     }
 }
-impl Deref for SortedPropList {
-    type Target = [Prop];
+impl<const IS_COMP: bool> Deref for SortedPropList<IS_COMP> {
+    type Target = [Prop<IS_COMP>];
 
     fn deref(&self) -> &Self::Target {
         &self.0
@@ -291,57 +343,57 @@ impl Deref for SortedPropList {
 }
 
 #[derive(Default)]
-pub struct SpecialProps {
-    pub node_ref: Option<Prop>,
-    pub key: Option<Prop>,
+pub struct SpecialProps<const IS_COMP: bool> {
+    pub node_ref: Option<Prop<IS_COMP>>,
+    pub key: Option<Prop<IS_COMP>>,
 }
-impl SpecialProps {
+impl<const IS_COMP: bool> SpecialProps<IS_COMP> {
     const REF_LABEL: &'static str = "ref";
     const KEY_LABEL: &'static str = "key";
 
-    fn pop_from(props: &mut SortedPropList) -> syn::Result<Self> {
+    fn pop_from(props: &mut SortedPropList<IS_COMP>) -> syn::Result<Self> {
         let node_ref = props.pop_unique(Self::REF_LABEL)?;
         let key = props.pop_unique(Self::KEY_LABEL)?;
         Ok(Self { node_ref, key })
     }
 
-    fn iter(&self) -> impl Iterator<Item = &Prop> {
+    fn iter(&self) -> impl Iterator<Item = &Prop<IS_COMP>> {
         self.node_ref.as_ref().into_iter().chain(self.key.as_ref())
     }
 
     /// Run the given function for all props and aggregate the errors.
     /// If there's at least one error, the result will be `Result::Err`.
-    pub fn check_all(&self, f: impl FnMut(&Prop) -> syn::Result<()>) -> syn::Result<()> {
+    pub fn check_all(&self, f: impl FnMut(&Prop<IS_COMP>) -> syn::Result<()>) -> syn::Result<()> {
         crate::join_errors(self.iter().map(f).filter_map(Result::err))
     }
 }
 
-pub struct Props {
-    pub special: SpecialProps,
-    pub prop_list: SortedPropList,
+pub struct Props<const IS_COMP: bool> {
+    pub special: SpecialProps<IS_COMP>,
+    pub prop_list: SortedPropList<IS_COMP>,
 }
-impl Parse for Props {
+impl<const IS_COMP: bool> Parse for Props<IS_COMP> {
     fn parse(input: ParseStream) -> syn::Result<Self> {
-        Self::try_from(input.parse::<SortedPropList>()?)
+        Self::try_from(input.parse::<SortedPropList<IS_COMP>>()?)
     }
 }
-impl Deref for Props {
-    type Target = SortedPropList;
+impl<const IS_COMP: bool> Deref for Props<IS_COMP> {
+    type Target = SortedPropList<IS_COMP>;
 
     fn deref(&self) -> &Self::Target {
         &self.prop_list
     }
 }
-impl DerefMut for Props {
+impl<const IS_COMP: bool> DerefMut for Props<IS_COMP> {
     fn deref_mut(&mut self) -> &mut Self::Target {
         &mut self.prop_list
     }
 }
 
-impl TryFrom<SortedPropList> for Props {
+impl<const IS_COMP: bool> TryFrom<SortedPropList<IS_COMP>> for Props<IS_COMP> {
     type Error = syn::Error;
 
-    fn try_from(mut prop_list: SortedPropList) -> Result<Self, Self::Error> {
+    fn try_from(mut prop_list: SortedPropList<IS_COMP>) -> Result<Self, Self::Error> {
         let special = SpecialProps::pop_from(&mut prop_list)?;
         Ok(Self { special, prop_list })
     }
diff --git a/packages/yew-macro/src/props/prop_macro.rs b/packages/yew-macro/src/props/prop_macro.rs
index 0f48f32029f..a5dee4c6950 100644
--- a/packages/yew-macro/src/props/prop_macro.rs
+++ b/packages/yew-macro/src/props/prop_macro.rs
@@ -1,5 +1,6 @@
 use super::{ComponentProps, Prop, Props, SortedPropList};
 use crate::html_tree::HtmlDashedName;
+use crate::props::PropLabel;
 use proc_macro2::TokenStream;
 use quote::{quote_spanned, ToTokens};
 use std::convert::TryInto;
@@ -57,10 +58,13 @@ impl Parse for PropValue {
     }
 }
 
-impl From<PropValue> for Prop {
-    fn from(prop_value: PropValue) -> Prop {
+impl<const IS_COMP: bool> From<PropValue> for Prop<IS_COMP> {
+    fn from(prop_value: PropValue) -> Self {
         let PropValue { label, value } = prop_value;
-        Prop { label, value }
+        Prop {
+            label: PropLabel::HtmlDashedName(label),
+            value,
+        }
     }
 }
 
@@ -101,7 +105,7 @@ impl Parse for PropsMacroInput {
     fn parse(input: ParseStream) -> syn::Result<Self> {
         let PropsExpr { ty, fields, .. } = input.parse()?;
         let prop_list = SortedPropList::new(fields.into_iter().map(Into::into).collect());
-        let props: Props = prop_list.try_into()?;
+        let props: Props<true> = prop_list.try_into()?;
         props.special.check_all(|prop| {
             let label = &prop.label;
             Err(syn::Error::new_spanned(
@@ -119,6 +123,6 @@ impl ToTokens for PropsMacroInput {
     fn to_tokens(&self, tokens: &mut TokenStream) {
         let Self { ty, props } = self;
 
-        tokens.extend(props.build_properties_tokens(ty, None::<TokenStream>))
+        tokens.extend(props.build_properties_tokens(ty, None::<TokenStream>, false))
     }
 }
diff --git a/packages/yew-macro/src/typed_vdom/generate_element.rs b/packages/yew-macro/src/typed_vdom/generate_element.rs
new file mode 100644
index 00000000000..74684b0a7b8
--- /dev/null
+++ b/packages/yew-macro/src/typed_vdom/generate_element.rs
@@ -0,0 +1,153 @@
+use crate::typed_vdom::globals::listeners;
+use crate::typed_vdom::{all_shared_attributes, kw, AttributePropDefinition};
+use convert_case::{Case, Casing};
+use proc_macro2::{Ident, TokenStream};
+use quote::{format_ident, quote, ToTokens};
+use syn::parse::{Parse, ParseStream};
+use syn::punctuated::Punctuated;
+use syn::{braced, Token};
+
+pub struct GenerateElement {
+    element_name: Ident,
+    props: Vec<AttributePropDefinition>,
+}
+
+impl Parse for GenerateElement {
+    fn parse(input: ParseStream) -> syn::Result<Self> {
+        let name = input.parse()?;
+        let _separator = input.parse::<Token![;]>()?;
+
+        let props = {
+            let _props_kw = input.parse::<kw::props>()?;
+            let _separator = input.parse::<Token![:]>()?;
+
+            let buf;
+            let _brace_token = braced!(buf in input);
+            buf
+        };
+        let props: Punctuated<AttributePropDefinition, Token![,]> =
+            Punctuated::parse_terminated(&props)?;
+
+        Ok(Self {
+            element_name: name,
+            props: props.into_iter().collect(),
+        })
+    }
+}
+
+impl ToTokens for GenerateElement {
+    fn to_tokens(&self, tokens: &mut TokenStream) {
+        let element_name = &self.element_name;
+        let prop_definitions = &self.props;
+        let all_prop_definitions = {
+            let mut all_prop_definitions = all_shared_attributes();
+            all_prop_definitions.extend(self.props.clone());
+            all_prop_definitions
+        };
+        let props_ident = format_ident!(
+            "{}Props",
+            element_name.to_string().to_case(Case::Pascal),
+            span = element_name.span()
+        );
+        let props = prop_definitions.iter().map(|it| it.build_fields());
+        let attr_if_lets = all_prop_definitions.iter().map(|it| it.build_if_lets());
+
+        let all_listeners = listeners();
+        let listeners_if_lets = all_listeners.iter().map(|it| it.build_if_lets());
+
+        let vtag_init = match element_name.to_string().trim() {
+            "input" => quote! {
+                ::yew::virtual_dom::VTag::__new_input(
+                    element.attributes.remove("value"),
+                    element.attributes.remove("checked").map(|_| true).unwrap_or(false),
+                    element.node_ref,
+                    element.key,
+                    ::yew::virtual_dom::Attributes::IndexMap(element.attributes.into_iter().collect()),
+                    ::yew::virtual_dom::Listeners::Pending(element.listeners.into_boxed_slice()),
+                )
+            },
+            _ => quote! {
+                ::yew::virtual_dom::VTag::__new_other(
+                    ::std::stringify!(#element_name).into(),
+                    element.node_ref,
+                    element.key,
+                    ::yew::virtual_dom::Attributes::IndexMap(element.attributes.into_iter().collect()),
+                    ::yew::virtual_dom::Listeners::Pending(element.listeners.into_boxed_slice()),
+                    ::yew::virtual_dom::VList::with_children(element.children, ::std::option::Option::None),
+                )
+            },
+        };
+
+        let out = quote! {
+            #[allow(non_camel_case_types)]
+            pub struct #element_name;
+
+            #[derive(::std::default::Default, ::std::clone::Clone, ::std::fmt::Debug, ::yew::html::Properties, ::std::cmp::PartialEq)]
+            pub struct #props_ident {
+                #[prop_or_default]
+                pub __globals: ::yew::virtual_dom::typings::globals::Globals,
+                #[prop_or_default]
+                pub node_ref: ::std::option::Option::<::yew::NodeRef>,
+                #[prop_or_default]
+                pub key: ::std::option::Option::<::yew::virtual_dom::Key>,
+                #[prop_or_default]
+                pub children: ::yew::Children,
+                #(#props)*
+            }
+
+            impl std::ops::Deref for #props_ident {
+                type Target = ::yew::virtual_dom::typings::globals::Globals;
+
+                fn deref(&self) -> &Self::Target {
+                    &self.__globals
+                }
+            }
+
+
+            impl std::ops::DerefMut for #props_ident {
+                fn deref_mut(&mut self) -> &mut Self::Target {
+                    &mut self.__globals
+                }
+            }
+
+            impl #props_ident {
+                fn into_data(self) -> ::yew::virtual_dom::typings::ElementData {
+
+                    ::yew::virtual_dom::typings::ElementData {
+                        node_ref: ::std::option::Option::unwrap_or_default(self.node_ref.clone()),
+                        attributes: {
+                            let mut attrs = ::std::collections::HashMap::new();
+                            #(#attr_if_lets)*
+                            attrs
+                        },
+                        listeners: {
+                            let mut listeners = ::std::vec![];
+                            #(#listeners_if_lets)*
+                            listeners
+                        },
+                        key: self.key.clone(),
+                        children: self.children.into_iter().collect(),
+                    }
+                }
+            }
+
+            impl ::yew::Component for #element_name {
+                type Message = ();
+                type Properties = #props_ident;
+
+                fn create(_ctx: &::yew::html::Context<Self>) -> Self {
+                    Self
+                }
+
+                fn view(&self, ctx: &::yew::html::Context<Self>) -> ::yew::html::Html {
+                    #[allow(unused_mut)]
+                    let mut element = ctx.props().clone().into_data();
+
+                    ::std::convert::Into::<::yew::virtual_dom::VNode>::into({ #vtag_init })
+                }
+            }
+        };
+
+        tokens.extend(out);
+    }
+}
diff --git a/packages/yew-macro/src/typed_vdom/globals.rs b/packages/yew-macro/src/typed_vdom/globals.rs
new file mode 100644
index 00000000000..d26664208b5
--- /dev/null
+++ b/packages/yew-macro/src/typed_vdom/globals.rs
@@ -0,0 +1,534 @@
+use proc_macro2::{Ident, Span};
+use syn::parse_quote;
+
+use crate::typed_vdom::{AttributePropDefinition, ListenerPropDefinition};
+
+pub fn global_attributes() -> [AttributePropDefinition; 17] {
+    [
+        AttributePropDefinition::new(
+            parse_quote! { autocapitalize },
+            parse_quote! { ::yew::virtual_dom::AttrValue },
+        ),
+        AttributePropDefinition::new(
+            parse_quote! { contextmenu },
+            parse_quote! { ::yew::virtual_dom::AttrValue },
+        ),
+        AttributePropDefinition::new(
+            parse_quote! { contenteditable },
+            parse_quote! { ::yew::virtual_dom::AttrValue },
+        ),
+        AttributePropDefinition::new(
+            parse_quote! { slot },
+            parse_quote! { ::yew::virtual_dom::AttrValue },
+        ),
+        AttributePropDefinition::new(
+            parse_quote! { spellcheck },
+            parse_quote! { ::yew::virtual_dom::AttrValue },
+        ),
+        AttributePropDefinition::new(
+            parse_quote! { class },
+            parse_quote! { ::yew::virtual_dom::AttrValue },
+        ),
+        AttributePropDefinition::new(
+            parse_quote! { title },
+            parse_quote! { ::yew::virtual_dom::AttrValue },
+        ),
+        AttributePropDefinition::new(
+            parse_quote! { itemprop },
+            parse_quote! { ::yew::virtual_dom::AttrValue },
+        ),
+        AttributePropDefinition::new(
+            parse_quote! { accesskey },
+            parse_quote! { ::yew::virtual_dom::AttrValue },
+        ),
+        AttributePropDefinition::new(
+            parse_quote! { lang },
+            parse_quote! { ::yew::virtual_dom::AttrValue },
+        ),
+        AttributePropDefinition::new(
+            parse_quote! { id },
+            parse_quote! { ::yew::virtual_dom::AttrValue },
+        ),
+        AttributePropDefinition::new(
+            parse_quote! { translate },
+            parse_quote! { ::yew::virtual_dom::AttrValue },
+        ),
+        AttributePropDefinition::new(
+            parse_quote! { draggable },
+            parse_quote! { ::yew::virtual_dom::AttrValue },
+        ),
+        AttributePropDefinition::new(
+            parse_quote! { style },
+            parse_quote! { ::yew::virtual_dom::AttrValue },
+        ),
+        AttributePropDefinition::new(
+            parse_quote! { dir },
+            parse_quote! { ::yew::virtual_dom::AttrValue },
+        ),
+        AttributePropDefinition::new(
+            parse_quote! { tabindex },
+            parse_quote! { ::yew::virtual_dom::AttrValue },
+        ),
+        AttributePropDefinition::new(
+            parse_quote! { hidden },
+            parse_quote! { ::yew::virtual_dom::AttrValue },
+        ),
+    ]
+}
+
+pub fn listeners() -> [ListenerPropDefinition; 96] {
+    [
+        ListenerPropDefinition::new(parse_quote! { abort }),
+        ListenerPropDefinition::new(parse_quote! { cancel }),
+        ListenerPropDefinition::new(parse_quote! { canplay }),
+        ListenerPropDefinition::new(parse_quote! { canplaythrough }),
+        ListenerPropDefinition::new(parse_quote! { close }),
+        ListenerPropDefinition::new(parse_quote! { cuechange }),
+        ListenerPropDefinition::new(parse_quote! { durationchange }),
+        ListenerPropDefinition::new(parse_quote! { emptied }),
+        ListenerPropDefinition::new(parse_quote! { ended }),
+        ListenerPropDefinition::new(parse_quote! { error }),
+        ListenerPropDefinition::new(parse_quote! { formdata }),
+        ListenerPropDefinition::new(parse_quote! { invalid }),
+        ListenerPropDefinition::new(parse_quote! { load }),
+        ListenerPropDefinition::new(parse_quote! { loadeddata }),
+        ListenerPropDefinition::new(parse_quote! { loadedmetadata }),
+        ListenerPropDefinition::new(parse_quote! { pause }),
+        ListenerPropDefinition::new(parse_quote! { play }),
+        ListenerPropDefinition::new(parse_quote! { playing }),
+        ListenerPropDefinition::new(parse_quote! { ratechange }),
+        ListenerPropDefinition::new(parse_quote! { reset }),
+        ListenerPropDefinition::new(parse_quote! { resize }),
+        ListenerPropDefinition::new(parse_quote! { securitypolicyviolation }),
+        ListenerPropDefinition::new(parse_quote! { seeked }),
+        ListenerPropDefinition::new(parse_quote! { seeking }),
+        ListenerPropDefinition::new(parse_quote! { select }),
+        ListenerPropDefinition::new(parse_quote! { slotchange }),
+        ListenerPropDefinition::new(parse_quote! { stalled }),
+        ListenerPropDefinition::new(parse_quote! { suspend }),
+        ListenerPropDefinition::new(parse_quote! { timeupdate }),
+        ListenerPropDefinition::new(parse_quote! { toggle }),
+        ListenerPropDefinition::new(parse_quote! { volumechange }),
+        ListenerPropDefinition::new(parse_quote! { waiting }),
+        ListenerPropDefinition::new(parse_quote! { change }),
+        ListenerPropDefinition::new(parse_quote! { copy }),
+        ListenerPropDefinition::new(parse_quote! { cut }),
+        ListenerPropDefinition::new(parse_quote! { paste }),
+        ListenerPropDefinition::new(parse_quote! { pointerlockchange }),
+        ListenerPropDefinition::new(parse_quote! { pointerlockerror }),
+        ListenerPropDefinition::new(parse_quote! { selectionchange }),
+        ListenerPropDefinition::new(parse_quote! { selectstart }),
+        ListenerPropDefinition::new(parse_quote! { show }),
+        ListenerPropDefinition::new_with_ty(parse_quote! { auxclick }, parse_quote! { MouseEvent }),
+        ListenerPropDefinition::new_with_ty(parse_quote! { click }, parse_quote! { MouseEvent }),
+        ListenerPropDefinition::new_with_ty(
+            parse_quote! { contextmenu },
+            parse_quote! { MouseEvent },
+        ),
+        ListenerPropDefinition::new_with_ty(parse_quote! { dblclick }, parse_quote! { MouseEvent }),
+        ListenerPropDefinition::new_with_ty(parse_quote! { drag }, parse_quote! { DragEvent }),
+        ListenerPropDefinition::new_with_ty(parse_quote! { dragend }, parse_quote! { DragEvent }),
+        ListenerPropDefinition::new_with_ty(parse_quote! { dragenter }, parse_quote! { DragEvent }),
+        ListenerPropDefinition::new_with_ty(parse_quote! { dragexit }, parse_quote! { DragEvent }),
+        ListenerPropDefinition::new_with_ty(parse_quote! { dragleave }, parse_quote! { DragEvent }),
+        ListenerPropDefinition::new_with_ty(parse_quote! { dragover }, parse_quote! { DragEvent }),
+        ListenerPropDefinition::new_with_ty(parse_quote! { dragstart }, parse_quote! { DragEvent }),
+        ListenerPropDefinition::new_with_ty(parse_quote! { drop }, parse_quote! { DragEvent }),
+        ListenerPropDefinition::new_with_ty(parse_quote! { blur }, parse_quote! { FocusEvent }),
+        ListenerPropDefinition::new_with_ty(parse_quote! { focus }, parse_quote! { FocusEvent }),
+        ListenerPropDefinition::new_with_ty(parse_quote! { focusin }, parse_quote! { FocusEvent }),
+        ListenerPropDefinition::new_with_ty(parse_quote! { focusout }, parse_quote! { FocusEvent }),
+        ListenerPropDefinition::new_with_ty(
+            parse_quote! { keydown },
+            parse_quote! { KeyboardEvent },
+        ),
+        ListenerPropDefinition::new_with_ty(
+            parse_quote! { keypress },
+            parse_quote! { KeyboardEvent },
+        ),
+        ListenerPropDefinition::new_with_ty(parse_quote! { keyup }, parse_quote! { KeyboardEvent }),
+        ListenerPropDefinition::new_with_ty(
+            parse_quote! { loadstart },
+            parse_quote! { ProgressEvent },
+        ),
+        ListenerPropDefinition::new_with_ty(
+            parse_quote! { progress },
+            parse_quote! { ProgressEvent },
+        ),
+        ListenerPropDefinition::new_with_ty(
+            parse_quote! { loadend },
+            parse_quote! { ProgressEvent },
+        ),
+        ListenerPropDefinition::new_with_ty(
+            parse_quote! { mousedown },
+            parse_quote! { MouseEvent },
+        ),
+        ListenerPropDefinition::new_with_ty(
+            parse_quote! { mouseenter },
+            parse_quote! { MouseEvent },
+        ),
+        ListenerPropDefinition::new_with_ty(
+            parse_quote! { mouseleave },
+            parse_quote! { MouseEvent },
+        ),
+        ListenerPropDefinition::new_with_ty(
+            parse_quote! { mousemove },
+            parse_quote! { MouseEvent },
+        ),
+        ListenerPropDefinition::new_with_ty(parse_quote! { mouseout }, parse_quote! { MouseEvent }),
+        ListenerPropDefinition::new_with_ty(
+            parse_quote! { mouseover },
+            parse_quote! { MouseEvent },
+        ),
+        ListenerPropDefinition::new_with_ty(parse_quote! { mouseup }, parse_quote! { MouseEvent }),
+        ListenerPropDefinition::new_with_ty(parse_quote! { wheel }, parse_quote! { WheelEvent }),
+        ListenerPropDefinition::new_with_ty(parse_quote! { input }, parse_quote! { InputEvent }),
+        ListenerPropDefinition::new_with_ty(parse_quote! { submit }, parse_quote! { FocusEvent }),
+        ListenerPropDefinition::new_with_ty(
+            parse_quote! { animationcancel },
+            parse_quote! { AnimationEvent },
+        ),
+        ListenerPropDefinition::new_with_ty(
+            parse_quote! { animationend },
+            parse_quote! { AnimationEvent },
+        ),
+        ListenerPropDefinition::new_with_ty(
+            parse_quote! { animationiteration },
+            parse_quote! { AnimationEvent },
+        ),
+        ListenerPropDefinition::new_with_ty(
+            parse_quote! { animationstart },
+            parse_quote! { AnimationEvent },
+        ),
+        ListenerPropDefinition::new_with_ty(
+            parse_quote! { gotpointercapture },
+            parse_quote! { PointerEvent },
+        ),
+        ListenerPropDefinition::new_with_ty(
+            parse_quote! { lostpointercapture },
+            parse_quote! { PointerEvent },
+        ),
+        ListenerPropDefinition::new_with_ty(
+            parse_quote! { pointercancel },
+            parse_quote! { PointerEvent },
+        ),
+        ListenerPropDefinition::new_with_ty(
+            parse_quote! { pointerdown },
+            parse_quote! { PointerEvent },
+        ),
+        ListenerPropDefinition::new_with_ty(
+            parse_quote! { pointerenter },
+            parse_quote! { PointerEvent },
+        ),
+        ListenerPropDefinition::new_with_ty(
+            parse_quote! { pointerleave },
+            parse_quote! { PointerEvent },
+        ),
+        ListenerPropDefinition::new_with_ty(
+            parse_quote! { pointermove },
+            parse_quote! { PointerEvent },
+        ),
+        ListenerPropDefinition::new_with_ty(
+            parse_quote! { pointerout },
+            parse_quote! { PointerEvent },
+        ),
+        ListenerPropDefinition::new_with_ty(
+            parse_quote! { pointerover },
+            parse_quote! { PointerEvent },
+        ),
+        ListenerPropDefinition::new_with_ty(
+            parse_quote! { pointerup },
+            parse_quote! { PointerEvent },
+        ),
+        ListenerPropDefinition::new_with_ty(
+            parse_quote! { touchcancel },
+            parse_quote! { TouchEvent },
+        ),
+        ListenerPropDefinition::new_with_ty(parse_quote! { touchend }, parse_quote! { TouchEvent }),
+        ListenerPropDefinition::new_with_ty(
+            parse_quote! { transitioncancel },
+            parse_quote! { TransitionEvent },
+        ),
+        ListenerPropDefinition::new_with_ty(
+            parse_quote! { transitionend },
+            parse_quote! { TransitionEvent },
+        ),
+        ListenerPropDefinition::new_with_ty(
+            parse_quote! { transitionrun },
+            parse_quote! { TransitionEvent },
+        ),
+        ListenerPropDefinition::new_with_ty(
+            parse_quote! { transitionstart },
+            parse_quote! { TransitionEvent },
+        ),
+        ListenerPropDefinition::new(parse_quote! { scroll }),
+        ListenerPropDefinition::new_with_ty(
+            parse_quote! { touchmove },
+            parse_quote! { TouchEvent },
+        ),
+        ListenerPropDefinition::new_with_ty(
+            parse_quote! { touchstart },
+            parse_quote! { TouchEvent },
+        ),
+    ]
+}
+
+pub fn element_names() -> [&'static str; 142] {
+    [
+        "html",
+        "base",
+        "head",
+        "link",
+        "meta",
+        "style",
+        "title",
+        "body",
+        "address",
+        "article",
+        "aside",
+        "footer",
+        "header",
+        "main",
+        "nav",
+        "section",
+        "blockquote",
+        "dd",
+        "div",
+        "dl",
+        "dt",
+        "figcaption",
+        "figure",
+        "hr",
+        "li",
+        "ol",
+        "p",
+        "pre",
+        "ul",
+        "a",
+        "abbr",
+        "b",
+        "bdi",
+        "bdo",
+        "br",
+        "cite",
+        "code",
+        "data",
+        "dfn",
+        "em",
+        "i",
+        "kbd",
+        "mark",
+        "q",
+        "rp",
+        "rt",
+        "ruby",
+        "s",
+        "samp",
+        "small",
+        "span",
+        "strong",
+        "sub",
+        "sup",
+        "time",
+        "u",
+        "var",
+        "wbr",
+        "area",
+        "audio",
+        "img",
+        "map",
+        "track",
+        "video",
+        "embed",
+        "iframe",
+        "object",
+        "param",
+        "picture",
+        "portal",
+        "source",
+        "svg",
+        "math",
+        "canvas",
+        "noscript",
+        "script",
+        "del",
+        "ins",
+        "caption",
+        "col",
+        "colgroup",
+        "table",
+        "tbody",
+        "td",
+        "tfoot",
+        "th",
+        "thead",
+        "tr",
+        "button",
+        "datalist",
+        "fieldset",
+        "form",
+        "input",
+        "label",
+        "legend",
+        "meter",
+        "optgroup",
+        "option",
+        "output",
+        "progress",
+        "select",
+        "textarea",
+        "details",
+        "dialog",
+        "menu",
+        "summary",
+        "slot",
+        "template",
+        "acronym",
+        "applet",
+        "basefont",
+        "bgsound",
+        "big",
+        "blink",
+        "center",
+        "content",
+        "dir",
+        "font",
+        "frame",
+        "frameset",
+        "hgroup",
+        "image",
+        "keygen",
+        "marquee",
+        "menuitem",
+        "nobr",
+        "noembed",
+        "noframes",
+        "plaintext",
+        "rb",
+        "rtc",
+        "shadow",
+        "spacer",
+        "strike",
+        "tt",
+        "xmp",
+        "h1",
+        "h2",
+        "h3",
+        "h4",
+        "h5",
+        "h6",
+    ]
+}
+
+// obtained by running
+// Array.from(document.querySelectorAll('.main-page-content ul')).slice(0, 5)
+// .map(it => Array.from(it.children)).flat().map(it => it.querySelector('li a code').innerText)
+// on https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes
+// all of these elements must be prefixed by aria-
+pub fn all_aria_labels() -> [AttributePropDefinition; 49] {
+    [
+        "atomic",
+        "invalid",
+        "rowcount",
+        "colindex",
+        "grabbed",
+        "hidden",
+        "details",
+        "owns",
+        "placeholder",
+        "required",
+        "selected",
+        "sort",
+        "activedescendant",
+        "autocomplete",
+        "keyshortcuts",
+        "live",
+        "valuemax",
+        "current",
+        "labelledby",
+        "colcount",
+        "setsize",
+        "readonly",
+        "valuetext",
+        "disabled",
+        "pressed",
+        "haspopup",
+        "valuenow",
+        "relevant",
+        "description",
+        "busy",
+        "multiselectable",
+        "expanded",
+        "level",
+        "describedby",
+        "rowindex",
+        "errormessage",
+        "flowto",
+        "dropeffect",
+        "multiline",
+        "modal",
+        "label",
+        "controls",
+        "checked",
+        "orientation",
+        "roledescription",
+        "posinset",
+        "valuemin",
+        "rowspan",
+        "colspan",
+    ]
+    .map(|it| {
+        AttributePropDefinition::new(
+            Ident::new(&format!("aria_{}", it), Span::mixed_site()),
+            parse_quote! { ::yew::virtual_dom::AttrValue },
+        )
+    })
+}
+pub fn others() -> [AttributePropDefinition; 1] {
+    [AttributePropDefinition::new(
+        parse_quote! { role },
+        parse_quote! { ::yew::virtual_dom::AttrValue },
+    )]
+}
+
+pub fn all_shared_attributes_as_string() -> Vec<String> {
+    let mut attrs = all_shared_attributes()
+        .iter()
+        .map(|it| it.name.to_string())
+        .collect::<Vec<String>>();
+    let listeners = listeners()
+        .iter()
+        .map(|it| it.ident().to_string())
+        .collect::<Vec<String>>();
+    attrs.extend(listeners);
+    attrs
+}
+pub fn all_shared_attributes() -> Vec<AttributePropDefinition> {
+    let mut prop_definitions = Vec::new();
+    prop_definitions.extend(global_attributes());
+    prop_definitions.extend(all_aria_labels());
+    prop_definitions.extend(others());
+    prop_definitions
+}
+
+pub mod globals_macro {
+    use super::*;
+    use proc_macro2::TokenStream;
+    use quote::quote;
+
+    pub fn globals_impl() -> TokenStream {
+        let prop_definitions = all_shared_attributes();
+        let props = prop_definitions.iter().map(|it| it.build_fields());
+
+        let all_listeners = listeners();
+        let listeners = all_listeners.iter().map(|it| it.build_fields());
+
+        quote! {
+            #[derive(Debug, PartialEq, ::yew::Properties, Clone, Default)]
+            pub struct Globals {
+                #(#props)*
+                #(#listeners)*
+            }
+        }
+    }
+}
diff --git a/packages/yew-macro/src/typed_vdom/mod.rs b/packages/yew-macro/src/typed_vdom/mod.rs
new file mode 100644
index 00000000000..2668c8b0a94
--- /dev/null
+++ b/packages/yew-macro/src/typed_vdom/mod.rs
@@ -0,0 +1,94 @@
+use proc_macro2::{Ident, TokenStream};
+use quote::{format_ident, quote};
+use syn::ext::IdentExt;
+use syn::parse::{Parse, ParseStream};
+use syn::{parse_quote, LitStr, Token, Type};
+
+pub mod generate_element;
+mod globals;
+pub use globals::*;
+
+#[derive(Clone)]
+pub struct AttributePropDefinition {
+    pub name: Ident,
+    pub ty: Type,
+}
+
+impl Parse for AttributePropDefinition {
+    fn parse(input: ParseStream) -> syn::Result<Self> {
+        let name = Ident::parse_any(input)?;
+        let _separator = input.parse::<Token![:]>();
+        let ty = input.parse()?;
+        Ok(Self { name, ty })
+    }
+}
+
+impl AttributePropDefinition {
+    pub fn new(name: Ident, ty: Type) -> Self {
+        Self { name, ty }
+    }
+    fn build_fields(&self) -> TokenStream {
+        let AttributePropDefinition { ty, .. } = self;
+        let name = self.name();
+        quote! {
+            #[prop_or_default]
+            pub #name: ::std::option::Option::<#ty>,
+        }
+    }
+
+    fn name(&self) -> Ident {
+        format_ident!("r#{}", self.name)
+    }
+
+    fn build_if_lets(&self) -> TokenStream {
+        let ident = self.name();
+        let name = self.name.to_string().replace('_', "-");
+        let name = LitStr::new(&name, self.name.span());
+        quote! {
+            if let ::std::option::Option::Some(val) = self.#ident.as_ref() {
+                attrs.insert(#name, val.clone());
+            }
+        }
+    }
+}
+
+#[derive(Clone)]
+pub struct ListenerPropDefinition {
+    event: Ident,
+    ty: Type,
+}
+
+impl ListenerPropDefinition {
+    fn new(event: Ident) -> Self {
+        Self {
+            event,
+            ty: parse_quote! { Event },
+        }
+    }
+    fn new_with_ty(event: Ident, ty: Type) -> Self {
+        Self { event, ty }
+    }
+    fn ident(&self) -> Ident {
+        format_ident!("on{}", self.event, span = self.event.span())
+    }
+    fn build_fields(&self) -> TokenStream {
+        let ident = self.ident();
+        let ty = &self.ty;
+        quote! {
+            #[prop_or_default]
+            pub #ident: ::std::option::Option::<::yew::Callback::<::web_sys::#ty>>,
+        }
+    }
+    fn build_if_lets(&self) -> TokenStream {
+        let ident = self.ident();
+        quote! {
+            if let Some(value) = self.#ident.as_ref() {
+                listeners.push(::yew::html::#ident::Wrapper::__macro_new(value));
+            }
+        }
+    }
+}
+
+pub(crate) mod kw {
+    syn::custom_keyword!(props);
+}
diff --git a/packages/yew-macro/tests/html_macro/component-fail.stderr b/packages/yew-macro/tests/html_macro/component-fail.stderr
index 3a0eb2af361..018e9df9dec 100644
--- a/packages/yew-macro/tests/html_macro/component-fail.stderr
+++ b/packages/yew-macro/tests/html_macro/component-fail.stderr
@@ -154,28 +154,17 @@ error: base props expression must appear last in list of props
 70 |     html! { <Child .. props value=1 /> };
    |                    ^^^^^^^^
 
-error: expected identifier, found keyword `type`
-  --> tests/html_macro/component-fail.rs:71:20
-   |
-71 |     html! { <Child type=0 /> };
-   |                    ^^^^ expected identifier, found keyword
-   |
-help: you can escape reserved keywords to use them as identifiers
-   |
-71 |     html! { <Child r#type=0 /> };
-   |                    ~~~~~~
-
 error: the property value must be either a literal or enclosed in braces. Consider adding braces around your expression.
   --> tests/html_macro/component-fail.rs:72:24
    |
 72 |     html! { <Child ref=() /> };
    |                        ^^
 
-error: expected a valid Rust identifier
+error: `invalid` doesn't have a value. (hint: set the value to `true` or `false` for boolean attributes)
   --> tests/html_macro/component-fail.rs:73:20
    |
 73 |     html! { <Child invalid-prop-name=0 /> };
-   |                    ^^^^^^^^^^^^^^^^^
+   |                    ^^^^^^^
 
 error: expected an expression following this equals sign
   --> tests/html_macro/component-fail.rs:75:26
@@ -267,6 +256,32 @@ error[E0425]: cannot find value `props` in this scope
 69 |     html! { <Child value=1 ..props /> };
    |                              ^^^^^ not found in this scope
 
+error[E0412]: cannot find type `other` in this scope
+   --> tests/html_macro/component-fail.rs:103:30
+    |
+103 |     html! { <ChildContainer><other /></ChildContainer> };
+    |                              ^^^^^ not found in this scope
+    |
+help: there is an enum variant `yew::virtual_dom::ListenerKind::other`; try using the variant's enum
+    |
+103 |     html! { <ChildContainer><yew::virtual_dom::ListenerKind /></ChildContainer> };
+    |                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+error[E0412]: cannot find type `other` in this scope
+   --> tests/html_macro/component-fail.rs:103:30
+    |
+103 |     html! { <ChildContainer><other /></ChildContainer> };
+    |                              ^^^^^ not found in this scope
+    |
+help: there is an enum variant `yew::virtual_dom::ListenerKind::other`; try using the variant's enum
+    |
+103 |     html! { <ChildContainer><yew::virtual_dom::ListenerKind /></ChildContainer> };
+    |                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+help: you might be missing a type parameter
+    |
+42  | fn compile_fail<other>() {
+    |                +++++++
+
 error[E0308]: mismatched types
   --> tests/html_macro/component-fail.rs:53:22
    |
@@ -346,7 +361,7 @@ error[E0277]: the trait bound `{integer}: IntoPropValue<String>` is not satisfie
              <&'static str as IntoPropValue<Classes>>
              <&'static str as IntoPropValue<Option<AttrValue>>>
              <&'static str as IntoPropValue<Option<String>>>
-           and 15 others
+           and 18 others
 
 error[E0277]: the trait bound `{integer}: IntoPropValue<String>` is not satisfied
   --> tests/html_macro/component-fail.rs:79:34
@@ -359,7 +374,7 @@ error[E0277]: the trait bound `{integer}: IntoPropValue<String>` is not satisfie
              <&'static str as IntoPropValue<Classes>>
              <&'static str as IntoPropValue<Option<AttrValue>>>
              <&'static str as IntoPropValue<Option<String>>>
-           and 15 others
+           and 18 others
 
 error[E0308]: mismatched types
   --> tests/html_macro/component-fail.rs:80:31
@@ -451,12 +466,3 @@ error[E0277]: the trait bound `VChild<Child>: From<VNode>` is not satisfied
     |
     = note: required because of the requirements on the impl of `Into<VChild<Child>>` for `VNode`
 note: required by `into`
-
-error[E0277]: the trait bound `VChild<Child>: From<VNode>` is not satisfied
-   --> tests/html_macro/component-fail.rs:103:30
-    |
-103 |     html! { <ChildContainer><other /></ChildContainer> };
-    |                              ^^^^^ the trait `From<VNode>` is not implemented for `VChild<Child>`
-    |
-    = note: required because of the requirements on the impl of `Into<VChild<Child>>` for `VNode`
-note: required by `into`
diff --git a/packages/yew-macro/tests/html_macro/component-pass.rs b/packages/yew-macro/tests/html_macro/component-pass.rs
index 3d43236802a..0809d0dcc1d 100644
--- a/packages/yew-macro/tests/html_macro/component-pass.rs
+++ b/packages/yew-macro/tests/html_macro/component-pass.rs
@@ -96,7 +96,7 @@ pub struct ChildProperties {
     #[prop_or_default]
     pub string: ::std::string::String,
     #[prop_or_default]
-    pub r#fn: ::std::primitive::i32,
+    pub fun: ::std::primitive::i32,
     pub int: ::std::primitive::i32,
     #[prop_or_default]
     pub opt_str: ::std::option::Option<::std::string::String>,
@@ -161,7 +161,7 @@ mod scoped {
 
 fn compile_pass() {
     ::yew::html! { <Child int=1 /> };
-    ::yew::html! { <Child int=1 r#fn=1 /> };
+    ::yew::html! { <Child int=1 fun=1 /> };
 
     ::yew::html! {
         <>
diff --git a/packages/yew-macro/tests/html_macro/element-fail.stderr b/packages/yew-macro/tests/html_macro/element-fail.stderr
index 0ef61f0b6e5..68edae40900 100644
--- a/packages/yew-macro/tests/html_macro/element-fail.stderr
+++ b/packages/yew-macro/tests/html_macro/element-fail.stderr
@@ -40,11 +40,11 @@ error: this closing tag has no corresponding opening tag
 17 |     html! { <div></span> };
    |                  ^^^^^^^
 
-error: this closing tag has no corresponding opening tag
-  --> tests/html_macro/element-fail.rs:18:20
+error: expected ident
+  --> tests/html_macro/element-fail.rs:18:17
    |
 18 |     html! { <tag-a></tag-b> };
-   |                    ^^^^^^^^
+   |                 ^
 
 error: only one root html element is allowed (hint: you can wrap multiple html elements in a fragment `<></>`)
   --> tests/html_macro/element-fail.rs:21:24
@@ -112,18 +112,6 @@ error: `ref` can only be specified once
 63 |     html! { <input ref={()} ref={()} /> };
    |                    ^^^
 
-error: the tag `<input>` is a void element and cannot have children (hint: rewrite this as `<input/>`)
-  --> tests/html_macro/element-fail.rs:66:13
-   |
-66 |     html! { <input type="text"></input> };
-   |             ^^^^^^^^^^^^^^^^^^^
-
-error: the tag `<iNpUt>` is a void element and cannot have children (hint: rewrite this as `<iNpUt/>`)
-  --> tests/html_macro/element-fail.rs:68:13
-   |
-68 |     html! { <iNpUt type="text"></iNpUt> };
-   |             ^^^^^^^^^^^^^^^^^^^
-
 error: this dynamic tag is missing an expression block defining its value
   --> tests/html_macro/element-fail.rs:71:14
    |
@@ -202,97 +190,115 @@ error: the property value must be either a literal or enclosed in braces. Consid
 92 |     html! { <input string=NotToString /> };
    |                           ^^^^^^^^^^^
 
-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.
-  --> tests/html_macro/element-fail.rs:80:25
+error[E0412]: cannot find type `iNpUt` in this scope
+  --> tests/html_macro/element-fail.rs:68:14
    |
-80 |     html! { <div class={("deprecated", "warning")} /> };
-   |                         ^^^^^^^^^^^^^^^^^^^^^^^^^
+68 |     html! { <iNpUt type="text"></iNpUt> };
+   |              ^^^^^ not found in this scope
+
+error[E0412]: cannot find type `iNpUt` in this scope
+  --> tests/html_macro/element-fail.rs:68:14
    |
-   = note: `#[warn(deprecated)]` on by default
+5  | fn compile_fail() {
+   |                - help: you might be missing a type parameter: `<iNpUt>`
+...
+68 |     html! { <iNpUt type="text"></iNpUt> };
+   |              ^^^^^ not found in this scope
 
-error[E0308]: mismatched types
+error[E0277]: the trait bound `{integer}: IntoPropValue<Option<AttrValue>>` is not satisfied
   --> tests/html_macro/element-fail.rs:36:28
    |
 36 |     html! { <input checked=1 /> };
-   |                            ^ expected `bool`, found integer
+   |                            ^ the trait `IntoPropValue<Option<AttrValue>>` is not implemented for `{integer}`
+   |
+   = help: the following implementations were found:
+             <&'static str as IntoPropValue<AttrValue>>
+             <&'static str as IntoPropValue<Classes>>
+             <&'static str as IntoPropValue<Option<AttrValue>>>
+             <&'static str as IntoPropValue<Option<String>>>
+           and 18 others
 
-error[E0308]: mismatched types
+error[E0277]: the trait bound `Option<bool>: IntoPropValue<Option<AttrValue>>` is not satisfied
   --> tests/html_macro/element-fail.rs:37:29
    |
 37 |     html! { <input checked={Some(false)} /> };
-   |                             ^^^^^^^^^^^ expected `bool`, found enum `Option`
+   |                             ^^^^^^^^^^^ the trait `IntoPropValue<Option<AttrValue>>` is not implemented for `Option<bool>`
    |
-   = note: expected type `bool`
-              found enum `Option<bool>`
+   = help: the following implementations were found:
+             <Option<&'static str> as IntoPropValue<Option<AttrValue>>>
+             <Option<&'static str> as IntoPropValue<Option<String>>>
+             <Option<String> as IntoPropValue<Option<AttrValue>>>
+             <Option<std::rc::Rc<str>> as IntoPropValue<Option<AttrValue>>>
 
-error[E0308]: mismatched types
+error[E0277]: the trait bound `{integer}: IntoPropValue<Option<AttrValue>>` is not satisfied
   --> tests/html_macro/element-fail.rs:38:29
    |
 38 |     html! { <input disabled=1 /> };
-   |                             ^ expected `bool`, found integer
+   |                             ^ the trait `IntoPropValue<Option<AttrValue>>` is not implemented for `{integer}`
+   |
+   = help: the following implementations were found:
+             <&'static str as IntoPropValue<AttrValue>>
+             <&'static str as IntoPropValue<Classes>>
+             <&'static str as IntoPropValue<Option<AttrValue>>>
+             <&'static str as IntoPropValue<Option<String>>>
+           and 18 others
 
-error[E0308]: mismatched types
+error[E0277]: the trait bound `Option<bool>: IntoPropValue<Option<AttrValue>>` is not satisfied
   --> tests/html_macro/element-fail.rs:39:30
    |
 39 |     html! { <input disabled={Some(true)} /> };
-   |                              ^^^^^^^^^^ expected `bool`, found enum `Option`
+   |                              ^^^^^^^^^^ the trait `IntoPropValue<Option<AttrValue>>` is not implemented for `Option<bool>`
    |
-   = note: expected type `bool`
-              found enum `Option<bool>`
+   = help: the following implementations were found:
+             <Option<&'static str> as IntoPropValue<Option<AttrValue>>>
+             <Option<&'static str> as IntoPropValue<Option<String>>>
+             <Option<String> as IntoPropValue<Option<AttrValue>>>
+             <Option<std::rc::Rc<str>> as IntoPropValue<Option<AttrValue>>>
 
-error[E0308]: mismatched types
+error[E0277]: the trait bound `{integer}: IntoPropValue<Option<AttrValue>>` is not satisfied
   --> tests/html_macro/element-fail.rs:40:30
    |
 40 |     html! { <option selected=1 /> };
-   |                              ^ expected `bool`, found integer
+   |                              ^ the trait `IntoPropValue<Option<AttrValue>>` is not implemented for `{integer}`
+   |
+   = help: the following implementations were found:
+             <&'static str as IntoPropValue<AttrValue>>
+             <&'static str as IntoPropValue<Classes>>
+             <&'static str as IntoPropValue<Option<AttrValue>>>
+             <&'static str as IntoPropValue<Option<String>>>
+           and 18 others
 
 error[E0277]: the trait bound `(): IntoPropValue<Option<AttrValue>>` is not satisfied
   --> tests/html_macro/element-fail.rs:43:26
    |
 43 |     html! { <input type={()} /> };
    |                          ^^ the trait `IntoPropValue<Option<AttrValue>>` is not implemented for `()`
-   |
-note: required by `into_prop_value`
-  --> $WORKSPACE/packages/yew/src/html/conversion.rs
-   |
-   |     fn into_prop_value(self) -> T;
-   |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 
 error[E0277]: the trait bound `(): IntoPropValue<Option<AttrValue>>` is not satisfied
   --> tests/html_macro/element-fail.rs:44:27
    |
 44 |     html! { <input value={()} /> };
    |                           ^^ the trait `IntoPropValue<Option<AttrValue>>` is not implemented for `()`
-   |
-note: required by `into_prop_value`
-  --> $WORKSPACE/packages/yew/src/html/conversion.rs
-   |
-   |     fn into_prop_value(self) -> T;
-   |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 
 error[E0277]: the trait bound `(): IntoPropValue<Option<AttrValue>>` is not satisfied
   --> tests/html_macro/element-fail.rs:45:22
    |
 45 |     html! { <a href={()} /> };
    |                      ^^ the trait `IntoPropValue<Option<AttrValue>>` is not implemented for `()`
-   |
-note: required by `into_prop_value`
-  --> $WORKSPACE/packages/yew/src/html/conversion.rs
-   |
-   |     fn into_prop_value(self) -> T;
-   |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 
-error[E0277]: the trait bound `NotToString: IntoPropValue<Option<AttrValue>>` is not satisfied
-  --> tests/html_macro/element-fail.rs:46:28
+error[E0609]: no field `string` on type `InputProps`
+  --> tests/html_macro/element-fail.rs:46:20
    |
 46 |     html! { <input string={NotToString} /> };
-   |                            ^^^^^^^^^^^ the trait `IntoPropValue<Option<AttrValue>>` is not implemented for `NotToString`
+   |                    ^^^^^^ unknown field
    |
-note: required by `into_prop_value`
-  --> $WORKSPACE/packages/yew/src/html/conversion.rs
+   = note: available fields are: `node_ref`, `key`, `children`, `accept`, `alt` ... and 194 others
+
+error[E0599]: no method named `string` found for struct `InputPropsBuilder` in the current scope
+  --> tests/html_macro/element-fail.rs:46:20
    |
-   |     fn into_prop_value(self) -> T;
-   |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+46 |     html! { <input string={NotToString} /> };
+   |                    ^^^^^^ method not found in `InputPropsBuilder<InputPropsBuilderStepPropsBuilder>`
 
 error[E0277]: the trait bound `Option<NotToString>: IntoPropValue<Option<AttrValue>>` is not satisfied
   --> tests/html_macro/element-fail.rs:47:23
@@ -305,11 +311,6 @@ error[E0277]: the trait bound `Option<NotToString>: IntoPropValue<Option<AttrVal
              <Option<&'static str> as IntoPropValue<Option<String>>>
              <Option<String> as IntoPropValue<Option<AttrValue>>>
              <Option<std::rc::Rc<str>> as IntoPropValue<Option<AttrValue>>>
-note: required by `into_prop_value`
-  --> $WORKSPACE/packages/yew/src/html/conversion.rs
-   |
-   |     fn into_prop_value(self) -> T;
-   |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 
 error[E0277]: the trait bound `Option<{integer}>: IntoPropValue<Option<AttrValue>>` is not satisfied
   --> tests/html_macro/element-fail.rs:48:22
@@ -322,155 +323,77 @@ error[E0277]: the trait bound `Option<{integer}>: IntoPropValue<Option<AttrValue
              <Option<&'static str> as IntoPropValue<Option<String>>>
              <Option<String> as IntoPropValue<Option<AttrValue>>>
              <Option<std::rc::Rc<str>> as IntoPropValue<Option<AttrValue>>>
-note: required by `into_prop_value`
-  --> $WORKSPACE/packages/yew/src/html/conversion.rs
-   |
-   |     fn into_prop_value(self) -> T;
-   |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 
 error[E0277]: expected a `Fn<(MouseEvent,)>` closure, found `{integer}`
-   --> tests/html_macro/element-fail.rs:51:28
-    |
-51  |     html! { <input onclick=1 /> };
-    |                            ^ expected an `Fn<(MouseEvent,)>` closure, found `{integer}`
-    |
-    = help: the trait `Fn<(MouseEvent,)>` is not implemented for `{integer}`
-    = note: required because of the requirements on the impl of `IntoEventCallback<MouseEvent>` for `{integer}`
-note: required by a bound in `yew::html::onclick::Wrapper::__macro_new`
-   --> $WORKSPACE/packages/yew/src/html/listener/events.rs
-    |
-    | / impl_short! {
-    | |     onauxclick(MouseEvent)
-    | |     onclick(MouseEvent)
-    | |
-...   |
-    | |     ontransitionstart(TransitionEvent)
-    | | }
-    | |_^ required by this bound in `yew::html::onclick::Wrapper::__macro_new`
-    = note: this error originates in the macro `impl_action` (in Nightly builds, run with -Z macro-backtrace for more info)
+  --> tests/html_macro/element-fail.rs:51:28
+   |
+51 |     html! { <input onclick=1 /> };
+   |                            ^ expected an `Fn<(MouseEvent,)>` closure, found `{integer}`
+   |
+   = help: the trait `Fn<(MouseEvent,)>` is not implemented for `{integer}`
+   = note: required because of the requirements on the impl of `IntoPropValue<Option<yew::Callback<MouseEvent>>>` for `{integer}`
 
 error[E0277]: expected a `Fn<(MouseEvent,)>` closure, found `yew::Callback<String>`
-   --> tests/html_macro/element-fail.rs:52:29
-    |
-52  |     html! { <input onclick={Callback::from(|a: String| ())} /> };
-    |                             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-    |                             |
-    |                             expected an implementor of trait `IntoEventCallback<MouseEvent>`
-    |                             help: consider borrowing here: `&Callback::from(|a: String| ())`
-    |
-    = note: the trait bound `yew::Callback<String>: IntoEventCallback<MouseEvent>` is not satisfied
-    = note: required because of the requirements on the impl of `IntoEventCallback<MouseEvent>` for `yew::Callback<String>`
-note: required by a bound in `yew::html::onclick::Wrapper::__macro_new`
-   --> $WORKSPACE/packages/yew/src/html/listener/events.rs
-    |
-    | / impl_short! {
-    | |     onauxclick(MouseEvent)
-    | |     onclick(MouseEvent)
-    | |
-...   |
-    | |     ontransitionstart(TransitionEvent)
-    | | }
-    | |_^ required by this bound in `yew::html::onclick::Wrapper::__macro_new`
-    = note: this error originates in the macro `impl_action` (in Nightly builds, run with -Z macro-backtrace for more info)
-
-error[E0277]: the trait bound `Option<{integer}>: IntoEventCallback<FocusEvent>` is not satisfied
-   --> tests/html_macro/element-fail.rs:53:29
-    |
-53  |     html! { <input onfocus={Some(5)} /> };
-    |                             ^^^^^^^ the trait `IntoEventCallback<FocusEvent>` is not implemented for `Option<{integer}>`
-    |
-    = help: the following implementations were found:
-              <Option<T> as IntoEventCallback<EVENT>>
-              <Option<yew::Callback<EVENT>> as IntoEventCallback<EVENT>>
-note: required by a bound in `yew::html::onfocus::Wrapper::__macro_new`
-   --> $WORKSPACE/packages/yew/src/html/listener/events.rs
-    |
-    | / impl_short! {
-    | |     onauxclick(MouseEvent)
-    | |     onclick(MouseEvent)
-    | |
-...   |
-    | |     ontransitionstart(TransitionEvent)
-    | | }
-    | |_^ required by this bound in `yew::html::onfocus::Wrapper::__macro_new`
-    = note: this error originates in the macro `impl_action` (in Nightly builds, run with -Z macro-backtrace for more info)
-
-error[E0277]: the trait bound `(): IntoPropValue<yew::NodeRef>` is not satisfied
-  --> tests/html_macro/element-fail.rs:56:25
+  --> tests/html_macro/element-fail.rs:52:29
    |
-56 |     html! { <input ref={()} /> };
-   |                         ^^ the trait `IntoPropValue<yew::NodeRef>` is not implemented for `()`
+52 |     html! { <input onclick={Callback::from(|a: String| ())} /> };
+   |                             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ expected an `Fn<(MouseEvent,)>` closure, found `yew::Callback<String>`
+   |
+   = help: the trait `Fn<(MouseEvent,)>` is not implemented for `yew::Callback<String>`
+   = note: required because of the requirements on the impl of `IntoPropValue<Option<yew::Callback<MouseEvent>>>` for `yew::Callback<String>`
+
+error[E0277]: expected a `Fn<(FocusEvent,)>` closure, found `Option<{integer}>`
+  --> tests/html_macro/element-fail.rs:53:29
+   |
+53 |     html! { <input onfocus={Some(5)} /> };
+   |                             ^^^^^^^ expected an `Fn<(FocusEvent,)>` closure, found `Option<{integer}>`
    |
-note: required by `into_prop_value`
-  --> $WORKSPACE/packages/yew/src/html/conversion.rs
+   = help: the trait `Fn<(FocusEvent,)>` is not implemented for `Option<{integer}>`
+   = note: required because of the requirements on the impl of `IntoPropValue<Option<yew::Callback<FocusEvent>>>` for `Option<{integer}>`
+
+error[E0308]: mismatched types
+  --> tests/html_macro/element-fail.rs:56:25
    |
-   |     fn into_prop_value(self) -> T;
-   |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+56 |     html! { <input ref={()} /> };
+   |                         ^^ expected struct `yew::NodeRef`, found `()`
 
-error[E0277]: the trait bound `Option<yew::NodeRef>: IntoPropValue<yew::NodeRef>` is not satisfied
+error[E0308]: mismatched types
   --> tests/html_macro/element-fail.rs:57:25
    |
 57 |     html! { <input ref={Some(NodeRef::default())} /> };
-   |                         ^^^^^^^^^^^^^^^^^^^^^^^^ the trait `IntoPropValue<yew::NodeRef>` is not implemented for `Option<yew::NodeRef>`
+   |                         ^^^^^^^^^^^^^^^^^^^^^^^^ expected struct `yew::NodeRef`, found enum `Option`
    |
-   = help: the following implementations were found:
-             <Option<&'static str> as IntoPropValue<Option<AttrValue>>>
-             <Option<&'static str> as IntoPropValue<Option<String>>>
-             <Option<String> as IntoPropValue<Option<AttrValue>>>
-             <Option<std::rc::Rc<str>> as IntoPropValue<Option<AttrValue>>>
-note: required by `into_prop_value`
-  --> $WORKSPACE/packages/yew/src/html/conversion.rs
-   |
-   |     fn into_prop_value(self) -> T;
-   |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   = note: expected struct `yew::NodeRef`
+                found enum `Option<yew::NodeRef>`
 
 error[E0277]: expected a `Fn<(MouseEvent,)>` closure, found `yew::Callback<String>`
-   --> tests/html_macro/element-fail.rs:58:29
-    |
-58  |     html! { <input onclick={Callback::from(|a: String| ())} /> };
-    |                             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-    |                             |
-    |                             expected an implementor of trait `IntoEventCallback<MouseEvent>`
-    |                             help: consider borrowing here: `&Callback::from(|a: String| ())`
-    |
-    = note: the trait bound `yew::Callback<String>: IntoEventCallback<MouseEvent>` is not satisfied
-    = note: required because of the requirements on the impl of `IntoEventCallback<MouseEvent>` for `yew::Callback<String>`
-note: required by a bound in `yew::html::onclick::Wrapper::__macro_new`
-   --> $WORKSPACE/packages/yew/src/html/listener/events.rs
-    |
-    | / impl_short! {
-    | |     onauxclick(MouseEvent)
-    | |     onclick(MouseEvent)
-    | |
-...   |
-    | |     ontransitionstart(TransitionEvent)
-    | | }
-    | |_^ required by this bound in `yew::html::onclick::Wrapper::__macro_new`
-    = note: this error originates in the macro `impl_action` (in Nightly builds, run with -Z macro-backtrace for more info)
-
-error[E0277]: the trait bound `NotToString: IntoPropValue<Option<AttrValue>>` is not satisfied
-  --> tests/html_macro/element-fail.rs:60:28
+  --> tests/html_macro/element-fail.rs:58:29
+   |
+58 |     html! { <input onclick={Callback::from(|a: String| ())} /> };
+   |                             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ expected an `Fn<(MouseEvent,)>` closure, found `yew::Callback<String>`
+   |
+   = help: the trait `Fn<(MouseEvent,)>` is not implemented for `yew::Callback<String>`
+   = note: required because of the requirements on the impl of `IntoPropValue<Option<yew::Callback<MouseEvent>>>` for `yew::Callback<String>`
+
+error[E0609]: no field `string` on type `InputProps`
+  --> tests/html_macro/element-fail.rs:60:20
    |
 60 |     html! { <input string={NotToString} /> };
-   |                            ^^^^^^^^^^^ the trait `IntoPropValue<Option<AttrValue>>` is not implemented for `NotToString`
+   |                    ^^^^^^ unknown field
    |
-note: required by `into_prop_value`
-  --> $WORKSPACE/packages/yew/src/html/conversion.rs
+   = note: available fields are: `node_ref`, `key`, `children`, `accept`, `alt` ... and 194 others
+
+error[E0599]: no method named `string` found for struct `InputPropsBuilder` in the current scope
+  --> tests/html_macro/element-fail.rs:60:20
    |
-   |     fn into_prop_value(self) -> T;
-   |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+60 |     html! { <input string={NotToString} /> };
+   |                    ^^^^^^ method not found in `InputPropsBuilder<InputPropsBuilderStepPropsBuilder>`
 
-error[E0277]: the trait bound `(): IntoPropValue<yew::NodeRef>` is not satisfied
+error[E0308]: mismatched types
   --> tests/html_macro/element-fail.rs:62:25
    |
 62 |     html! { <input ref={()} /> };
-   |                         ^^ the trait `IntoPropValue<yew::NodeRef>` is not implemented for `()`
-   |
-note: required by `into_prop_value`
-  --> $WORKSPACE/packages/yew/src/html/conversion.rs
-   |
-   |     fn into_prop_value(self) -> T;
-   |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   |                         ^^ expected struct `yew::NodeRef`, found `()`
 
 error[E0277]: the trait bound `Cow<'static, str>: From<{integer}>` is not satisfied
    --> tests/html_macro/element-fail.rs:77:15
@@ -486,3 +409,9 @@ error[E0277]: the trait bound `Cow<'static, str>: From<{integer}>` is not satisf
             and 14 others
     = note: required because of the requirements on the impl of `Into<Cow<'static, str>>` for `{integer}`
 note: required by `into`
+
+error[E0277]: the trait bound `(&str, &str): IntoPropValue<Option<AttrValue>>` is not satisfied
+  --> tests/html_macro/element-fail.rs:80:25
+   |
+80 |     html! { <div class={("deprecated", "warning")} /> };
+   |                         ^^^^^^^^^^^^^^^^^^^^^^^^^ the trait `IntoPropValue<Option<AttrValue>>` is not implemented for `(&str, &str)`
diff --git a/packages/yew-macro/tests/html_macro/html-element-pass.rs b/packages/yew-macro/tests/html_macro/html-element-pass.rs
index c85989c96c9..2ee8c96650d 100644
--- a/packages/yew-macro/tests/html_macro/html-element-pass.rs
+++ b/packages/yew-macro/tests/html_macro/html-element-pass.rs
@@ -50,41 +50,23 @@ fn compile_pass() {
 
     ::yew::html! {
         <div>
-            <div data-key="abc"></div>
+            <div class="abc"></div>
             <div ref={parent_ref} class="parent">
-                <span class="child" value="anything"></span>
+                <span class="child"></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" />
+                <textarea>{"write a story"}</textarea>
                 <select name="status">
                     <option selected=true disabled=false value="">{"Selected"}</option>
                     <option selected=false disabled=true value="">{"Unselected"}</option>
                 </select>
                 <video autoplay=true controls=true />
             </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={::yew::classes!("avatar", "hidden")} src="http://pic.com" />
             <img class="avatar hidden" />
-            <button onclick={&onclick} {onclick} />
+            <button {onclick} />
             <a href="http://google.com" />
-            <custom-tag-a>
-                <custom-tag-b />
-            </custom-tag-a>
             <@{dyn_tag()}>
                 <@{::std::iter::Iterator::next(&mut extra_tags_iter).unwrap()} class="extra-a"/>
                 <@{::std::iter::Iterator::next(&mut extra_tags_iter).unwrap()} class="extra-b"/>
@@ -101,7 +83,7 @@ fn compile_pass() {
 
             <a href={::std::option::Option::Some(::yew::virtual_dom::AttrValue::Static("http://google.com"))} media={::std::clone::Clone::clone(&attr_val_none)} />
             <track kind={::std::option::Option::Some(::yew::virtual_dom::AttrValue::Static("subtitles"))} src={::std::clone::Clone::clone(&attr_val_none)} />
-            <track kind={::std::option::Option::Some(::yew::virtual_dom::AttrValue::Static("5"))} mixed="works" />
+            <track kind={::std::option::Option::Some(::yew::virtual_dom::AttrValue::Static("5"))} />
             <input value={::std::option::Option::Some(::yew::virtual_dom::AttrValue::Static("value"))}
                 onblur={::std::option::Option::Some(<::yew::Callback<::yew::FocusEvent> as ::std::convert::From<_>>::from(|_| ()))}
             />
@@ -115,8 +97,8 @@ fn compile_pass() {
     ::yew::html! { <div>{children}</div> };
 
     // handle misleading angle brackets
-    ::yew::html! { <div data-val={<::std::string::String as ::std::default::Default>::default()}></div> };
-    ::yew::html! { <div><a data-val={<::std::string::String as ::std::default::Default>::default()} /></div> };
+    ::yew::html! { <div id={<::std::string::String as ::std::default::Default>::default()}></div> };
+    ::yew::html! { <div><a class={<::std::string::String as ::std::default::Default>::default()} /></div> };
 }
 
 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 2c24fca6132..42d06bdb09e 100644
--- a/packages/yew-macro/tests/html_macro/list-fail.stderr
+++ b/packages/yew-macro/tests/html_macro/list-fail.stderr
@@ -1,65 +1,65 @@
 error: this opening fragment has no corresponding closing fragment
- --> $DIR/list-fail.rs:5:13
+ --> tests/html_macro/list-fail.rs:5:13
   |
 5 |     html! { <> };
   |             ^^
 
 error: this opening fragment has no corresponding closing fragment
- --> $DIR/list-fail.rs:6:15
+ --> tests/html_macro/list-fail.rs:6:15
   |
 6 |     html! { <><> };
   |               ^^
 
 error: this opening fragment has no corresponding closing fragment
- --> $DIR/list-fail.rs:7:13
+ --> tests/html_macro/list-fail.rs:7:13
   |
 7 |     html! { <><></> };
   |             ^^
 
 error: this closing fragment has no corresponding opening fragment
-  --> $DIR/list-fail.rs:10:13
+  --> tests/html_macro/list-fail.rs:10:13
    |
 10 |     html! { </> };
    |             ^^^
 
 error: this closing fragment has no corresponding opening fragment
-  --> $DIR/list-fail.rs:11:13
+  --> tests/html_macro/list-fail.rs:11:13
    |
 11 |     html! { </></> };
    |             ^^^
 
 error: only one root html element is allowed (hint: you can wrap multiple html elements in a fragment `<></>`)
-  --> $DIR/list-fail.rs:14:18
+  --> tests/html_macro/list-fail.rs:14:18
    |
 14 |     html! { <></><></> };
    |                  ^^^^^
 
 error: expected a valid html element
-  --> $DIR/list-fail.rs:16:15
+  --> tests/html_macro/list-fail.rs:16:15
    |
 16 |     html! { <>invalid</> };
    |               ^^^^^^^
 
 error: expected an expression following this equals sign
-  --> $DIR/list-fail.rs:18:17
+  --> tests/html_macro/list-fail.rs:18:17
    |
 18 |     html! { <key=></> };
    |                 ^^
 
 error: the property value must be either a literal or enclosed in braces. Consider adding braces around your expression.
-  --> $DIR/list-fail.rs:20:18
+  --> tests/html_macro/list-fail.rs:20:18
    |
 20 |     html! { <key="key".to_string()></key> };
    |                  ^^^^^^^^^^^^^^^^^
 
 error: only a single `key` prop is allowed on a fragment
-  --> $DIR/list-fail.rs:23:30
+  --> tests/html_macro/list-fail.rs:23:30
    |
 23 |     html! { <key="first key" key="second key" /> };
    |                              ^^^
 
 error: fragments only accept the `key` prop
-  --> $DIR/list-fail.rs:25:14
+  --> tests/html_macro/list-fail.rs:25:14
    |
 25 |     html! { <some_attr="test"></> };
    |              ^^^^^^^^^
diff --git a/packages/yew-macro/tests/html_macro/svg-pass.rs b/packages/yew-macro/tests/html_macro/svg-pass.rs
index eb1bb3a0963..cee63ad74c8 100644
--- a/packages/yew-macro/tests/html_macro/svg-pass.rs
+++ b/packages/yew-macro/tests/html_macro/svg-pass.rs
@@ -41,29 +41,29 @@ fn main() {
     // See: #1771
     ::yew::html! {
         <a class="btn btn-primary" href="https://example.org/">
-            <svg class="bi" fill="currentColor">
-                <use href="/bootstrap-icons.svg#wrench"/>
-            </svg>
+            <@{"svg"} class="bi" fill="currentColor">
+                <@{"use"} href="/bootstrap-icons.svg#wrench"/>
+            </@>
             <span>{"Go to example.org"}</span>
         </a>
     };
 
     // some general SVG
     ::yew::html! {
-        <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>
+        <@{"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"
+            </@>
+            <@{"circle"} cx="71" cy="99" r="5" fill="white" stroke="black" /> // fill-opacity="0.75" 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"/>
+                </@>
+            </@>
+        </@>
     };
 }
diff --git a/packages/yew-macro/tests/props_macro/props-pass.rs b/packages/yew-macro/tests/props_macro/props-pass.rs
index d5b91abe0cd..aee020f019c 100644
--- a/packages/yew-macro/tests/props_macro/props-pass.rs
+++ b/packages/yew-macro/tests/props_macro/props-pass.rs
@@ -56,7 +56,7 @@ fn compile_pass() {
     ::yew::props!(Props { a, b });
     ::yew::props!(RawIdentProps { r#true: 5 });
     let (r#true, r#pointless_raw_name) = (3, 5);
-    ::yew::props!(RawIdentProps { r#true, r#pointless_raw_name });
+    ::yew::props!(RawIdentProps { r#true, pointless_raw_name });
 }
 
 fn main() {}
diff --git a/packages/yew/src/dom_bundle/blist.rs b/packages/yew/src/dom_bundle/blist.rs
index 21e66fc60ec..06c938b4231 100644
--- a/packages/yew/src/dom_bundle/blist.rs
+++ b/packages/yew/src/dom_bundle/blist.rs
@@ -624,12 +624,12 @@ mod layout_tests_keys {
                     <>
                         <key="VList">
                             <i key="i"></i>
-                            <e key="e"></e>
+                            <b key="e"></b>
                         </>
                         <p key="p"></p>
                     </>
                 },
-                expected: "<i></i><e></e><p></p>",
+                expected: "<i></i><b></b><p></p>",
             },
         ]);
 
@@ -639,10 +639,10 @@ mod layout_tests_keys {
                 node: html! {
                     <>
                         <i key="i"></i>
-                        <e key="e"></e>
+                        <b key="e"></b>
                     </>
                 },
-                expected: "<i></i><e></e>",
+                expected: "<i></i><b></b>",
             },
             TestLayout {
                 name: "No matches - after",
@@ -662,21 +662,21 @@ mod layout_tests_keys {
                 node: html! {
                     <>
                         <i key="i"></i>
-                        <e key="e"></e>
+                        <b key="e"></b>
                     </>
                 },
-                expected: "<i></i><e></e>",
+                expected: "<i></i><b></b>",
             },
             TestLayout {
                 name: "Append - after",
                 node: html! {
                     <>
                         <i key="i"></i>
-                        <e key="e"></e>
+                        <b key="e"></b>
                         <p key="p"></p>
                     </>
                 },
-                expected: "<i></i><e></e><p></p>",
+                expected: "<i></i><b></b><p></p>",
             },
         ]);
 
@@ -686,10 +686,10 @@ mod layout_tests_keys {
                 node: html! {
                     <>
                         <i key="i"></i>
-                        <e key="e"></e>
+                        <b key="e"></b>
                     </>
                 },
-                expected: "<i></i><e></e>",
+                expected: "<i></i><b></b>",
             },
             TestLayout {
                 name: "Prepend - after",
@@ -697,10 +697,10 @@ mod layout_tests_keys {
                     <>
                         <p key="p"></p>
                         <i key="i"></i>
-                        <e key="e"></e>
+                        <b key="e"></b>
                     </>
                 },
-                expected: "<p></p><i></i><e></e>",
+                expected: "<p></p><i></i><b></b>",
             },
         ]);
 
@@ -710,21 +710,21 @@ mod layout_tests_keys {
                 node: html! {
                     <>
                         <i key="i"></i>
-                        <e key="e"></e>
+                        <b key="e"></b>
                         <p key="p"></p>
                     </>
                 },
-                expected: "<i></i><e></e><p></p>",
+                expected: "<i></i><b></b><p></p>",
             },
             TestLayout {
                 name: "Delete first - after",
                 node: html! {
                     <>
-                        <e key="e"></e>
+                        <b key="e"></b>
                         <p key="p"></p>
                     </>
                 },
-                expected: "<e></e><p></p>",
+                expected: "<b></b><p></p>",
             },
         ]);
 
@@ -734,21 +734,21 @@ mod layout_tests_keys {
                 node: html! {
                     <>
                         <i key="i"></i>
-                        <e key="e"></e>
+                        <b key="e"></b>
                         <p key="p"></p>
                     </>
                 },
-                expected: "<i></i><e></e><p></p>",
+                expected: "<i></i><b></b><p></p>",
             },
             TestLayout {
                 name: "Delete last - after",
                 node: html! {
                     <>
                         <i key="i"></i>
-                        <e key="e"></e>
+                        <b key="e"></b>
                     </>
                 },
-                expected: "<i></i><e></e>",
+                expected: "<i></i><b></b>",
             },
         ]);
 
@@ -758,22 +758,22 @@ mod layout_tests_keys {
                 node: html! {
                     <>
                         <i key="i"></i>
-                        <e key="e"></e>
+                        <b key="e"></b>
                         <p key="p"></p>
                     </>
                 },
-                expected: "<i></i><e></e><p></p>",
+                expected: "<i></i><b></b><p></p>",
             },
             TestLayout {
                 name: "Delete last - after",
                 node: html! {
                     <>
                         <List key="i"><i/></List>
-                        <List key="e"><e/></List>
+                        <List key="e"><b/></List>
                         <List key="a"><a/></List>
                     </>
                 },
-                expected: "<i></i><e></e><a></a>",
+                expected: "<i></i><b></b><a></a>",
             },
         ]);
 
@@ -783,24 +783,24 @@ mod layout_tests_keys {
                 node: html! {
                     <>
                         <i key="i"></i>
-                        <e key="e"></e>
+                        <b key="e"></b>
                         <p key="p"></p>
                         <a key="a"></a>
                     </>
                 },
-                expected: "<i></i><e></e><p></p><a></a>",
+                expected: "<i></i><b></b><p></p><a></a>",
             },
             TestLayout {
                 name: "Delete middle - after",
                 node: html! {
                     <>
                         <i key="i"></i>
-                        <e key="e2"></e>
+                        <b key="e2"></b>
                         <p key="p2"></p>
                         <a key="a"></a>
                     </>
                 },
-                expected: "<i></i><e></e><p></p><a></a>",
+                expected: "<i></i><b></b><p></p><a></a>",
             },
         ]);
 
@@ -810,24 +810,24 @@ mod layout_tests_keys {
                 node: html! {
                     <>
                         <i key="i"></i>
-                        <e key="e"></e>
+                        <b key="e"></b>
                         <p key="p"></p>
                         <a key="a"></a>
                     </>
                 },
-                expected: "<i></i><e></e><p></p><a></a>",
+                expected: "<i></i><b></b><p></p><a></a>",
             },
             TestLayout {
                 name: "Delete middle and change node type- after",
                 node: html! {
                     <>
                         <List key="i2"><i/></List>
-                        <e key="e"></e>
+                        <b key="e"></b>
                         <List key="p"><p/></List>
                         <List key="a2"><a/></List>
                     </>
                 },
-                expected: "<i></i><e></e><p></p><a></a>",
+                expected: "<i></i><b></b><p></p><a></a>",
             },
         ]);
 
@@ -837,12 +837,12 @@ mod layout_tests_keys {
                 node: html! {
                     <>
                         <i key="i"></i>
-                        <e key="e"></e>
+                        <b key="e"></b>
                         <p key="p"></p>
                         <u key="u"></u>
                     </>
                 },
-                expected: "<i></i><e></e><p></p><u></u>",
+                expected: "<i></i><b></b><p></p><u></u>",
             },
             TestLayout {
                 name: "Reverse - after",
@@ -850,11 +850,11 @@ mod layout_tests_keys {
                     <>
                         <u key="u"></u>
                         <p key="p"></p>
-                        <e key="e"></e>
+                        <b key="e"></b>
                         <i key="i"></i>
                     </>
                 },
-                expected: "<u></u><p></p><e></e><i></i>",
+                expected: "<u></u><p></p><b></b><i></i>",
             },
         ]);
 
@@ -867,14 +867,14 @@ mod layout_tests_keys {
                         <key="i1"></>
                         <key="i2"></>
                         <key="i3"></>
-                        <e key="e"></e>
+                        <b key="e"></b>
                         <key="yo">
                             <p key="p"></p>
                         </>
                         <u key="u"></u>
                     </>
                 },
-                expected: "<i></i><e></e><p></p><u></u>",
+                expected: "<i></i><b></b><p></p><u></u>",
             },
             TestLayout {
                 name: "Reverse and change node type - after",
@@ -882,11 +882,11 @@ mod layout_tests_keys {
                     <>
                         <List key="u"><u/></List>
                         <List key="p"><p/></List>
-                        <List key="e"><e/></List>
+                        <List key="e"><b/></List>
                         <List key="i"><i/></List>
                     </>
                 },
-                expected: "<u></u><p></p><e></e><i></i>",
+                expected: "<u></u><p></p><b></b><i></i>",
             },
         ]);
 
@@ -896,26 +896,26 @@ mod layout_tests_keys {
                 node: html! {
                     <>
                         <i key="1"></i>
-                        <e key="2"></e>
+                        <b key="2"></b>
                         <p key="3"></p>
                         <a key="4"></a>
                         <u key="5"></u>
                     </>
                 },
-                expected: "<i></i><e></e><p></p><a></a><u></u>",
+                expected: "<i></i><b></b><p></p><a></a><u></u>",
             },
             TestLayout {
                 name: "Swap 1&2 - after",
                 node: html! {
                     <>
-                        <e key="2"></e>
+                        <b key="2"></b>
                         <i key="1"></i>
                         <p key="3"></p>
                         <a key="4"></a>
                         <u key="5"></u>
                     </>
                 },
-                expected: "<e></e><i></i><p></p><a></a><u></u>",
+                expected: "<b></b><i></i><p></p><a></a><u></u>",
             },
         ]);
 
@@ -925,26 +925,26 @@ mod layout_tests_keys {
                 node: html! {
                     <>
                         <i key="1"></i>
-                        <e key="2"></e>
+                        <b key="2"></b>
                         <p key="3"></p>
                         <a key="4"></a>
                         <u key="5"></u>
                     </>
                 },
-                expected: "<i></i><e></e><p></p><a></a><u></u>",
+                expected: "<i></i><b></b><p></p><a></a><u></u>",
             },
             TestLayout {
                 name: "Swap 1&2 and change node type - after",
                 node: html! {
                     <>
-                        <List key="2"><e/></List>
+                        <List key="2"><b/></List>
                         <List key="1"><i/></List>
                         <List key="3"><p/></List>
                         <List key="4"><a/></List>
                         <List key="5"><u/></List>
                     </>
                 },
-                expected: "<e></e><i></i><p></p><a></a><u></u>",
+                expected: "<b></b><i></i><p></p><a></a><u></u>",
             },
         ]);
 
@@ -954,33 +954,33 @@ mod layout_tests_keys {
                 node: html! {
                     <>
                         <key="1">
-                            <e key="e"></e>
+                            <b key="e"></b>
                             <p key="p"></p>
                             <a key="a"></a>
                             <u key="u"></u>
                         </>
                         <key="2">
-                            <e key="e"></e>
+                            <b key="e"></b>
                             <p key="p"></p>
                             <a key="a"></a>
                             <u key="u"></u>
                         </>
                     </>
                 },
-                expected: "<e></e><p></p><a></a><u></u><e></e><p></p><a></a><u></u>",
+                expected: "<b></b><p></p><a></a><u></u><b></b><p></p><a></a><u></u>",
             },
             TestLayout {
                 name: "Swap 4&5 - after",
                 node: html! {
                     <>
-                        <e key="1"></e>
+                        <b key="1"></b>
                         <key="2">
                             <p key="p"></p>
                             <i key="i"></i>
                         </>
                     </>
                 },
-                expected: "<e></e><p></p><i></i>",
+                expected: "<b></b><p></p><i></i>",
             },
         ]);
 
@@ -990,26 +990,26 @@ mod layout_tests_keys {
                 node: html! {
                     <>
                         <i key="1"></i>
-                        <e key="2"></e>
+                        <b key="2"></b>
                         <p key="3"></p>
                         <a key="4"></a>
                         <u key="5"></u>
                     </>
                 },
-                expected: "<i></i><e></e><p></p><a></a><u></u>",
+                expected: "<i></i><b></b><p></p><a></a><u></u>",
             },
             TestLayout {
                 name: "Swap 4&5 - after",
                 node: html! {
                     <>
                         <i key="1"></i>
-                        <e key="2"></e>
+                        <b key="2"></b>
                         <p key="3"></p>
                         <u key="5"></u>
                         <a key="4"></a>
                     </>
                 },
-                expected: "<i></i><e></e><p></p><u></u><a></a>",
+                expected: "<i></i><b></b><p></p><u></u><a></a>",
             },
         ]);
 
@@ -1019,26 +1019,26 @@ mod layout_tests_keys {
                 node: html! {
                     <>
                         <i key="1"></i>
-                        <e key="2"></e>
+                        <b key="2"></b>
                         <p key="3"></p>
                         <a key="4"></a>
                         <u key="5"></u>
                     </>
                 },
-                expected: "<i></i><e></e><p></p><a></a><u></u>",
+                expected: "<i></i><b></b><p></p><a></a><u></u>",
             },
             TestLayout {
                 name: "Swap 1&5 - after",
                 node: html! {
                     <>
                         <u key="5"></u>
-                        <e key="2"></e>
+                        <b key="2"></b>
                         <p key="3"></p>
                         <a key="4"></a>
                         <i key="1"></i>
                     </>
                 },
-                expected: "<u></u><e></e><p></p><a></a><i></i>",
+                expected: "<u></u><b></b><p></p><a></a><i></i>",
             },
         ]);
 
@@ -1048,13 +1048,13 @@ mod layout_tests_keys {
                 node: html! {
                     <>
                         <i key="1"></i>
-                        <e key="2"></e>
+                        <b key="2"></b>
                         <p key="3"></p>
                         <a key="4"></a>
                         <u key="5"></u>
                     </>
                 },
-                expected: "<i></i><e></e><p></p><a></a><u></u>",
+                expected: "<i></i><b></b><p></p><a></a><u></u>",
             },
             TestLayout {
                 name: "Move 2 after 4 - after",
@@ -1063,40 +1063,11 @@ mod layout_tests_keys {
                         <i key="1"></i>
                         <p key="3"></p>
                         <a key="4"></a>
-                        <e key="2"></e>
+                        <b key="2"></b>
                         <u key="5"></u>
                     </>
                 },
-                expected: "<i></i><p></p><a></a><e></e><u></u>",
-            },
-        ]);
-
-        layouts.extend(vec![
-            TestLayout {
-                name: "Swap 1,2 <-> 3,4 - before",
-                node: html! {
-                    <>
-                        <i key="1"></i>
-                        <e key="2"></e>
-                        <p key="3"></p>
-                        <a key="4"></a>
-                        <u key="5"></u>
-                    </>
-                },
-                expected: "<i></i><e></e><p></p><a></a><u></u>",
-            },
-            TestLayout {
-                name: "Swap 1,2 <-> 3,4 - after",
-                node: html! {
-                    <>
-                        <p key="3"></p>
-                        <a key="4"></a>
-                        <i key="1"></i>
-                        <e key="2"></e>
-                        <u key="5"></u>
-                    </>
-                },
-                expected: "<p></p><a></a><i></i><e></e><u></u>",
+                expected: "<i></i><p></p><a></a><b></b><u></u>",
             },
         ]);
 
@@ -1107,7 +1078,7 @@ mod layout_tests_keys {
                     <>
                         <key="1">
                             <i></i>
-                            <e></e>
+                            <b></b>
                         </>
                         <key="2">
                             <a></a>
@@ -1115,7 +1086,7 @@ mod layout_tests_keys {
                         </>
                     </>
                 },
-                expected: "<i></i><e></e><a></a><u></u>",
+                expected: "<i></i><b></b><a></a><u></u>",
             },
             TestLayout {
                 name: "Swap lists - after",
@@ -1127,11 +1098,11 @@ mod layout_tests_keys {
                         </>
                         <key="1">
                             <i></i>
-                            <e></e>
+                            <b></b>
                         </>
                     </>
                 },
-                expected: "<a></a><u></u><i></i><e></e>",
+                expected: "<a></a><u></u><i></i><b></b>",
             },
         ]);
 
@@ -1142,7 +1113,7 @@ mod layout_tests_keys {
                     <>
                         <key="1">
                             <i></i>
-                            <e></e>
+                            <b></b>
                         </>
                         <p key="between"></p>
                         <key="2">
@@ -1151,7 +1122,7 @@ mod layout_tests_keys {
                         </>
                     </>
                 },
-                expected: "<i></i><e></e><p></p><a></a><u></u>",
+                expected: "<i></i><b></b><p></p><a></a><u></u>",
             },
             TestLayout {
                 name: "Swap lists with in-between - after",
@@ -1164,11 +1135,11 @@ mod layout_tests_keys {
                         <p key="between"></p>
                         <key="1">
                             <i></i>
-                            <e></e>
+                            <b></b>
                         </>
                     </>
                 },
-                expected: "<a></a><u></u><p></p><i></i><e></e>",
+                expected: "<a></a><u></u><p></p><i></i><b></b>",
             },
         ]);
 
diff --git a/packages/yew/src/dom_bundle/btag/mod.rs b/packages/yew/src/dom_bundle/btag/mod.rs
index 1d172c1f87d..e1af8f0fce0 100644
--- a/packages/yew/src/dom_bundle/btag/mod.rs
+++ b/packages/yew/src/dom_bundle/btag/mod.rs
@@ -7,7 +7,7 @@ pub use listeners::set_event_bubbling;
 
 use super::{insert_node, BList, BNode, DomBundle, Reconcilable};
 use crate::html::AnyScope;
-use crate::virtual_dom::vtag::{InputFields, VTagInner, Value, SVG_NAMESPACE};
+use crate::virtual_dom::vtag::{InputFields, VTagInner, SVG_NAMESPACE};
 use crate::virtual_dom::{Attributes, Key, VTag};
 use crate::NodeRef;
 use gloo::console;
@@ -16,7 +16,7 @@ use listeners::ListenerRegistration;
 use std::ops::DerefMut;
 use std::{borrow::Cow, hint::unreachable_unchecked};
 use wasm_bindgen::JsCast;
-use web_sys::{Element, HtmlTextAreaElement as TextAreaElement};
+use web_sys::{Element};
 
 /// Applies contained changes to DOM [web_sys::Element]
 trait Apply {
@@ -38,13 +38,6 @@ enum BTagInner {
     /// Fields specific to
     /// [InputElement](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input)
     Input(InputFields),
-    /// Fields specific to
-    /// [TextArea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea)
-    Textarea {
-        /// Contains a value of an
-        /// [TextArea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea)
-        value: Value<TextAreaElement>,
-    },
     /// Fields for all other kinds of [VTag]s
     Other {
         /// A tag of the element.
@@ -126,10 +119,6 @@ impl Reconcilable for VTag {
                 let f = f.apply(el.unchecked_ref());
                 BTagInner::Input(f)
             }
-            VTagInner::Textarea { value } => {
-                let value = value.apply(el.unchecked_ref());
-                BTagInner::Textarea { value }
-            }
             VTagInner::Other { children, tag } => {
                 let (_, child_bundle) = children.attach(parent_scope, &el, NodeRef::default());
                 BTagInner::Other { child_bundle, tag }
@@ -165,7 +154,6 @@ impl Reconcilable for VTag {
             BNode::Tag(ex) if self.key == ex.key => {
                 if match (&self.inner, &ex.inner) {
                     (VTagInner::Input(_), BTagInner::Input(_)) => true,
-                    (VTagInner::Textarea { .. }, BTagInner::Textarea { .. }) => true,
                     (VTagInner::Other { tag: l, .. }, BTagInner::Other { tag: r, .. })
                         if l == r =>
                     {
@@ -196,9 +184,6 @@ impl Reconcilable for VTag {
             (VTagInner::Input(new), BTagInner::Input(old)) => {
                 new.apply_diff(el.unchecked_ref(), old);
             }
-            (VTagInner::Textarea { value: new }, BTagInner::Textarea { value: old }) => {
-                new.apply_diff(el.unchecked_ref(), old);
-            }
             (
                 VTagInner::Other { children: new, .. },
                 BTagInner::Other {
@@ -268,7 +253,6 @@ impl BTag {
     fn tag(&self) -> &str {
         match &self.inner {
             BTagInner::Input { .. } => "input",
-            BTagInner::Textarea { .. } => "textarea",
             BTagInner::Other { tag, .. } => tag.as_ref(),
         }
     }
@@ -299,17 +283,11 @@ mod tests {
 
     #[test]
     fn it_compares_tags() {
-        let a = html! {
-            <div></div>
-        };
+        let a = VNode::from(VTag::new("div"));
 
-        let b = html! {
-            <div></div>
-        };
+        let b = VNode::from(VTag::new("div"));
 
-        let c = html! {
-            <p></p>
-        };
+        let c = VNode::from(VTag::new("p"));
 
         assert_eq!(a, b);
         assert_ne!(a, c);
@@ -317,53 +295,47 @@ mod tests {
 
     #[test]
     fn it_compares_text() {
-        let a = html! {
-            <div>{ "correct" }</div>
-        };
-
-        let b = html! {
-            <div>{ "correct" }</div>
-        };
-
-        let c = html! {
-            <div>{ "incorrect" }</div>
-        };
-
-        assert_eq!(a, b);
-        assert_ne!(a, c);
-    }
-
-    #[test]
-    fn it_compares_attributes_static() {
-        let a = html! {
-            <div a="test"></div>
-        };
-
-        let b = html! {
-            <div a="test"></div>
-        };
-
-        let c = html! {
-            <div a="fail"></div>
-        };
+        let a = VNode::from({
+            let mut tag = VTag::new("div");
+            tag.add_children(vec![html! { "correct" }]);
+            tag
+        });
+
+        let b = VNode::from({
+            let mut tag = VTag::new("div");
+            tag.add_children(vec![html! { "correct" }]);
+            tag
+        });
+
+        let c = VNode::from({
+            let mut tag = VTag::new("div");
+            tag.add_children(vec![html! { "incorrect" }]);
+            tag
+        });
 
         assert_eq!(a, b);
         assert_ne!(a, c);
     }
 
     #[test]
-    fn it_compares_attributes_dynamic() {
-        let a = html! {
-            <div a={"test".to_owned()}></div>
-        };
-
-        let b = html! {
-            <div a={"test".to_owned()}></div>
-        };
-
-        let c = html! {
-            <div a={"fail".to_owned()}></div>
-        };
+    fn it_compares_attributes() {
+        let a = VNode::from({
+            let mut tag = VTag::new("div");
+            tag.add_attribute("class", "test");
+            tag
+        });
+
+        let b = VNode::from({
+            let mut tag = VTag::new("div");
+            tag.add_attribute("class", "test");
+            tag
+        });
+
+        let c = VNode::from({
+            let mut tag = VTag::new("div");
+            tag.add_attribute("class", "fail");
+            tag
+        });
 
         assert_eq!(a, b);
         assert_ne!(a, c);
@@ -372,21 +344,21 @@ mod tests {
     #[test]
     fn it_compares_children() {
         let a = html! {
-            <div>
-                <p></p>
-            </div>
+            <@{"div"}>
+                <@{"p"}></@>
+            </@>
         };
 
         let b = html! {
-            <div>
-                <p></p>
-            </div>
+            <@{"div"}>
+                <@{"p"}></@>
+            </@>
         };
 
         let c = html! {
-            <div>
-                <span></span>
-            </div>
+            <@{"div"}>
+                <@{"span"}></@>
+            </@>
         };
 
         assert_eq!(a, b);
@@ -396,19 +368,19 @@ mod tests {
     #[test]
     fn it_compares_classes_static() {
         let a = html! {
-            <div class="test"></div>
+            <@{"div"} class="test"></@>
         };
 
         let b = html! {
-            <div class="test"></div>
+            <@{"div"} class="test"></@>
         };
 
         let c = html! {
-            <div class="fail"></div>
+            <@{"div"} class="fail"></@>
         };
 
         let d = html! {
-            <div class={format!("fail{}", "")}></div>
+            <@{"div"} class={format!("fail{}", "")}></@>
         };
 
         assert_eq!(a, b);
@@ -419,19 +391,19 @@ mod tests {
     #[test]
     fn it_compares_classes_dynamic() {
         let a = html! {
-            <div class={"test".to_owned()}></div>
+            <@{"div"} class={"test".to_owned()}></@>
         };
 
         let b = html! {
-            <div class={"test".to_owned()}></div>
+            <@{"div"} class={"test".to_owned()}></@>
         };
 
         let c = html! {
-            <div class={"fail".to_owned()}></div>
+            <@{"div"} class={"fail".to_owned()}></@>
         };
 
         let d = html! {
-            <div class={format!("fail{}", "")}></div>
+            <@{"div"} class={format!("fail{}", "")}></@>
         };
 
         assert_eq!(a, b);
@@ -481,9 +453,9 @@ mod tests {
         let namespace = Some(namespace);
         let svg_el = document.create_element_ns(namespace, "svg").unwrap();
 
-        let g_node = html! { <g class="segment"></g> };
-        let path_node = html! { <path></path> };
-        let svg_node = html! { <svg>{path_node}</svg> };
+        let g_node = html! { <@{"g"} class="segment"></@> };
+        let path_node = html! { <@{"path"}></@> };
+        let svg_node = html! { <@{"svg"}>{path_node}</@> };
 
         let svg_tag = assert_vtag(svg_node);
         let (_, svg_tag) = svg_tag.attach(&scope, &div_el, NodeRef::default());
@@ -503,15 +475,15 @@ mod tests {
     #[test]
     fn it_compares_values() {
         let a = html! {
-            <input value="test"/>
+            <@{"input"} value="test"/>
         };
 
         let b = html! {
-            <input value="test"/>
+            <@{"input"} value="test"/>
         };
 
         let c = html! {
-            <input value="fail"/>
+            <@{"input"} value="fail"/>
         };
 
         assert_eq!(a, b);
@@ -521,15 +493,15 @@ mod tests {
     #[test]
     fn it_compares_kinds() {
         let a = html! {
-            <input type="text"/>
+            <@{"input"} type="text"/>
         };
 
         let b = html! {
-            <input type="text"/>
+            <@{"input"} type="text"/>
         };
 
         let c = html! {
-            <input type="hidden"/>
+            <@{"input"} type="hidden"/>
         };
 
         assert_eq!(a, b);
@@ -539,57 +511,21 @@ mod tests {
     #[test]
     fn it_compares_checked() {
         let a = html! {
-            <input type="checkbox" checked=false />
+            <@{"input"} type="checkbox" checked=false />
         };
 
         let b = html! {
-            <input type="checkbox" checked=false />
+            <@{"input"} type="checkbox" checked=false />
         };
 
         let c = html! {
-            <input type="checkbox" checked=true />
+            <@{"input"} type="checkbox" checked=true />
         };
 
         assert_eq!(a, b);
         assert_ne!(a, c);
     }
 
-    #[test]
-    fn it_allows_aria_attributes() {
-        let a = html! {
-            <p aria-controls="it-works">
-                <a class="btn btn-primary"
-                   data-toggle="collapse"
-                   href="#collapseExample"
-                   role="button"
-                   aria-expanded="false"
-                   aria-controls="collapseExample">
-                    { "Link with href" }
-                </a>
-                <button class="btn btn-primary"
-                        type="button"
-                        data-toggle="collapse"
-                        data-target="#collapseExample"
-                        aria-expanded="false"
-                        aria-controls="collapseExample">
-                    { "Button with data-target" }
-                </button>
-                <div own-attribute-with-multiple-parts="works" />
-            </p>
-        };
-        if let VNode::VTag(vtag) = a {
-            assert_eq!(
-                vtag.attributes
-                    .iter()
-                    .find(|(k, _)| k == &"aria-controls")
-                    .map(|(_, v)| v),
-                Some("it-works")
-            );
-        } else {
-            panic!("vtag expected");
-        }
-    }
-
     #[test]
     fn it_does_not_set_missing_class_name() {
         let scope = test_scope();
@@ -597,7 +533,7 @@ mod tests {
 
         document().body().unwrap().append_child(&parent).unwrap();
 
-        let elem = html! { <div></div> };
+        let elem = VNode::from(VTag::new("div"));
         let (_, mut elem) = Reconcilable::attach(elem, &scope, &parent, NodeRef::default());
         let vtag = assert_btag_mut(&mut elem);
         // test if the className has not been set
@@ -619,12 +555,12 @@ mod tests {
 
     #[test]
     fn it_sets_class_name_static() {
-        test_set_class_name(|| html! { <div class="ferris the crab"></div> });
+        test_set_class_name(|| html! { <@{"div"} class="ferris the crab"></@> });
     }
 
     #[test]
     fn it_sets_class_name_dynamic() {
-        test_set_class_name(|| html! { <div class={"ferris the crab".to_owned()}></div> });
+        test_set_class_name(|| html! { <@{"div"} class={"ferris the crab".to_owned()}></@> });
     }
 
     #[test]
@@ -636,8 +572,14 @@ mod tests {
 
         let expected = "not_changed_value";
 
+        let create_expected_vnode = || {
+            let mut tag = VTag::new("input");
+            tag.set_value(expected);
+            VNode::from(tag)
+        };
+
         // Initial state
-        let elem = html! { <input value={expected} /> };
+        let elem = create_expected_vnode();
         let (_, mut elem) = Reconcilable::attach(elem, &scope, &parent, NodeRef::default());
         let vtag = assert_btag_ref(&elem);
 
@@ -646,7 +588,7 @@ mod tests {
         let input = input_ref.dyn_ref::<InputElement>();
         input.unwrap().set_value("User input");
 
-        let next_elem = html! { <input value={expected} /> };
+        let next_elem = create_expected_vnode();
         let elem_vtag = assert_vtag(next_elem);
 
         // Sync happens here
@@ -671,7 +613,7 @@ mod tests {
         document().body().unwrap().append_child(&parent).unwrap();
 
         // Initial state
-        let elem = html! { <input /> };
+        let elem = VNode::from(VTag::new("input"));
         let (_, mut elem) = Reconcilable::attach(elem, &scope, &parent, NodeRef::default());
         let vtag = assert_btag_ref(&elem);
 
@@ -680,7 +622,7 @@ mod tests {
         let input = input_ref.dyn_ref::<InputElement>();
         input.unwrap().set_value("User input");
 
-        let next_elem = html! { <input /> };
+        let next_elem = VNode::from(VTag::new("input"));
         let elem_vtag = assert_vtag(next_elem);
 
         // Value should not be refreshed
@@ -805,13 +747,13 @@ mod tests {
         let test_ref = NodeRef::default();
         let before = html! {
             <>
-                <div ref={&test_ref} id="before" />
+                <div ref={test_ref.clone()} id="before" />
             </>
         };
         let after = html! {
             <>
                 <h6 />
-                <div ref={&test_ref} id="after" />
+                <div ref={test_ref.clone()} id="after" />
             </>
         };
         // The point of this diff is to first render the "after" div and then detach the "before" div,
diff --git a/packages/yew/src/html/conversion.rs b/packages/yew/src/html/conversion.rs
index aa0b6c7d077..a4781e88cd4 100644
--- a/packages/yew/src/html/conversion.rs
+++ b/packages/yew/src/html/conversion.rs
@@ -1,14 +1,19 @@
-use super::{Component, NodeRef, Scope};
-use crate::virtual_dom::AttrValue;
 use std::rc::Rc;
 
+use crate::virtual_dom::AttrValue;
+use crate::Callback;
+
+use super::{Component, NodeRef, Scope};
+
 /// Marker trait for types that the [`html!`](macro@crate::html) macro may clone implicitly.
 pub trait ImplicitClone: Clone {}
 
 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
 
@@ -38,6 +43,7 @@ impl<T> IntoPropValue<T> for T {
         self
     }
 }
+
 impl<T> IntoPropValue<T> for &T
 where
     T: ImplicitClone,
@@ -54,6 +60,7 @@ impl<T> IntoPropValue<Option<T>> for T {
         Some(self)
     }
 }
+
 impl<T> IntoPropValue<Option<T>> for &T
 where
     T: ImplicitClone,
@@ -64,6 +71,26 @@ where
     }
 }
 
+impl<T, E> IntoPropValue<Callback<E>> for T
+where
+    T: Fn(E) + 'static,
+{
+    #[inline]
+    fn into_prop_value(self) -> Callback<E> {
+        Callback::from(self)
+    }
+}
+
+impl<T, E> IntoPropValue<Option<Callback<E>>> for T
+where
+    T: Fn(E) + 'static,
+{
+    #[inline]
+    fn into_prop_value(self) -> Option<Callback<E>> {
+        Some(Callback::from(self))
+    }
+}
+
 macro_rules! impl_into_prop {
     (|$value:ident: $from_ty:ty| -> $to_ty:ty { $conversion:expr }) => {
         // implement V -> T
@@ -99,6 +126,15 @@ impl_into_prop!(|value: &'static str| -> AttrValue { AttrValue::Static(value) })
 impl_into_prop!(|value: String| -> AttrValue { AttrValue::Rc(Rc::from(value)) });
 impl_into_prop!(|value: Rc<str>| -> AttrValue { AttrValue::Rc(value) });
 
+const TRUE: AttrValue = AttrValue::Static("true");
+
+impl IntoPropValue<Option<AttrValue>> for bool {
+    #[inline]
+    fn into_prop_value(self) -> Option<AttrValue> {
+        self.then(|| TRUE)
+    }
+}
+
 #[cfg(test)]
 mod test {
     use super::*;
@@ -110,5 +146,9 @@ mod test {
         let _: AttrValue = "foo".into_prop_value();
         let _: Option<AttrValue> = "foo".into_prop_value();
         let _: Option<AttrValue> = Rc::<str>::from("foo").into_prop_value();
+        let boolean: Option<AttrValue> = true.into_prop_value();
+        assert_eq!(boolean, Some(AttrValue::Static("TRUE")));
+        let boolean: Option<AttrValue> = false.into_prop_value();
+        assert_eq!(boolean, None);
     }
 }
diff --git a/packages/yew/src/lib.rs b/packages/yew/src/lib.rs
index 9c3be9f316b..255467a9a08 100644
--- a/packages/yew/src/lib.rs
+++ b/packages/yew/src/lib.rs
@@ -166,7 +166,7 @@ pub use yew_macro::html;
 /// }
 ///
 /// impl Into<Html> for ListItem {
-///   fn into(self) -> Html { html! { <self /> } }
+///   fn into(self) -> Html { html! { <Self /> } }
 /// }
 /// // You can use `List` with nested `ListItem` components.
 /// // Using any other kind of element would result in a compile error.
@@ -261,6 +261,7 @@ pub mod macros {
     pub use crate::html;
     pub use crate::html_nested;
     pub use crate::props;
+    pub use yew_macro::generate_element;
 }
 
 pub mod callback;
diff --git a/packages/yew/src/server_renderer.rs b/packages/yew/src/server_renderer.rs
index b7277340693..034d0b284ec 100644
--- a/packages/yew/src/server_renderer.rs
+++ b/packages/yew/src/server_renderer.rs
@@ -44,11 +44,11 @@ where
 
     /// Renders Yew Application.
     pub async fn render(self) -> String {
-        let mut s = String::new();
+        let mut buf = String::new();
 
-        self.render_to_string(&mut s).await;
+        self.render_to_string(&mut buf).await;
 
-        s
+        buf
     }
 
     /// Renders Yew Application to a String.
diff --git a/packages/yew/src/virtual_dom/key.rs b/packages/yew/src/virtual_dom/key.rs
index e6ead5ca905..4c1ed2d2c53 100644
--- a/packages/yew/src/virtual_dom/key.rs
+++ b/packages/yew/src/virtual_dom/key.rs
@@ -84,7 +84,7 @@ mod test {
             <key="string literal">
                 <img key={"String".to_owned()} />
                 <p key={Rc::<str>::from("rc")}></p>
-                <key='a'>
+                <div key='a'>
                     <p key=11_usize></p>
                     <p key=12_u8></p>
                     <p key=13_u16></p>
@@ -96,7 +96,7 @@ mod test {
                     <p key=23_i16></p>
                     <p key=24_i32></p>
                     <p key=25_i128></p>
-                </>
+                </div>
             </>
         };
     }
diff --git a/packages/yew/src/virtual_dom/mod.rs b/packages/yew/src/virtual_dom/mod.rs
index 80e85ecaab5..26122a2db8e 100644
--- a/packages/yew/src/virtual_dom/mod.rs
+++ b/packages/yew/src/virtual_dom/mod.rs
@@ -4,6 +4,7 @@
 pub mod key;
 #[doc(hidden)]
 pub mod listeners;
+pub mod typings;
 #[doc(hidden)]
 pub mod vcomp;
 #[doc(hidden)]
diff --git a/packages/yew/src/virtual_dom/typings/globals.rs b/packages/yew/src/virtual_dom/typings/globals.rs
new file mode 100644
index 00000000000..cbf28d27af4
--- /dev/null
+++ b/packages/yew/src/virtual_dom/typings/globals.rs
@@ -0,0 +1 @@
+yew_macro::globals!();
diff --git a/packages/yew/src/virtual_dom/typings/mod.rs b/packages/yew/src/virtual_dom/typings/mod.rs
new file mode 100644
index 00000000000..818d1ba583a
--- /dev/null
+++ b/packages/yew/src/virtual_dom/typings/mod.rs
@@ -0,0 +1,1133 @@
+#![allow(missing_docs)]
+//! This module contains the items required for a statically typed VDOM
+
+pub mod globals;
+
+use std::collections::HashMap;
+use std::rc::Rc;
+
+use crate::macros::generate_element;
+
+use crate::virtual_dom::{AttrValue, Key, Listener, VNode};
+use crate::NodeRef;
+
+generate_element! {
+    base;
+    props: {
+        href: AttrValue,
+        target: AttrValue,
+     }
+}
+
+generate_element! {
+    head;
+    props: {  }
+}
+
+generate_element! {
+    link;
+    props: {
+        crossorigin: AttrValue,
+        href: AttrValue,
+        hreflang: AttrValue,
+        importance: AttrValue,
+        integrity: AttrValue,
+        media: AttrValue,
+        referrerpolicy: AttrValue,
+        rel: AttrValue,
+        sizes: AttrValue,
+     }
+}
+
+generate_element! {
+    meta;
+    props: {
+        charset: AttrValue,
+        content: AttrValue,
+        http_equiv: AttrValue,
+        name: AttrValue,
+     }
+}
+
+generate_element! {
+    style;
+    props: {
+        media: AttrValue,
+        scoped: AttrValue,
+        type: AttrValue,
+     }
+}
+
+generate_element! {
+    title;
+    props: {  }
+}
+
+generate_element! {
+    body;
+    props: {
+        background: AttrValue,
+        bgcolor: AttrValue,
+     }
+}
+
+generate_element! {
+    address;
+    props: {  }
+}
+
+generate_element! {
+    article;
+    props: {  }
+}
+
+generate_element! {
+    aside;
+    props: {  }
+}
+
+generate_element! {
+    footer;
+    props: {  }
+}
+
+generate_element! {
+    header;
+    props: {  }
+}
+
+generate_element! {
+    main;
+    props: {  }
+}
+
+generate_element! {
+    nav;
+    props: {  }
+}
+
+generate_element! {
+    section;
+    props: {  }
+}
+
+generate_element! {
+    blockquote;
+    props: {
+        cite: AttrValue,
+     }
+}
+
+generate_element! {
+    dd;
+    props: {  }
+}
+
+generate_element! {
+    div;
+    props: {  }
+}
+
+generate_element! {
+    dl;
+    props: {  }
+}
+
+generate_element! {
+    dt;
+    props: {  }
+}
+
+generate_element! {
+    figcaption;
+    props: {  }
+}
+
+generate_element! {
+    figure;
+    props: {  }
+}
+
+generate_element! {
+    hr;
+    props: {
+        align: AttrValue,
+        color: AttrValue,
+     }
+}
+
+generate_element! {
+    li;
+    props: {
+        value: AttrValue,
+     }
+}
+
+generate_element! {
+    ol;
+    props: {
+        reversed: AttrValue,
+        start: AttrValue,
+     }
+}
+
+generate_element! {
+    p;
+    props: {  }
+}
+
+generate_element! {
+    pre;
+    props: {  }
+}
+
+generate_element! {
+    ul;
+    props: {  }
+}
+
+generate_element! {
+    a;
+    props: {
+        download: AttrValue,
+        href: AttrValue,
+        hreflang: AttrValue,
+        media: AttrValue,
+        ping: AttrValue,
+        referrerpolicy: AttrValue,
+        rel: AttrValue,
+        shape: AttrValue,
+        target: AttrValue,
+     }
+}
+
+generate_element! {
+    abbr;
+    props: {  }
+}
+
+generate_element! {
+    b;
+    props: {  }
+}
+
+generate_element! {
+    bdi;
+    props: {  }
+}
+
+generate_element! {
+    bdo;
+    props: {  }
+}
+
+generate_element! {
+    br;
+    props: {  }
+}
+
+generate_element! {
+    cite;
+    props: {  }
+}
+
+generate_element! {
+    code;
+    props: {  }
+}
+
+generate_element! {
+    data;
+    props: {
+        value: AttrValue,
+     }
+}
+
+generate_element! {
+    dfn;
+    props: {  }
+}
+
+generate_element! {
+    em;
+    props: {  }
+}
+
+generate_element! {
+    i;
+    props: {  }
+}
+
+generate_element! {
+    kbd;
+    props: {  }
+}
+
+generate_element! {
+    mark;
+    props: {  }
+}
+
+generate_element! {
+    q;
+    props: {
+        cite: AttrValue,
+     }
+}
+
+generate_element! {
+    rp;
+    props: {  }
+}
+
+generate_element! {
+    rt;
+    props: {  }
+}
+
+generate_element! {
+    ruby;
+    props: {  }
+}
+
+generate_element! {
+    s;
+    props: {  }
+}
+
+generate_element! {
+    samp;
+    props: {  }
+}
+
+generate_element! {
+    small;
+    props: {  }
+}
+
+generate_element! {
+    span;
+    props: {  }
+}
+
+generate_element! {
+    strong;
+    props: {  }
+}
+
+generate_element! {
+    sub;
+    props: {  }
+}
+
+generate_element! {
+    sup;
+    props: {  }
+}
+
+generate_element! {
+    time;
+    props: {
+        datetime: AttrValue,
+     }
+}
+
+generate_element! {
+    u;
+    props: {  }
+}
+
+generate_element! {
+    var;
+    props: {  }
+}
+
+generate_element! {
+    wbr;
+    props: {  }
+}
+
+generate_element! {
+    area;
+    props: {
+        alt: AttrValue,
+        coords: AttrValue,
+        download: AttrValue,
+        href: AttrValue,
+        hreflang: AttrValue,
+        media: AttrValue,
+        ping: AttrValue,
+        referrerpolicy: AttrValue,
+        rel: AttrValue,
+        shape: AttrValue,
+        target: AttrValue,
+     }
+}
+
+generate_element! {
+    audio;
+    props: {
+        autoplay: AttrValue,
+        buffered: AttrValue,
+        controls: AttrValue,
+        crossorigin: AttrValue,
+        loop: AttrValue,
+        muted: AttrValue,
+        preload: AttrValue,
+        src: AttrValue,
+     }
+}
+
+generate_element! {
+    img;
+    props: {
+        align: AttrValue,
+        alt: AttrValue,
+        border: AttrValue,
+        crossorigin: AttrValue,
+        decoding: AttrValue,
+        height: AttrValue,
+        importance: AttrValue,
+        intrinsicsize: AttrValue,
+        ismap: AttrValue,
+        loading: AttrValue,
+        referrerpolicy: AttrValue,
+        sizes: AttrValue,
+        src: AttrValue,
+        srcset: AttrValue,
+        usemap: AttrValue,
+        width: AttrValue,
+     }
+}
+
+generate_element! {
+    map;
+    props: {
+        name: AttrValue,
+     }
+}
+
+generate_element! {
+    track;
+    props: {
+        default: AttrValue,
+        kind: AttrValue,
+        label: AttrValue,
+        src: AttrValue,
+        srclang: AttrValue,
+     }
+}
+
+generate_element! {
+    video;
+    props: {
+        autoplay: AttrValue,
+        buffered: AttrValue,
+        controls: AttrValue,
+        crossorigin: AttrValue,
+        height: AttrValue,
+        loop: AttrValue,
+        muted: AttrValue,
+        poster: AttrValue,
+        preload: AttrValue,
+        src: AttrValue,
+        width: AttrValue,
+     }
+}
+
+generate_element! {
+    embed;
+    props: {
+        height: AttrValue,
+        src: AttrValue,
+        type: AttrValue,
+        width: AttrValue,
+     }
+}
+
+generate_element! {
+    iframe;
+    props: {
+        align: AttrValue,
+        allow: AttrValue,
+        csp: AttrValue,
+        height: AttrValue,
+        importance: AttrValue,
+        loading: AttrValue,
+        name: AttrValue,
+        referrerpolicy: AttrValue,
+        sandbox: AttrValue,
+        src: AttrValue,
+        srcdoc: AttrValue,
+        width: AttrValue,
+     }
+}
+
+generate_element! {
+    object;
+    props: {
+        border: AttrValue,
+        data: AttrValue,
+        form: AttrValue,
+        height: AttrValue,
+        name: AttrValue,
+        type: AttrValue,
+        usemap: AttrValue,
+        width: AttrValue,
+     }
+}
+
+generate_element! {
+    param;
+    props: {
+        name: AttrValue,
+        value: AttrValue,
+     }
+}
+
+generate_element! {
+    picture;
+    props: {  }
+}
+
+generate_element! {
+    portal;
+    props: {  }
+}
+
+generate_element! {
+    source;
+    props: {
+        media: AttrValue,
+        sizes: AttrValue,
+        src: AttrValue,
+        srcset: AttrValue,
+        type: AttrValue,
+     }
+}
+
+generate_element! {
+    math;
+    props: {  }
+}
+
+generate_element! {
+    canvas;
+    props: {
+        height: AttrValue,
+        width: AttrValue,
+     }
+}
+
+generate_element! {
+    noscript;
+    props: {  }
+}
+
+generate_element! {
+    script;
+    props: {
+        async: AttrValue,
+        charset: AttrValue,
+        crossorigin: AttrValue,
+        defer: AttrValue,
+        importance: AttrValue,
+        integrity: AttrValue,
+        language: AttrValue,
+        referrerpolicy: AttrValue,
+        src: AttrValue,
+        type: AttrValue,
+     }
+}
+
+generate_element! {
+    del;
+    props: {
+        cite: AttrValue,
+        datetime: AttrValue,
+     }
+}
+
+generate_element! {
+    ins;
+    props: {
+        cite: AttrValue,
+        datetime: AttrValue,
+     }
+}
+
+generate_element! {
+    caption;
+    props: {
+        align: AttrValue,
+     }
+}
+
+generate_element! {
+    col;
+    props: {
+        align: AttrValue,
+        bgcolor: AttrValue,
+        span: AttrValue,
+     }
+}
+
+generate_element! {
+    colgroup;
+    props: {
+        align: AttrValue,
+        bgcolor: AttrValue,
+        span: AttrValue,
+     }
+}
+
+generate_element! {
+    table;
+    props: {
+        align: AttrValue,
+        background: AttrValue,
+        bgcolor: AttrValue,
+        border: AttrValue,
+        summary: AttrValue,
+     }
+}
+
+generate_element! {
+    tbody;
+    props: {
+        align: AttrValue,
+        bgcolor: AttrValue,
+     }
+}
+
+generate_element! {
+    td;
+    props: {
+        align: AttrValue,
+        background: AttrValue,
+        bgcolor: AttrValue,
+        colspan: AttrValue,
+        headers: AttrValue,
+        rowspan: AttrValue,
+     }
+}
+
+generate_element! {
+    tfoot;
+    props: {
+        align: AttrValue,
+        bgcolor: AttrValue,
+     }
+}
+
+generate_element! {
+    th;
+    props: {
+        align: AttrValue,
+        background: AttrValue,
+        bgcolor: AttrValue,
+        colspan: AttrValue,
+        headers: AttrValue,
+        rowspan: AttrValue,
+        scope: AttrValue,
+     }
+}
+
+generate_element! {
+    thead;
+    props: {
+        align: AttrValue,
+     }
+}
+
+generate_element! {
+    tr;
+    props: {
+        align: AttrValue,
+        bgcolor: AttrValue,
+     }
+}
+
+generate_element! {
+    button;
+    props: {
+        autofocus: AttrValue,
+        disabled: AttrValue,
+        form: AttrValue,
+        formaction: AttrValue,
+        formenctype: AttrValue,
+        formmethod: AttrValue,
+        formnovalidate: AttrValue,
+        formtarget: AttrValue,
+        name: AttrValue,
+        type: AttrValue,
+        value: AttrValue,
+     }
+}
+
+generate_element! {
+    datalist;
+    props: {  }
+}
+
+generate_element! {
+    fieldset;
+    props: {
+        disabled: AttrValue,
+        form: AttrValue,
+        name: AttrValue,
+     }
+}
+
+generate_element! {
+    form;
+    props: {
+        accept: AttrValue,
+        accept_charset: AttrValue,
+        action: AttrValue,
+        autocomplete: AttrValue,
+        enctype: AttrValue,
+        method: AttrValue,
+        name: AttrValue,
+        novalidate: AttrValue,
+        target: AttrValue,
+     }
+}
+
+generate_element! {
+    input;
+    props: {
+        accept: AttrValue,
+        alt: AttrValue,
+        autocomplete: AttrValue,
+        autofocus: AttrValue,
+        capture: AttrValue,
+        checked: AttrValue,
+        dirname: AttrValue,
+        disabled: AttrValue,
+        form: AttrValue,
+        formaction: AttrValue,
+        formenctype: AttrValue,
+        formmethod: AttrValue,
+        formnovalidate: AttrValue,
+        formtarget: AttrValue,
+        height: AttrValue,
+        list: AttrValue,
+        max: AttrValue,
+        maxlength: AttrValue,
+        minlength: AttrValue,
+        min: AttrValue,
+        multiple: AttrValue,
+        name: AttrValue,
+        pattern: AttrValue,
+        placeholder: AttrValue,
+        readonly: AttrValue,
+        required: AttrValue,
+        size: AttrValue,
+        src: AttrValue,
+        step: AttrValue,
+        type: AttrValue,
+        usemap: AttrValue,
+        value: AttrValue,
+        width: AttrValue,
+     }
+}
+
+generate_element! {
+    label;
+    props: {
+        for: AttrValue,
+        form: AttrValue,
+     }
+}
+
+generate_element! {
+    legend;
+    props: {  }
+}
+
+generate_element! {
+    meter;
+    props: {
+        form: AttrValue,
+        high: AttrValue,
+        low: AttrValue,
+        max: AttrValue,
+        min: AttrValue,
+        optimum: AttrValue,
+        value: AttrValue,
+     }
+}
+
+generate_element! {
+    optgroup;
+    props: {
+        disabled: AttrValue,
+        label: AttrValue,
+     }
+}
+
+generate_element! {
+    option;
+    props: {
+        disabled: AttrValue,
+        label: AttrValue,
+        selected: AttrValue,
+        value: AttrValue,
+     }
+}
+
+generate_element! {
+    output;
+    props: {
+        for: AttrValue,
+        form: AttrValue,
+        name: AttrValue,
+     }
+}
+
+generate_element! {
+    progress;
+    props: {
+        form: AttrValue,
+        max: AttrValue,
+        value: AttrValue,
+     }
+}
+
+generate_element! {
+    select;
+    props: {
+        autocomplete: AttrValue,
+        autofocus: AttrValue,
+        disabled: AttrValue,
+        form: AttrValue,
+        multiple: AttrValue,
+        name: AttrValue,
+        required: AttrValue,
+        size: AttrValue,
+     }
+}
+
+generate_element! {
+    textarea;
+    props: {
+        autocomplete: AttrValue,
+        autofocus: AttrValue,
+        cols: AttrValue,
+        dirname: AttrValue,
+        disabled: AttrValue,
+        enterkeyhint: AttrValue,
+        form: AttrValue,
+        inputmode: AttrValue,
+        maxlength: AttrValue,
+        minlength: AttrValue,
+        name: AttrValue,
+        placeholder: AttrValue,
+        readonly: AttrValue,
+        required: AttrValue,
+        rows: AttrValue,
+        wrap: AttrValue,
+     }
+}
+
+generate_element! {
+    details;
+    props: {
+        open: AttrValue,
+     }
+}
+
+generate_element! {
+    dialog;
+    props: {  }
+}
+
+generate_element! {
+    menu;
+    props: {
+        type: AttrValue,
+     }
+}
+
+generate_element! {
+    summary;
+    props: {  }
+}
+
+generate_element! {
+    slot;
+    props: {  }
+}
+
+generate_element! {
+    template;
+    props: {  }
+}
+
+generate_element! {
+    acronym;
+    props: {  }
+}
+
+generate_element! {
+    applet;
+    props: {
+        align: AttrValue,
+        alt: AttrValue,
+        code: AttrValue,
+        codebase: AttrValue,
+     }
+}
+
+generate_element! {
+    basefont;
+    props: {
+        color: AttrValue,
+     }
+}
+
+generate_element! {
+    bgsound;
+    props: {
+        loop: AttrValue,
+     }
+}
+
+generate_element! {
+    big;
+    props: {  }
+}
+
+generate_element! {
+    blink;
+    props: {  }
+}
+
+generate_element! {
+    center;
+    props: {  }
+}
+
+generate_element! {
+    content;
+    props: {  }
+}
+
+generate_element! {
+    dir;
+    props: {  }
+}
+
+generate_element! {
+    font;
+    props: {
+        color: AttrValue,
+     }
+}
+
+generate_element! {
+    frame;
+    props: {  }
+}
+
+generate_element! {
+    frameset;
+    props: {  }
+}
+
+generate_element! {
+    hgroup;
+    props: {  }
+}
+
+generate_element! {
+    image;
+    props: {  }
+}
+
+generate_element! {
+    keygen;
+    props: {
+        autofocus: AttrValue,
+        challenge: AttrValue,
+        disabled: AttrValue,
+        form: AttrValue,
+        keytype: AttrValue,
+        name: AttrValue,
+     }
+}
+
+generate_element! {
+    marquee;
+    props: {
+        bgcolor: AttrValue,
+        loop: AttrValue,
+     }
+}
+
+generate_element! {
+    menuitem;
+    props: {  }
+}
+
+generate_element! {
+    nobr;
+    props: {  }
+}
+
+generate_element! {
+    noembed;
+    props: {  }
+}
+
+generate_element! {
+    noframes;
+    props: {  }
+}
+
+generate_element! {
+    plaintext;
+    props: {  }
+}
+
+generate_element! {
+    rb;
+    props: {  }
+}
+
+generate_element! {
+    rtc;
+    props: {  }
+}
+
+generate_element! {
+    shadow;
+    props: {  }
+}
+
+generate_element! {
+    spacer;
+    props: {  }
+}
+
+generate_element! {
+    strike;
+    props: {  }
+}
+
+generate_element! {
+    tt;
+    props: {  }
+}
+
+generate_element! {
+    xmp;
+    props: {  }
+}
+
+generate_element! {
+    h1;
+    props: {  }
+}
+
+generate_element! {
+    h2;
+    props: {  }
+}
+
+generate_element! {
+    h3;
+    props: {  }
+}
+
+generate_element! {
+    h4;
+    props: {  }
+}
+
+generate_element! {
+    h5;
+    props: {  }
+}
+
+generate_element! {
+    h6;
+    props: {  }
+}
+
+/// Metadata of an HTML element
+///
+/// A [Component](crate::html::Component) is generated using this data for every element.
+#[derive(Debug)]
+pub struct ElementData {
+    pub node_ref: NodeRef,
+    pub attributes: HashMap<&'static str, AttrValue>,
+    pub listeners: Vec<Option<Rc<dyn Listener>>>,
+    pub key: Option<Key>,
+    pub children: Vec<VNode>,
+}
+
+#[cfg(all(test, feature = "wasm_test"))]
+mod tests {
+    // this test fails for some reason. wasm bindgen isn't picking the component changes even though the component is rendered.
+    // other tests already cover what this should test.
+    // it exists here but is ignored.
+
+    /*
+    use std::cell::RefCell;
+    use std::rc::Rc;
+
+    use wasm_bindgen::JsCast;
+    use wasm_bindgen_test::{wasm_bindgen_test as test, wasm_bindgen_test_configure};
+
+    use crate::{function_component, html, props, Callback, Html, Properties};
+
+    wasm_bindgen_test_configure!(run_in_browser);
+
+    #[test]
+    fn it_works() {
+        const TEXT: &'static str = "Inner Text";
+        const CLICKED_TEXT: &'static str = "Clicked Text";
+
+        #[derive(PartialEq, Properties)]
+        struct Props {
+            on_click: Callback<web_sys::MouseEvent>,
+        }
+
+        #[function_component]
+        fn Comp(props: &Props) -> Html {
+            html! {
+                <button class="ccc" name="yes" onclick={props.on_click.clone()}>{ TEXT }</button>
+            }
+        }
+
+        let event_data = Rc::new(RefCell::new(None));
+
+        let on_click = {
+            let event_data = Rc::clone(&event_data);
+            Callback::from(move |_| {
+                (*event_data).borrow_mut().replace(CLICKED_TEXT);
+            })
+        };
+
+        let document = gloo_utils::document();
+        yew::start_app_with_props_in_element::<Comp>(
+            document.get_element_by_id("output").unwrap(),
+            props!(Props { on_click: on_click }),
+        );
+        let button = gloo_utils::document()
+            .query_selector("#output button")
+            .unwrap()
+            .unwrap()
+            .unchecked_into::<web_sys::HtmlElement>();
+        assert_eq!(button.get_attribute("class").unwrap(), "ccc");
+        assert_eq!(button.get_attribute("name").unwrap(), "yes");
+        assert_eq!(button.inner_text(), TEXT);
+
+        button.click();
+        let data = *event_data.borrow();
+        assert_eq!(data, Some(CLICKED_TEXT))
+    }
+    */
+}
diff --git a/packages/yew/src/virtual_dom/vtag.rs b/packages/yew/src/virtual_dom/vtag.rs
index ed9debd0dba..d41cd401726 100644
--- a/packages/yew/src/virtual_dom/vtag.rs
+++ b/packages/yew/src/virtual_dom/vtag.rs
@@ -8,7 +8,7 @@ use std::mem;
 use std::ops::Deref;
 use std::rc::Rc;
 use std::{borrow::Cow, ops::DerefMut};
-use web_sys::{HtmlInputElement as InputElement, HtmlTextAreaElement as TextAreaElement};
+use web_sys::{HtmlInputElement as InputElement};
 
 /// SVG namespace string used for creating svg elements
 pub const SVG_NAMESPACE: &str = "http://www.w3.org/2000/svg";
@@ -91,14 +91,6 @@ pub(crate) enum VTagInner {
     /// [InputElement](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input)
     /// [VTag]s
     Input(InputFields),
-    /// Fields specific to
-    /// [TextArea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea)
-    /// [VTag]s
-    Textarea {
-        /// Contains a value of an
-        /// [TextArea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea)
-        value: Value<TextAreaElement>,
-    },
     /// Fields for all other kinds of [VTag]s
     Other {
         /// A tag of the element.
@@ -131,9 +123,6 @@ impl VTag {
         Self::new_base(
             match &*tag.to_ascii_lowercase() {
                 "input" => VTagInner::Input(Default::default()),
-                "textarea" => VTagInner::Textarea {
-                    value: Default::default(),
-                },
                 _ => VTagInner::Other {
                     tag,
                     children: Default::default(),
@@ -179,35 +168,6 @@ impl VTag {
         )
     }
 
-    /// Creates a new
-    /// [TextArea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) [VTag]
-    /// instance.
-    ///
-    /// Unlike [VTag::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.
-    #[doc(hidden)]
-    #[allow(clippy::too_many_arguments)]
-    pub fn __new_textarea(
-        value: Option<AttrValue>,
-        node_ref: NodeRef,
-        key: Option<Key>,
-        // at bottom for more readable macro-expanded coded
-        attributes: Attributes,
-        listeners: Listeners,
-    ) -> Self {
-        VTag::new_base(
-            VTagInner::Textarea {
-                value: Value::new(value),
-            },
-            node_ref,
-            key,
-            attributes,
-            listeners,
-        )
-    }
-
     /// Creates a new [VTag] instance with `tag` name (cannot be changed later in DOM).
     ///
     /// Unlike [VTag::new()], this sets all the public fields of [VTag] in one call. This allows the
@@ -257,7 +217,6 @@ impl VTag {
     pub fn tag(&self) -> &str {
         match &self.inner {
             VTagInner::Input { .. } => "input",
-            VTagInner::Textarea { .. } => "textarea",
             VTagInner::Other { tag, .. } => tag.as_ref(),
         }
     }
@@ -305,7 +264,6 @@ impl VTag {
     pub fn value(&self) -> Option<&AttrValue> {
         match &self.inner {
             VTagInner::Input(f) => f.as_ref(),
-            VTagInner::Textarea { value } => value.as_ref(),
             VTagInner::Other { .. } => None,
         }
     }
@@ -318,9 +276,6 @@ impl VTag {
             VTagInner::Input(f) => {
                 f.set(value.into_prop_value());
             }
-            VTagInner::Textarea { value: dst } => {
-                dst.set(value.into_prop_value());
-            }
             VTagInner::Other { .. } => (),
         }
     }
@@ -399,7 +354,6 @@ impl PartialEq for VTag {
 
         (match (&self.inner, &other.inner) {
             (Input(l), Input(r)) => l == r,
-            (Textarea { value: value_l }, Textarea { value: value_r }) => value_l == value_r,
             (Other { tag: tag_l, .. }, Other { tag: tag_r, .. }) => tag_l == tag_r,
             _ => false,
         }) && self.listeners.eq(&other.listeners)
@@ -448,13 +402,6 @@ mod feat_ssr {
 
             match self.inner {
                 VTagInner::Input(_) => {}
-                VTagInner::Textarea { .. } => {
-                    if let Some(m) = self.value() {
-                        VText::new(m.to_owned()).render_to_string(w).await;
-                    }
-
-                    w.push_str("</textarea>");
-                }
                 VTagInner::Other {
                     ref tag,
                     ref children,
@@ -536,7 +483,7 @@ mod ssr_tests {
     async fn test_textarea() {
         #[function_component]
         fn Comp() -> Html {
-            html! { <textarea value="teststring" /> }
+            html! { <textarea>{"teststring"}</textarea> }
         }
 
         let renderer = ServerRenderer::<Comp>::new();
diff --git a/packages/yew/tests/suspense.rs b/packages/yew/tests/suspense.rs
index 2691ff8ff18..22b26b56b14 100644
--- a/packages/yew/tests/suspense.rs
+++ b/packages/yew/tests/suspense.rs
@@ -12,7 +12,7 @@ use std::rc::Rc;
 use gloo::timers::future::TimeoutFuture;
 use wasm_bindgen::JsCast;
 use wasm_bindgen_futures::spawn_local;
-use web_sys::{HtmlElement, HtmlTextAreaElement};
+use web_sys::HtmlElement;
 use yew::suspense::{Suspension, SuspensionResult};
 
 #[wasm_bindgen_test]
@@ -207,23 +207,13 @@ async fn suspense_not_suspended_at_start() {
     fn content() -> HtmlResult {
         let resleep = use_sleep()?;
 
-        let value = use_state(|| "I am writing a long story...".to_string());
-
-        let on_text_input = {
-            let value = value.clone();
-
-            Callback::from(move |e: InputEvent| {
-                let input: HtmlTextAreaElement = e.target_unchecked_into();
-
-                value.set(input.value());
-            })
-        };
+        let value = use_state(String::new);
 
         let on_take_a_break = Callback::from(move |_| (resleep.clone())());
 
         Ok(html! {
             <div class="content-area">
-                <textarea value={value.to_string()} oninput={on_text_input}></textarea>
+                <textarea>{value.to_string()}</textarea>
                 <div class="action-area">
                     <button class="take-a-break" onclick={on_take_a_break}>{"Take a break!"}</button>
                 </div>
diff --git a/website/docs/concepts/basic-web-technologies/css.mdx b/website/docs/concepts/basic-web-technologies/css.mdx
index 07a77948fbc..537ac4c54d0 100644
--- a/website/docs/concepts/basic-web-technologies/css.mdx
+++ b/website/docs/concepts/basic-web-technologies/css.mdx
@@ -97,7 +97,7 @@ Currently Yew does not provide any help with inline styles natively:
 use yew::{classes, html};
 
 html! {
-  <div styles="color: red;"></div>
+  <div style="color: red;"></div>
 };
 ```
 
diff --git a/website/docs/concepts/html/introduction.mdx b/website/docs/concepts/html/introduction.mdx
index 8b46beaa011..e61a3639dfa 100644
--- a/website/docs/concepts/html/introduction.mdx
+++ b/website/docs/concepts/html/introduction.mdx
@@ -95,13 +95,13 @@ use yew::html;
 
 html! {
     <div>
-        <div data-key="abc"></div>
+        <div id="abc"></div>
         <div class="parent">
-            <span class="child" value="anything"></span>
+            <span class="child"></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" />
+            <textarea>{ "write a story" }</textarea>
             <select name="status">
                 <option selected=true disabled=false value="">{ "Selected" }</option>
                 <option selected=false disabled=true value="">{ "Unselected" }</option>
@@ -114,25 +114,29 @@ html! {
   </TabItem>
   <TabItem value="SVG" label="SVG">
 
+:::note
+SVG tags currently require opting out of static typing by using dynamic elements.
+:::
+
 ```rust
 use yew::html;
 
 html! {
-    <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>
+    <@{"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"/>
+        </@>
+        <@{"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"/>
+            </@>
+        </@>
+    </@>
 };
 ```