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 dfd323f9f91..dc81c66db22 100644
--- a/packages/yew-macro/tests/html_macro/html-element-pass.rs
+++ b/packages/yew-macro/tests/html_macro/html-element-pass.rs
@@ -121,6 +121,9 @@ fn compile_pass() {
 
     // test for https://github.com/yewstack/yew/issues/2810
     ::yew::html! {  <div data-type="date" data-as="calender" /> };
+
+    let option_vnode = ::std::option::Option::Some(::yew::html! {});
+    ::yew::html! { <div>{option_vnode}</div> };
 }
 
 fn main() {}
diff --git a/packages/yew/src/utils/mod.rs b/packages/yew/src/utils/mod.rs
index e5b999e72c5..29d537af5b9 100644
--- a/packages/yew/src/utils/mod.rs
+++ b/packages/yew/src/utils/mod.rs
@@ -23,6 +23,15 @@ impl<IN: Into<OUT>, OUT> From<IN> for NodeSeq<IN, OUT> {
     }
 }
 
+impl<IN: Into<OUT>, OUT> From<Option<IN>> for NodeSeq<IN, OUT> {
+    fn from(val: Option<IN>) -> Self {
+        Self(
+            val.map(|s| vec![s.into()]).unwrap_or_default(),
+            PhantomData::default(),
+        )
+    }
+}
+
 impl<IN: Into<OUT>, OUT> From<Vec<IN>> for NodeSeq<IN, OUT> {
     fn from(val: Vec<IN>) -> Self {
         Self(