diff --git a/packages/yew/src/dom_bundle/btag/mod.rs b/packages/yew/src/dom_bundle/btag/mod.rs
index 7d2f06106..0ef481092 100644
--- a/packages/yew/src/dom_bundle/btag/mod.rs
+++ b/packages/yew/src/dom_bundle/btag/mod.rs
@@ -15,7 +15,7 @@ use web_sys::{Element, HtmlTextAreaElement as TextAreaElement};
use super::{BList, BNode, BSubtree, DomSlot, Reconcilable, ReconcileTarget};
use crate::html::AnyScope;
-use crate::virtual_dom::vtag::{InputFields, VTagInner, Value, SVG_NAMESPACE};
+use crate::virtual_dom::vtag::{InputFields, VTagInner, Value, MATHML_NAMESPACE, SVG_NAMESPACE};
use crate::virtual_dom::{Attributes, Key, VTag};
use crate::NodeRef;
@@ -232,6 +232,7 @@ impl Reconcilable for VTag {
impl VTag {
fn create_element(&self, parent: &Element) -> Element {
let tag = self.tag();
+
if tag == "svg"
|| parent
.namespace_uri()
@@ -241,6 +242,15 @@ impl VTag {
document()
.create_element_ns(namespace, tag)
.expect("can't create namespaced element for vtag")
+ } else if tag == "math"
+ || parent
+ .namespace_uri()
+ .map_or(false, |ns| ns == MATHML_NAMESPACE)
+ {
+ let namespace = Some(MATHML_NAMESPACE);
+ document()
+ .create_element_ns(namespace, tag)
+ .expect("can't create namespaced element for vtag")
} else {
document()
.create_element(tag)
@@ -588,6 +598,19 @@ mod tests {
assert_namespace(&g_tag, SVG_NAMESPACE);
}
+ #[test]
+ fn supports_mathml() {
+ let (root, scope, parent) = setup_parent();
+ let mfrac_node = html! { };
+ let math_node = html! { };
+
+ let math_tag = assert_vtag(math_node);
+ let (_, math_tag) = math_tag.attach(&root, &scope, &parent, DomSlot::at_end());
+ assert_namespace(&math_tag, MATHML_NAMESPACE);
+ let mfrac_tag = assert_btag_ref(math_tag.children().get(0).unwrap());
+ assert_namespace(mfrac_tag, MATHML_NAMESPACE);
+ }
+
#[test]
fn it_compares_values() {
let a = html! {
diff --git a/packages/yew/src/virtual_dom/vtag.rs b/packages/yew/src/virtual_dom/vtag.rs
index 6d066c51e..46b9c70f1 100644
--- a/packages/yew/src/virtual_dom/vtag.rs
+++ b/packages/yew/src/virtual_dom/vtag.rs
@@ -15,6 +15,9 @@ use crate::html::{IntoPropValue, NodeRef};
/// SVG namespace string used for creating svg elements
pub const SVG_NAMESPACE: &str = "http://www.w3.org/2000/svg";
+/// MathML namespace string used for creating MathML elements
+pub const MATHML_NAMESPACE: &str = "http://www.w3.org/1998/Math/MathML";
+
/// Default namespace for html elements
pub const HTML_NAMESPACE: &str = "http://www.w3.org/1999/xhtml";