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 72b3471d217..4301e61746d 100644
--- a/packages/yew-macro/src/html_tree/html_dashed_name.rs
+++ b/packages/yew-macro/src/html_tree/html_dashed_name.rs
@@ -79,7 +79,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![-]>()?, input.call(Ident::parse_any)?));
         }
 
         Ok(HtmlDashedName { name, extended })
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 3729c3ec362..a836c0f974d 100644
--- a/packages/yew-macro/tests/html_macro/html-element-pass.rs
+++ b/packages/yew-macro/tests/html_macro/html-element-pass.rs
@@ -118,6 +118,9 @@ fn compile_pass() {
     // 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> };
+
+    // test for https://github.com/yewstack/yew/issues/2810
+    ::yew::html! {  <div data-type="date" data-as="calender" /> }
 }
 
 fn main() {}