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! { {mfrac_node} }; + + 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";