diff --git a/crates/macro/src/html_tree/html_component.rs b/crates/macro/src/html_tree/html_component.rs
index f2d833e58e1..56b4820b33c 100644
--- a/crates/macro/src/html_tree/html_component.rs
+++ b/crates/macro/src/html_tree/html_component.rs
@@ -340,17 +340,22 @@ impl ToTokens for HtmlComponentClose {
     }
 }
 
-enum PropType {
-    List,
-    With,
-}
-
 enum Props {
     List(Box<ListProps>),
     With(Box<WithProps>),
     None,
 }
 
+struct ListProps {
+    props: Vec<HtmlProp>,
+    node_ref: Option<Expr>,
+}
+
+struct WithProps {
+    props: Ident,
+    node_ref: Option<Expr>,
+}
+
 impl Props {
     fn node_ref(&self) -> Option<&Expr> {
         match self {
@@ -359,102 +364,101 @@ impl Props {
             Props::None => None,
         }
     }
-}
 
-impl PeekValue<PropType> for Props {
-    fn peek(cursor: Cursor) -> Option<PropType> {
-        let (ident, _) = cursor.ident()?;
-        let prop_type = if ident == "with" {
-            PropType::With
-        } else {
-            PropType::List
-        };
-
-        Some(prop_type)
+    fn collision_message() -> &'static str {
+        "Using special syntax `with props` along with named prop is not allowed. This rule does not apply to special `ref` prop"
     }
 }
 
 impl Parse for Props {
     fn parse(input: ParseStream) -> ParseResult<Self> {
-        match Props::peek(input.cursor()) {
-            Some(PropType::List) => input.parse().map(|l| Props::List(Box::new(l))),
-            Some(PropType::With) => input.parse().map(|w| Props::With(Box::new(w))),
-            None => Ok(Props::None),
-        }
-    }
-}
-
-struct ListProps {
-    props: Vec<HtmlProp>,
-    node_ref: Option<Expr>,
-}
+        let mut props = Props::None;
+        let mut node_ref: Option<Expr> = None;
+
+        while let Some((token, _)) = input.cursor().ident() {
+            if token == "with" {
+                match props {
+                    Props::None => Ok(()),
+                    Props::With(_) => Err(input.error("too many `with` tokens used")),
+                    Props::List(_) => {
+                        Err(syn::Error::new_spanned(&token, Props::collision_message()))
+                    }
+                }?;
+
+                input.parse::<Ident>()?;
+                props = Props::With(Box::new(WithProps {
+                    props: input.parse::<Ident>()?,
+                    node_ref: None,
+                }));
+
+                // Handle optional comma
+                let _ = input.parse::<Token![,]>();
+                continue;
+            }
 
-impl Parse for ListProps {
-    fn parse(input: ParseStream) -> ParseResult<Self> {
-        let mut props: Vec<HtmlProp> = Vec::new();
-        while HtmlProp::peek(input.cursor()).is_some() {
-            props.push(input.parse::<HtmlProp>()?);
-        }
+            if (HtmlProp::peek(input.cursor())).is_none() {
+                break;
+            }
 
-        let ref_position = props.iter().position(|p| p.label.to_string() == "ref");
-        let node_ref = ref_position.map(|i| props.remove(i).value);
-        for prop in &props {
+            let prop = input.parse::<HtmlProp>()?;
             if prop.label.to_string() == "ref" {
-                return Err(syn::Error::new_spanned(&prop.label, "too many refs set"));
+                match node_ref {
+                    None => Ok(()),
+                    Some(_) => Err(syn::Error::new_spanned(&prop.label, "too many refs set")),
+                }?;
+
+                node_ref = Some(prop.value);
+                continue;
             }
+
             if prop.label.to_string() == "type" {
                 return Err(syn::Error::new_spanned(&prop.label, "expected identifier"));
             }
+
             if !prop.label.extended.is_empty() {
                 return Err(syn::Error::new_spanned(&prop.label, "expected identifier"));
             }
-        }
-
-        // alphabetize
-        props.sort_by(|a, b| {
-            if a.label == b.label {
-                Ordering::Equal
-            } else if a.label.to_string() == "children" {
-                Ordering::Greater
-            } else if b.label.to_string() == "children" {
-                Ordering::Less
-            } else {
-                a.label
-                    .to_string()
-                    .partial_cmp(&b.label.to_string())
-                    .unwrap()
-            }
-        });
-
-        Ok(ListProps { props, node_ref })
-    }
-}
-
-struct WithProps {
-    props: Ident,
-    node_ref: Option<Expr>,
-}
 
-impl Parse for WithProps {
-    fn parse(input: ParseStream) -> ParseResult<Self> {
-        let with = input.parse::<Ident>()?;
-        if with != "with" {
-            return Err(input.error("expected to find `with` token"));
+            match props {
+                ref mut props @ Props::None => {
+                    *props = Props::List(Box::new(ListProps {
+                        props: vec![prop],
+                        node_ref: None,
+                    }));
+                }
+                Props::With(_) => {
+                    return Err(syn::Error::new_spanned(&token, Props::collision_message()))
+                }
+                Props::List(ref mut list) => {
+                    list.props.push(prop);
+                }
+            };
         }
-        let props = input.parse::<Ident>()?;
-        let _ = input.parse::<Token![,]>();
 
-        // Check for the ref tag after `with`
-        let mut node_ref = None;
-        if let Some(ident) = input.cursor().ident() {
-            let prop = input.parse::<HtmlProp>()?;
-            if ident.0 == "ref" {
-                node_ref = Some(prop.value);
-            } else {
-                return Err(syn::Error::new_spanned(&prop.label, "unexpected token"));
+        match props {
+            Props::None => {}
+            Props::With(ref mut p) => p.node_ref = node_ref,
+            Props::List(ref mut p) => {
+                p.node_ref = node_ref;
+
+                // alphabetize
+                p.props.sort_by(|a, b| {
+                    if a.label == b.label {
+                        Ordering::Equal
+                    } else if a.label.to_string() == "children" {
+                        Ordering::Greater
+                    } else if b.label.to_string() == "children" {
+                        Ordering::Less
+                    } else {
+                        a.label
+                            .to_string()
+                            .partial_cmp(&b.label.to_string())
+                            .unwrap()
+                    }
+                });
             }
-        }
+        };
 
-        Ok(WithProps { props, node_ref })
+        Ok(props)
     }
 }
diff --git a/crates/macro/tests/macro/html-component-fail.rs b/crates/macro/tests/macro/html-component-fail.rs
index 6a9013d7031..0a42e145740 100644
--- a/crates/macro/tests/macro/html-component-fail.rs
+++ b/crates/macro/tests/macro/html-component-fail.rs
@@ -73,9 +73,16 @@ fn compile_fail() {
     html! { <Child props /> };
     html! { <Child with props > };
     html! { <Child with props ref=() ref=() /> };
-    html! { <Child ref=() with props /> };
+    html! { <Child with props ref=() ref=() value=1 /> };
+    html! { <Child with props ref=() value=1 ref=() /> };
+    html! { <Child with props value=1 ref=()  ref=() /> };
+    html! { <Child value=1 with props  ref=()  ref=() /> };
+    html! { <Child value=1 ref=() with props ref=() /> };
+    html! { <Child ref=() ref=() value=1  with props  /> };
     html! { <Child with blah /> };
     html! { <Child with props () /> };
+    html! { <Child value=1 with props /> };
+    html! { <Child with props value=1 /> };
     html! { <Child type=0 /> };
     html! { <Child invalid-prop-name=0 /> };
     html! { <Child unknown="unknown" /> };
diff --git a/crates/macro/tests/macro/html-component-fail.stderr b/crates/macro/tests/macro/html-component-fail.stderr
index 3f792855b44..82de6abf39d 100644
--- a/crates/macro/tests/macro/html-component-fail.stderr
+++ b/crates/macro/tests/macro/html-component-fail.stderr
@@ -30,107 +30,149 @@ error: this open tag has no corresponding close tag
 74 |     html! { <Child with props > };
    |             ^^^^^^^^^^^^^^^^^^^
 
-error: unexpected token
+error: too many refs set
   --> $DIR/html-component-fail.rs:75:38
    |
 75 |     html! { <Child with props ref=() ref=() /> };
    |                                      ^^^
 
-error: unexpected token
-  --> $DIR/html-component-fail.rs:76:27
+error: too many refs set
+  --> $DIR/html-component-fail.rs:76:38
    |
-76 |     html! { <Child ref=() with props /> };
-   |                           ^^^^
+76 |     html! { <Child with props ref=() ref=() value=1 /> };
+   |                                      ^^^
 
-error: unexpected token
+error: Using special syntax `with props` along with named prop is not allowed. This rule does not apply to special `ref` prop
+  --> $DIR/html-component-fail.rs:77:38
+   |
+77 |     html! { <Child with props ref=() value=1 ref=() /> };
+   |                                      ^^^^^
+
+error: Using special syntax `with props` along with named prop is not allowed. This rule does not apply to special `ref` prop
   --> $DIR/html-component-fail.rs:78:31
    |
-78 |     html! { <Child with props () /> };
+78 |     html! { <Child with props value=1 ref=()  ref=() /> };
+   |                               ^^^^^
+
+error: Using special syntax `with props` along with named prop is not allowed. This rule does not apply to special `ref` prop
+  --> $DIR/html-component-fail.rs:79:28
+   |
+79 |     html! { <Child value=1 with props  ref=()  ref=() /> };
+   |                            ^^^^
+
+error: Using special syntax `with props` along with named prop is not allowed. This rule does not apply to special `ref` prop
+  --> $DIR/html-component-fail.rs:80:35
+   |
+80 |     html! { <Child value=1 ref=() with props ref=() /> };
+   |                                   ^^^^
+
+error: too many refs set
+  --> $DIR/html-component-fail.rs:81:27
+   |
+81 |     html! { <Child ref=() ref=() value=1  with props  /> };
+   |                           ^^^
+
+error: unexpected token
+  --> $DIR/html-component-fail.rs:83:31
+   |
+83 |     html! { <Child with props () /> };
    |                               ^^
 
+error: Using special syntax `with props` along with named prop is not allowed. This rule does not apply to special `ref` prop
+  --> $DIR/html-component-fail.rs:84:28
+   |
+84 |     html! { <Child value=1 with props /> };
+   |                            ^^^^
+
+error: Using special syntax `with props` along with named prop is not allowed. This rule does not apply to special `ref` prop
+  --> $DIR/html-component-fail.rs:85:31
+   |
+85 |     html! { <Child with props value=1 /> };
+   |                               ^^^^^
+
 error: expected identifier
-  --> $DIR/html-component-fail.rs:79:20
+  --> $DIR/html-component-fail.rs:86:20
    |
-79 |     html! { <Child type=0 /> };
+86 |     html! { <Child type=0 /> };
    |                    ^^^^
 
 error: expected identifier
-  --> $DIR/html-component-fail.rs:80:20
+  --> $DIR/html-component-fail.rs:87:20
    |
-80 |     html! { <Child invalid-prop-name=0 /> };
+87 |     html! { <Child invalid-prop-name=0 /> };
    |                    ^^^^^^^^^^^^^^^^^
 
 error: unexpected end of input, expected expression
-  --> $DIR/html-component-fail.rs:82:5
+  --> $DIR/html-component-fail.rs:89:5
    |
-82 |     html! { <Child string= /> };
+89 |     html! { <Child string= /> };
    |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    |
    = note: this error originates in a macro outside of the current crate (in Nightly builds, run with -Z external-macro-backtrace for more info)
 
 error: too many refs set
-  --> $DIR/html-component-fail.rs:87:33
+  --> $DIR/html-component-fail.rs:94:33
    |
-87 |     html! { <Child int=1 ref=() ref=() /> };
+94 |     html! { <Child int=1 ref=() ref=() /> };
    |                                 ^^^
 
 error: this close tag has no corresponding open tag
-  --> $DIR/html-component-fail.rs:90:13
+  --> $DIR/html-component-fail.rs:97:13
    |
-90 |     html! { </Child> };
+97 |     html! { </Child> };
    |             ^^^^^^^^
 
 error: this open tag has no corresponding close tag
-  --> $DIR/html-component-fail.rs:91:13
+  --> $DIR/html-component-fail.rs:98:13
    |
-91 |     html! { <Child><Child></Child> };
+98 |     html! { <Child><Child></Child> };
    |             ^^^^^^^
 
 error: only one root html element allowed
-  --> $DIR/html-component-fail.rs:92:28
+  --> $DIR/html-component-fail.rs:99:28
    |
-92 |     html! { <Child></Child><Child></Child> };
+99 |     html! { <Child></Child><Child></Child> };
    |                            ^^^^^^^^^^^^^^^
 
 error: this close tag has no corresponding open tag
-   --> $DIR/html-component-fail.rs:101:30
+   --> $DIR/html-component-fail.rs:108:30
     |
-101 |     html! { <Generic<String>></Generic> };
+108 |     html! { <Generic<String>></Generic> };
     |                              ^^^^^^^^^^
 
 error: this close tag has no corresponding open tag
-   --> $DIR/html-component-fail.rs:102:30
+   --> $DIR/html-component-fail.rs:109:30
     |
-102 |     html! { <Generic<String>></Generic<Vec<String>>> };
+109 |     html! { <Generic<String>></Generic<Vec<String>>> };
     |                              ^^^^^^^^^^^^^^^^^^^^^^^
 
 error[E0425]: cannot find value `blah` in this scope
-  --> $DIR/html-component-fail.rs:77:25
+  --> $DIR/html-component-fail.rs:82:25
    |
-77 |     html! { <Child with blah /> };
+82 |     html! { <Child with blah /> };
    |                         ^^^^ not found in this scope
 
 error[E0609]: no field `unknown` on type `ChildProperties`
-  --> $DIR/html-component-fail.rs:81:20
+  --> $DIR/html-component-fail.rs:88:20
    |
-81 |     html! { <Child unknown="unknown" /> };
+88 |     html! { <Child unknown="unknown" /> };
    |                    ^^^^^^^ unknown field
    |
    = note: available fields are: `string`, `int`
 
 error[E0599]: no method named `unknown` found for type `ChildPropertiesBuilder<ChildPropertiesBuilderStep_missing_required_prop_int>` in the current scope
-  --> $DIR/html-component-fail.rs:81:20
+  --> $DIR/html-component-fail.rs:88:20
    |
 6  | #[derive(Clone, Properties, PartialEq)]
    |                 ---------- method `unknown` not found for this
 ...
-81 |     html! { <Child unknown="unknown" /> };
+88 |     html! { <Child unknown="unknown" /> };
    |                    ^^^^^^^ method not found in `ChildPropertiesBuilder<ChildPropertiesBuilderStep_missing_required_prop_int>`
 
 error[E0277]: the trait bound `yew::virtual_dom::vcomp::VComp: yew::virtual_dom::Transformer<(), std::string::String>` is not satisfied
-  --> $DIR/html-component-fail.rs:83:33
+  --> $DIR/html-component-fail.rs:90:33
    |
-83 |     html! { <Child int=1 string={} /> };
+90 |     html! { <Child int=1 string={} /> };
    |                                 ^^ the trait `yew::virtual_dom::Transformer<(), std::string::String>` is not implemented for `yew::virtual_dom::vcomp::VComp`
    |
    = help: the following implementations were found:
@@ -142,9 +184,9 @@ error[E0277]: the trait bound `yew::virtual_dom::vcomp::VComp: yew::virtual_dom:
    = note: required by `yew::virtual_dom::Transformer::transform`
 
 error[E0277]: the trait bound `yew::virtual_dom::vcomp::VComp: yew::virtual_dom::Transformer<{integer}, std::string::String>` is not satisfied
-  --> $DIR/html-component-fail.rs:84:33
+  --> $DIR/html-component-fail.rs:91:33
    |
-84 |     html! { <Child int=1 string=3 /> };
+91 |     html! { <Child int=1 string=3 /> };
    |                                 ^ the trait `yew::virtual_dom::Transformer<{integer}, std::string::String>` is not implemented for `yew::virtual_dom::vcomp::VComp`
    |
    = help: the following implementations were found:
@@ -156,9 +198,9 @@ error[E0277]: the trait bound `yew::virtual_dom::vcomp::VComp: yew::virtual_dom:
    = note: required by `yew::virtual_dom::Transformer::transform`
 
 error[E0277]: the trait bound `yew::virtual_dom::vcomp::VComp: yew::virtual_dom::Transformer<{integer}, std::string::String>` is not satisfied
-  --> $DIR/html-component-fail.rs:85:33
+  --> $DIR/html-component-fail.rs:92:33
    |
-85 |     html! { <Child int=1 string={3} /> };
+92 |     html! { <Child int=1 string={3} /> };
    |                                 ^^^ the trait `yew::virtual_dom::Transformer<{integer}, std::string::String>` is not implemented for `yew::virtual_dom::vcomp::VComp`
    |
    = help: the following implementations were found:
@@ -170,15 +212,15 @@ error[E0277]: the trait bound `yew::virtual_dom::vcomp::VComp: yew::virtual_dom:
    = note: required by `yew::virtual_dom::Transformer::transform`
 
 error[E0308]: mismatched types
-  --> $DIR/html-component-fail.rs:86:30
+  --> $DIR/html-component-fail.rs:93:30
    |
-86 |     html! { <Child int=1 ref=() /> };
+93 |     html! { <Child int=1 ref=() /> };
    |                              ^^ expected struct `yew::html::NodeRef`, found `()`
 
 error[E0277]: the trait bound `yew::virtual_dom::vcomp::VComp: yew::virtual_dom::Transformer<u32, i32>` is not satisfied
-  --> $DIR/html-component-fail.rs:88:24
+  --> $DIR/html-component-fail.rs:95:24
    |
-88 |     html! { <Child int=0u32 /> };
+95 |     html! { <Child int=0u32 /> };
    |                        ^^^^ the trait `yew::virtual_dom::Transformer<u32, i32>` is not implemented for `yew::virtual_dom::vcomp::VComp`
    |
    = help: the following implementations were found:
@@ -190,12 +232,12 @@ error[E0277]: the trait bound `yew::virtual_dom::vcomp::VComp: yew::virtual_dom:
    = note: required by `yew::virtual_dom::Transformer::transform`
 
 error[E0599]: no method named `string` found for type `ChildPropertiesBuilder<ChildPropertiesBuilderStep_missing_required_prop_int>` in the current scope
-  --> $DIR/html-component-fail.rs:89:20
+  --> $DIR/html-component-fail.rs:96:20
    |
 6  | #[derive(Clone, Properties, PartialEq)]
    |                 ---------- method `string` not found for this
 ...
-89 |     html! { <Child string="abc" /> };
+96 |     html! { <Child string="abc" /> };
    |                    ^^^^^^ method not found in `ChildPropertiesBuilder<ChildPropertiesBuilderStep_missing_required_prop_int>`
    |
    = help: items from traits can only be used if the trait is implemented and in scope
@@ -203,70 +245,70 @@ error[E0599]: no method named `string` found for type `ChildPropertiesBuilder<Ch
            candidate #1: `proc_macro::bridge::server::Literal`
 
 error[E0599]: no method named `children` found for type `ChildPropertiesBuilder<ChildPropertiesBuilderStep_missing_required_prop_int>` in the current scope
-  --> $DIR/html-component-fail.rs:93:5
-   |
-6  | #[derive(Clone, Properties, PartialEq)]
-   |                 ---------- method `children` not found for this
+   --> $DIR/html-component-fail.rs:100:5
+    |
+6   | #[derive(Clone, Properties, PartialEq)]
+    |                 ---------- method `children` not found for this
 ...
-93 |     html! { <Child>{ "Not allowed" }</Child> };
-   |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ method not found in `ChildPropertiesBuilder<ChildPropertiesBuilderStep_missing_required_prop_int>`
-   |
-   = note: this error originates in a macro outside of the current crate (in Nightly builds, run with -Z external-macro-backtrace for more info)
+100 |     html! { <Child>{ "Not allowed" }</Child> };
+    |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ method not found in `ChildPropertiesBuilder<ChildPropertiesBuilderStep_missing_required_prop_int>`
+    |
+    = note: this error originates in a macro outside of the current crate (in Nightly builds, run with -Z external-macro-backtrace for more info)
 
 error[E0599]: no method named `build` found for type `ChildContainerPropertiesBuilder<ChildContainerPropertiesBuilderStep_missing_required_prop_children>` in the current scope
-  --> $DIR/html-component-fail.rs:95:5
-   |
-29 | #[derive(Clone, Properties)]
-   |                 ---------- method `build` not found for this
+   --> $DIR/html-component-fail.rs:102:5
+    |
+29  | #[derive(Clone, Properties)]
+    |                 ---------- method `build` not found for this
 ...
-95 |     html! { <ChildContainer /> };
-   |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ method not found in `ChildContainerPropertiesBuilder<ChildContainerPropertiesBuilderStep_missing_required_prop_children>`
-   |
-   = help: items from traits can only be used if the trait is implemented and in scope
-   = note: the following trait defines an item `build`, perhaps you need to implement it:
-           candidate #1: `proc_macro::bridge::server::TokenStreamBuilder`
-   = note: this error originates in a macro outside of the current crate (in Nightly builds, run with -Z external-macro-backtrace for more info)
+102 |     html! { <ChildContainer /> };
+    |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ method not found in `ChildContainerPropertiesBuilder<ChildContainerPropertiesBuilderStep_missing_required_prop_children>`
+    |
+    = help: items from traits can only be used if the trait is implemented and in scope
+    = note: the following trait defines an item `build`, perhaps you need to implement it:
+            candidate #1: `proc_macro::bridge::server::TokenStreamBuilder`
+    = note: this error originates in a macro outside of the current crate (in Nightly builds, run with -Z external-macro-backtrace for more info)
 
 error[E0599]: no method named `build` found for type `ChildContainerPropertiesBuilder<ChildContainerPropertiesBuilderStep_missing_required_prop_children>` in the current scope
-  --> $DIR/html-component-fail.rs:96:5
-   |
-29 | #[derive(Clone, Properties)]
-   |                 ---------- method `build` not found for this
+   --> $DIR/html-component-fail.rs:103:5
+    |
+29  | #[derive(Clone, Properties)]
+    |                 ---------- method `build` not found for this
 ...
-96 |     html! { <ChildContainer></ChildContainer> };
-   |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ method not found in `ChildContainerPropertiesBuilder<ChildContainerPropertiesBuilderStep_missing_required_prop_children>`
-   |
-   = help: items from traits can only be used if the trait is implemented and in scope
-   = note: the following trait defines an item `build`, perhaps you need to implement it:
-           candidate #1: `proc_macro::bridge::server::TokenStreamBuilder`
-   = note: this error originates in a macro outside of the current crate (in Nightly builds, run with -Z external-macro-backtrace for more info)
+103 |     html! { <ChildContainer></ChildContainer> };
+    |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ method not found in `ChildContainerPropertiesBuilder<ChildContainerPropertiesBuilderStep_missing_required_prop_children>`
+    |
+    = help: items from traits can only be used if the trait is implemented and in scope
+    = note: the following trait defines an item `build`, perhaps you need to implement it:
+            candidate #1: `proc_macro::bridge::server::TokenStreamBuilder`
+    = note: this error originates in a macro outside of the current crate (in Nightly builds, run with -Z external-macro-backtrace for more info)
 
 error[E0277]: the trait bound `yew::virtual_dom::vcomp::VChild<Child>: std::convert::From<&str>` is not satisfied
-  --> $DIR/html-component-fail.rs:97:5
-   |
-97 |     html! { <ChildContainer>{ "Not allowed" }</ChildContainer> };
-   |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ the trait `std::convert::From<&str>` is not implemented for `yew::virtual_dom::vcomp::VChild<Child>`
-   |
-   = note: required because of the requirements on the impl of `std::convert::Into<yew::virtual_dom::vcomp::VChild<Child>>` for `&str`
-   = note: required because of the requirements on the impl of `std::iter::IntoIterator` for `yew::utils::NodeSeq<&str, yew::virtual_dom::vcomp::VChild<Child>>`
-   = note: this error originates in a macro outside of the current crate (in Nightly builds, run with -Z external-macro-backtrace for more info)
+   --> $DIR/html-component-fail.rs:104:5
+    |
+104 |     html! { <ChildContainer>{ "Not allowed" }</ChildContainer> };
+    |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ the trait `std::convert::From<&str>` is not implemented for `yew::virtual_dom::vcomp::VChild<Child>`
+    |
+    = note: required because of the requirements on the impl of `std::convert::Into<yew::virtual_dom::vcomp::VChild<Child>>` for `&str`
+    = note: required because of the requirements on the impl of `std::iter::IntoIterator` for `yew::utils::NodeSeq<&str, yew::virtual_dom::vcomp::VChild<Child>>`
+    = note: this error originates in a macro outside of the current crate (in Nightly builds, run with -Z external-macro-backtrace for more info)
 
 error[E0277]: the trait bound `yew::virtual_dom::vcomp::VChild<Child>: std::convert::From<yew::virtual_dom::vnode::VNode>` is not satisfied
-  --> $DIR/html-component-fail.rs:98:5
-   |
-98 |     html! { <ChildContainer><></></ChildContainer> };
-   |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ the trait `std::convert::From<yew::virtual_dom::vnode::VNode>` is not implemented for `yew::virtual_dom::vcomp::VChild<Child>`
-   |
-   = note: required because of the requirements on the impl of `std::convert::Into<yew::virtual_dom::vcomp::VChild<Child>>` for `yew::virtual_dom::vnode::VNode`
-   = note: required because of the requirements on the impl of `std::iter::IntoIterator` for `yew::utils::NodeSeq<yew::virtual_dom::vnode::VNode, yew::virtual_dom::vcomp::VChild<Child>>`
-   = note: this error originates in a macro outside of the current crate (in Nightly builds, run with -Z external-macro-backtrace for more info)
+   --> $DIR/html-component-fail.rs:105:5
+    |
+105 |     html! { <ChildContainer><></></ChildContainer> };
+    |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ the trait `std::convert::From<yew::virtual_dom::vnode::VNode>` is not implemented for `yew::virtual_dom::vcomp::VChild<Child>`
+    |
+    = note: required because of the requirements on the impl of `std::convert::Into<yew::virtual_dom::vcomp::VChild<Child>>` for `yew::virtual_dom::vnode::VNode`
+    = note: required because of the requirements on the impl of `std::iter::IntoIterator` for `yew::utils::NodeSeq<yew::virtual_dom::vnode::VNode, yew::virtual_dom::vcomp::VChild<Child>>`
+    = note: this error originates in a macro outside of the current crate (in Nightly builds, run with -Z external-macro-backtrace for more info)
 
 error[E0277]: the trait bound `yew::virtual_dom::vcomp::VChild<Child>: std::convert::From<yew::virtual_dom::vnode::VNode>` is not satisfied
-  --> $DIR/html-component-fail.rs:99:5
-   |
-99 |     html! { <ChildContainer><other /></ChildContainer> };
-   |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ the trait `std::convert::From<yew::virtual_dom::vnode::VNode>` is not implemented for `yew::virtual_dom::vcomp::VChild<Child>`
-   |
-   = note: required because of the requirements on the impl of `std::convert::Into<yew::virtual_dom::vcomp::VChild<Child>>` for `yew::virtual_dom::vnode::VNode`
-   = note: required because of the requirements on the impl of `std::iter::IntoIterator` for `yew::utils::NodeSeq<yew::virtual_dom::vnode::VNode, yew::virtual_dom::vcomp::VChild<Child>>`
-   = note: this error originates in a macro outside of the current crate (in Nightly builds, run with -Z external-macro-backtrace for more info)
+   --> $DIR/html-component-fail.rs:106:5
+    |
+106 |     html! { <ChildContainer><other /></ChildContainer> };
+    |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ the trait `std::convert::From<yew::virtual_dom::vnode::VNode>` is not implemented for `yew::virtual_dom::vcomp::VChild<Child>`
+    |
+    = note: required because of the requirements on the impl of `std::convert::Into<yew::virtual_dom::vcomp::VChild<Child>>` for `yew::virtual_dom::vnode::VNode`
+    = note: required because of the requirements on the impl of `std::iter::IntoIterator` for `yew::utils::NodeSeq<yew::virtual_dom::vnode::VNode, yew::virtual_dom::vcomp::VChild<Child>>`
+    = note: this error originates in a macro outside of the current crate (in Nightly builds, run with -Z external-macro-backtrace for more info)
diff --git a/crates/macro/tests/macro/html-component-pass.rs b/crates/macro/tests/macro/html-component-pass.rs
index 8f1d823960c..cf70b1e3825 100644
--- a/crates/macro/tests/macro/html-component-pass.rs
+++ b/crates/macro/tests/macro/html-component-pass.rs
@@ -181,12 +181,15 @@ fn compile_pass() {
 
     let props = <Child as Component>::Properties::default();
     let props2 = <Child as Component>::Properties::default();
+    let props3 = <Child as Component>::Properties::default();
+    let props4 = <Child as Component>::Properties::default();
+    let node_ref = NodeRef::default();
     html! {
         <>
             <Child with props />
-
-            // backwards compat
-            <Child: with props2, />
+            <Child: with props2, /> // backwards compat
+            <Child ref=node_ref.clone() with props3 />
+            <Child with props4 ref=node_ref />
         </>
     };