script: use Element::create instead of DOM struct constructors (#39325)

Creating elements by directly calling their interface constructors leads
to some state not being intialized correctly (see #39285). It is also
not in line with the specifications as many of them refer to the
[`create an element`][1] algorithm when an element needs to be created,
which directly maps to `Element::create` in the script crate.

So, switch all such places where elements are created by script to use
`Element::create`.

[1]: https://dom.spec.whatwg.org/#concept-create-element

Testing: Existing WPT tests.

Fixes: #39285

Signed-off-by: Mukilan Thiyagarajan <mukilan@igalia.com>

components/script/dom/domimplementation.rs

@@ -3,7 +3,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
 use dom_struct::dom_struct;
-use html5ever::{local_name, ns};
+use html5ever::{QualName, local_name, ns};
 use script_bindings::error::Error;
 use script_traits::DocumentActivity;
 
@@ -22,12 +22,10 @@ use crate::dom::bindings::root::{Dom, DomRoot};
 use crate::dom::bindings::str::DOMString;
 use crate::dom::document::{Document, DocumentSource, HasBrowsingContext, IsHTMLDocument};
 use crate::dom::documenttype::DocumentType;
-use crate::dom::html::htmlbodyelement::HTMLBodyElement;
-use crate::dom::html::htmlheadelement::HTMLHeadElement;
-use crate::dom::html::htmlhtmlelement::HTMLHtmlElement;
-use crate::dom::html::htmltitleelement::HTMLTitleElement;
+use crate::dom::element::{CustomElementCreationMode, ElementCreator};
 use crate::dom::node::Node;
 use crate::dom::text::Text;
+use crate::dom::types::Element;
 use crate::dom::xmldocument::XMLDocument;
 use crate::script_runtime::CanGc;
 
@@ -199,10 +197,12 @@ impl DOMImplementationMethods<crate::DomTypeHolder> for DOMImplementation {
         {
             // Step 4.
             let doc_node = doc.upcast::<Node>();
-            let doc_html = DomRoot::upcast::<Node>(HTMLHtmlElement::new(
-                local_name!("html"),
+            let doc_html = DomRoot::upcast::<Node>(Element::create(
+                QualName::new(None, ns!(html), local_name!("html")),
                 None,
                 &doc,
+                ElementCreator::ScriptCreated,
+                CustomElementCreationMode::Asynchronous,
                 None,
                 can_gc,
             ));
@@ -212,10 +212,12 @@ impl DOMImplementationMethods<crate::DomTypeHolder> for DOMImplementation {
 
             {
                 // Step 5.
-                let doc_head = DomRoot::upcast::<Node>(HTMLHeadElement::new(
-                    local_name!("head"),
+                let doc_head = DomRoot::upcast::<Node>(Element::create(
+                    QualName::new(None, ns!(html), local_name!("head")),
                     None,
                     &doc,
+                    ElementCreator::ScriptCreated,
+                    CustomElementCreationMode::Asynchronous,
                     None,
                     can_gc,
                 ));
@@ -224,10 +226,12 @@ impl DOMImplementationMethods<crate::DomTypeHolder> for DOMImplementation {
                 // Step 6.
                 if let Some(title_str) = title {
                     // Step 6.1.
-                    let doc_title = DomRoot::upcast::<Node>(HTMLTitleElement::new(
-                        local_name!("title"),
+                    let doc_title = DomRoot::upcast::<Node>(Element::create(
+                        QualName::new(None, ns!(html), local_name!("title")),
                         None,
                         &doc,
+                        ElementCreator::ScriptCreated,
+                        CustomElementCreationMode::Asynchronous,
                         None,
                         can_gc,
                     ));
@@ -240,7 +244,15 @@ impl DOMImplementationMethods<crate::DomTypeHolder> for DOMImplementation {
             }
 
             // Step 7.
-            let doc_body = HTMLBodyElement::new(local_name!("body"), None, &doc, None, can_gc);
+            let doc_body = Element::create(
+                QualName::new(None, ns!(html), local_name!("body")),
+                None,
+                &doc,
+                ElementCreator::ScriptCreated,
+                CustomElementCreationMode::Asynchronous,
+                None,
+                can_gc,
+            );
             doc_html.AppendChild(doc_body.upcast(), can_gc).unwrap();
         }
 

components/script/dom/element.rs

@@ -2957,13 +2957,15 @@ impl Element {
             },
             // set context to the result of creating an element
             // given this's node document, "body", and the HTML namespace.
-            _ => DomRoot::upcast(HTMLBodyElement::new(
-                local_name!("body"),
+            _ => Element::create(
+                QualName::new(None, ns!(html), local_name!("body")),
                 None,
                 owner_doc,
+                ElementCreator::ScriptCreated,
+                CustomElementCreationMode::Asynchronous,
                 None,
                 can_gc,
-            )),
+            ),
         }
     }
 

components/script/dom/html/htmldetailselement.rs

@@ -5,7 +5,7 @@
 use std::cell::{Cell, Ref};
 
 use dom_struct::dom_struct;
-use html5ever::{LocalName, Prefix, local_name};
+use html5ever::{LocalName, Prefix, QualName, local_name, ns};
 use js::rust::HandleObject;
 
 use crate::dom::attr::Attr;
@@ -18,7 +18,7 @@ use crate::dom::bindings::inheritance::Castable;
 use crate::dom::bindings::refcounted::Trusted;
 use crate::dom::bindings::root::{Dom, DomRoot};
 use crate::dom::document::Document;
-use crate::dom::element::{AttributeMutation, Element};
+use crate::dom::element::{AttributeMutation, CustomElementCreationMode, Element, ElementCreator};
 use crate::dom::eventtarget::EventTarget;
 use crate::dom::html::htmlelement::HTMLElement;
 use crate::dom::html::htmlslotelement::HTMLSlotElement;
@@ -105,13 +105,30 @@ impl HTMLDetailsElement {
             .upcast::<Element>()
             .attach_ua_shadow_root(false, can_gc);
 
-        let summary = HTMLSlotElement::new(local_name!("slot"), None, &document, None, can_gc);
+        let summary = Element::create(
+            QualName::new(None, ns!(html), local_name!("slot")),
+            None,
+            &document,
+            ElementCreator::ScriptCreated,
+            CustomElementCreationMode::Asynchronous,
+            None,
+            can_gc,
+        );
+        let summary = DomRoot::downcast::<HTMLSlotElement>(summary).unwrap();
         root.upcast::<Node>()
             .AppendChild(summary.upcast::<Node>(), can_gc)
             .unwrap();
 
-        let fallback_summary =
-            HTMLElement::new(local_name!("summary"), None, &document, None, can_gc);
+        let fallback_summary = Element::create(
+            QualName::new(None, ns!(html), local_name!("summary")),
+            None,
+            &document,
+            ElementCreator::ScriptCreated,
+            CustomElementCreationMode::Asynchronous,
+            None,
+            can_gc,
+        );
+        let fallback_summary = DomRoot::downcast::<HTMLElement>(fallback_summary).unwrap();
         fallback_summary
             .upcast::<Node>()
             .set_text_content_for_element(Some(DEFAULT_SUMMARY.into()), can_gc);
@@ -120,7 +137,16 @@ impl HTMLDetailsElement {
             .AppendChild(fallback_summary.upcast::<Node>(), can_gc)
             .unwrap();
 
-        let descendants = HTMLSlotElement::new(local_name!("slot"), None, &document, None, can_gc);
+        let descendants = Element::create(
+            QualName::new(None, ns!(html), local_name!("slot")),
+            None,
+            &document,
+            ElementCreator::ScriptCreated,
+            CustomElementCreationMode::Asynchronous,
+            None,
+            can_gc,
+        );
+        let descendants = DomRoot::downcast::<HTMLSlotElement>(descendants).unwrap();
         root.upcast::<Node>()
             .AppendChild(descendants.upcast::<Node>(), can_gc)
             .unwrap();

components/script/dom/html/htmlelement.rs

@@ -7,7 +7,7 @@ use std::default::Default;
 use std::rc::Rc;
 
 use dom_struct::dom_struct;
-use html5ever::{LocalName, Prefix, local_name, ns};
+use html5ever::{LocalName, Prefix, QualName, local_name, ns};
 use js::rust::HandleObject;
 use layout_api::{QueryMsg, ScrollContainerQueryType, ScrollContainerResponse};
 use script_bindings::codegen::GenericBindings::DocumentBinding::DocumentMethods;
@@ -36,12 +36,11 @@ use crate::dom::customelementregistry::{CallbackReaction, CustomElementState};
 use crate::dom::document::{Document, FocusInitiator};
 use crate::dom::documentfragment::DocumentFragment;
 use crate::dom::domstringmap::DOMStringMap;
-use crate::dom::element::{AttributeMutation, Element};
+use crate::dom::element::{AttributeMutation, CustomElementCreationMode, Element, ElementCreator};
 use crate::dom::elementinternals::ElementInternals;
 use crate::dom::event::Event;
 use crate::dom::eventtarget::EventTarget;
 use crate::dom::html::htmlbodyelement::HTMLBodyElement;
-use crate::dom::html::htmlbrelement::HTMLBRElement;
 use crate::dom::html::htmldetailselement::HTMLDetailsElement;
 use crate::dom::html::htmlformelement::{FormControl, HTMLFormElement};
 use crate::dom::html::htmlframesetelement::HTMLFrameSetElement;
@@ -1060,7 +1059,15 @@ impl HTMLElement {
                         text = String::new();
                     }
 
-                    let br = HTMLBRElement::new(local_name!("br"), None, &document, None, can_gc);
+                    let br = Element::create(
+                        QualName::new(None, ns!(html), local_name!("br")),
+                        None,
+                        &document,
+                        ElementCreator::ScriptCreated,
+                        CustomElementCreationMode::Asynchronous,
+                        None,
+                        can_gc,
+                    );
                     fragment
                         .upcast::<Node>()
                         .AppendChild(br.upcast(), can_gc)

components/script/dom/html/htmlinputelement.rs

@@ -18,7 +18,7 @@ use embedder_traits::{
 };
 use encoding_rs::Encoding;
 use euclid::{Point2D, Rect, Size2D};
-use html5ever::{LocalName, Prefix, local_name, ns};
+use html5ever::{LocalName, Prefix, QualName, local_name, ns};
 use js::jsapi::{
     ClippedTime, DateGetMsecSinceEpoch, Handle, JS_ClearPendingException, JSObject, NewDateObject,
     NewUCRegExpObject, ObjectIsDate, RegExpFlag_UnicodeSets, RegExpFlags,
@@ -60,14 +60,15 @@ use crate::dom::bindings::str::{DOMString, FromInputValueString, ToInputValueStr
 use crate::dom::clipboardevent::ClipboardEvent;
 use crate::dom::compositionevent::CompositionEvent;
 use crate::dom::document::Document;
-use crate::dom::element::{AttributeMutation, Element, LayoutElementHelpers};
+use crate::dom::element::{
+    AttributeMutation, CustomElementCreationMode, Element, ElementCreator, LayoutElementHelpers,
+};
 use crate::dom::event::{Event, EventBubbles, EventCancelable};
 use crate::dom::eventtarget::EventTarget;
 use crate::dom::file::File;
 use crate::dom::filelist::{FileList, LayoutFileListHelpers};
 use crate::dom::globalscope::GlobalScope;
 use crate::dom::html::htmldatalistelement::HTMLDataListElement;
-use crate::dom::html::htmldivelement::HTMLDivElement;
 use crate::dom::html::htmlelement::HTMLElement;
 use crate::dom::html::htmlfieldsetelement::HTMLFieldSetElement;
 use crate::dom::html::htmlformelement::{
@@ -123,9 +124,9 @@ const DEFAULT_FILE_INPUT_VALUE: &str = "No file chosen";
 //                      TextNode within an inline flow. Another example is the horizontal scroll.
 // FIXME(#38263): Refactor these logics into a TextControl wrapper that would decouple all textual input.
 struct InputTypeTextShadowTree {
-    inner_container: Dom<HTMLDivElement>,
-    text_container: Dom<HTMLDivElement>,
-    placeholder_container: DomRefCell<Option<Dom<HTMLDivElement>>>,
+    inner_container: Dom<Element>,
+    text_container: Dom<Element>,
+    placeholder_container: DomRefCell<Option<Dom<Element>>>,
 }
 
 impl InputTypeTextShadowTree {
@@ -158,7 +159,7 @@ impl InputTypeTextShadowTree {
 /// The shadow tree consists of a single div with the currently selected color as
 /// the background.
 struct InputTypeColorShadowTree {
-    color_value: Dom<HTMLDivElement>,
+    color_value: Dom<Element>,
 }
 
 #[derive(Clone, JSTraceable, MallocSizeOf)]
@@ -178,8 +179,17 @@ fn create_ua_widget_div_with_text_node(
     implemented_pseudo: PseudoElement,
     as_first_child: bool,
     can_gc: CanGc,
-) -> DomRoot<HTMLDivElement> {
-    let el = HTMLDivElement::new(local_name!("div"), None, document, None, can_gc);
+) -> DomRoot<Element> {
+    let el = Element::create(
+        QualName::new(None, ns!(html), local_name!("div")),
+        None,
+        document,
+        ElementCreator::ScriptCreated,
+        CustomElementCreationMode::Asynchronous,
+        None,
+        can_gc,
+    );
+
     parent
         .upcast::<Node>()
         .AppendChild(el.upcast::<Node>(), can_gc)
@@ -1168,8 +1178,15 @@ impl HTMLInputElement {
         let shadow_root = self.shadow_root(can_gc);
         Node::replace_all(None, shadow_root.upcast::<Node>(), can_gc);
 
-        let inner_container =
-            HTMLDivElement::new(local_name!("div"), None, &document, None, can_gc);
+        let inner_container = Element::create(
+            QualName::new(None, ns!(html), local_name!("div")),
+            None,
+            &document,
+            ElementCreator::ScriptCreated,
+            CustomElementCreationMode::Asynchronous,
+            None,
+            can_gc,
+        );
         shadow_root
             .upcast::<Node>()
             .AppendChild(inner_container.upcast::<Node>(), can_gc)
@@ -1223,7 +1240,15 @@ impl HTMLInputElement {
         let shadow_root = self.shadow_root(can_gc);
         Node::replace_all(None, shadow_root.upcast::<Node>(), can_gc);
 
-        let color_value = HTMLDivElement::new(local_name!("div"), None, &document, None, can_gc);
+        let color_value = Element::create(
+            QualName::new(None, ns!(html), local_name!("div")),
+            None,
+            &document,
+            ElementCreator::ScriptCreated,
+            CustomElementCreationMode::Asynchronous,
+            None,
+            can_gc,
+        );
         shadow_root
             .upcast::<Node>()
             .AppendChild(color_value.upcast::<Node>(), can_gc)
@@ -1343,10 +1368,11 @@ impl HTMLInputElement {
             value = DOMString::from("#000000");
         }
         let style = format!("background-color: {value}");
-        color_shadow_tree
-            .color_value
-            .upcast::<Element>()
-            .set_string_attribute(&local_name!("style"), style.into(), can_gc);
+        color_shadow_tree.color_value.set_string_attribute(
+            &local_name!("style"),
+            style.into(),
+            can_gc,
+        );
     }
 
     fn update_shadow_tree(&self, can_gc: CanGc) {

components/script/dom/html/htmlmediaelement.rs

@@ -15,7 +15,7 @@ use dom_struct::dom_struct;
 use embedder_traits::{MediaPositionState, MediaSessionEvent, MediaSessionPlaybackState};
 use euclid::default::Size2D;
 use headers::{ContentLength, ContentRange, HeaderMapExt};
-use html5ever::{LocalName, Prefix, local_name, ns};
+use html5ever::{LocalName, Prefix, QualName, local_name, ns};
 use http::StatusCode;
 use http::header::{self, HeaderMap, HeaderValue};
 use ipc_channel::ipc::{self, IpcSharedMemory, channel};
@@ -74,16 +74,14 @@ use crate::dom::blob::Blob;
 use crate::dom::csp::{GlobalCspReporting, Violation};
 use crate::dom::document::Document;
 use crate::dom::element::{
-    AttributeMutation, Element, ElementCreator, cors_setting_for_element,
-    reflect_cross_origin_attribute, set_cross_origin_attribute,
+    AttributeMutation, CustomElementCreationMode, Element, ElementCreator,
+    cors_setting_for_element, reflect_cross_origin_attribute, set_cross_origin_attribute,
 };
 use crate::dom::event::Event;
 use crate::dom::eventtarget::EventTarget;
 use crate::dom::globalscope::GlobalScope;
 use crate::dom::html::htmlelement::HTMLElement;
-use crate::dom::html::htmlscriptelement::HTMLScriptElement;
 use crate::dom::html::htmlsourceelement::HTMLSourceElement;
-use crate::dom::html::htmlstyleelement::HTMLStyleElement;
 use crate::dom::html::htmlvideoelement::HTMLVideoElement;
 use crate::dom::mediaerror::MediaError;
 use crate::dom::mediafragmentparser::MediaFragmentParser;
@@ -2061,12 +2059,13 @@ impl HTMLMediaElement {
             .upcast::<Element>()
             .attach_ua_shadow_root(false, can_gc);
         let document = self.owner_document();
-        let script = HTMLScriptElement::new(
-            local_name!("script"),
+        let script = Element::create(
+            QualName::new(None, ns!(html), local_name!("script")),
             None,
             &document,
-            None,
             ElementCreator::ScriptCreated,
+            CustomElementCreationMode::Asynchronous,
+            None,
             can_gc,
         );
         // This is our hacky way to temporarily workaround the lack of a privileged
@@ -2088,14 +2087,16 @@ impl HTMLMediaElement {
             return;
         }
 
-        let style = HTMLStyleElement::new(
-            local_name!("script"),
+        let style = Element::create(
+            QualName::new(None, ns!(html), local_name!("style")),
             None,
             &document,
-            None,
             ElementCreator::ScriptCreated,
+            CustomElementCreationMode::Asynchronous,
+            None,
             can_gc,
         );
+
         style
             .upcast::<Node>()
             .set_text_content_for_element(Some(DOMString::from(MEDIA_CONTROL_CSS)), can_gc);

components/script/dom/html/htmlmeterelement.rs

@@ -6,7 +6,7 @@ use std::cell::Ref;
 use std::ops::{Add, Div};
 
 use dom_struct::dom_struct;
-use html5ever::{LocalName, Prefix, local_name};
+use html5ever::{LocalName, Prefix, QualName, local_name, ns};
 use js::rust::HandleObject;
 use stylo_dom::ElementState;
 
@@ -20,7 +20,6 @@ use crate::dom::bindings::root::{Dom, DomRoot, MutNullableDom};
 use crate::dom::bindings::str::DOMString;
 use crate::dom::document::Document;
 use crate::dom::element::{AttributeMutation, Element};
-use crate::dom::html::htmldivelement::HTMLDivElement;
 use crate::dom::html::htmlelement::HTMLElement;
 use crate::dom::node::{BindContext, ChildrenMutation, Node, NodeTraits};
 use crate::dom::nodelist::NodeList;
@@ -38,7 +37,7 @@ pub(crate) struct HTMLMeterElement {
 #[derive(Clone, JSTraceable, MallocSizeOf)]
 #[cfg_attr(crown, crown::unrooted_must_root_lint::must_root)]
 struct ShadowTree {
-    meter_value: Dom<HTMLDivElement>,
+    meter_value: Dom<Element>,
 }
 
 /// <https://html.spec.whatwg.org/multipage/#the-meter-element>
@@ -77,7 +76,15 @@ impl HTMLMeterElement {
         let document = self.owner_document();
         let root = self.upcast::<Element>().attach_ua_shadow_root(true, can_gc);
 
-        let meter_value = HTMLDivElement::new(local_name!("div"), None, &document, None, can_gc);
+        let meter_value = Element::create(
+            QualName::new(None, ns!(html), local_name!("div")),
+            None,
+            &document,
+            crate::dom::element::ElementCreator::ScriptCreated,
+            crate::dom::element::CustomElementCreationMode::Asynchronous,
+            None,
+            can_gc,
+        );
         root.upcast::<Node>()
             .AppendChild(meter_value.upcast::<Node>(), can_gc)
             .unwrap();
@@ -153,7 +160,6 @@ impl HTMLMeterElement {
         let style = format!("width: {position}%");
         shadow_tree
             .meter_value
-            .upcast::<Element>()
             .set_string_attribute(&local_name!("style"), style.into(), can_gc);
     }
 }

components/script/dom/html/htmloptionscollection.rs

@@ -5,7 +5,7 @@
 use std::cmp::Ordering;
 
 use dom_struct::dom_struct;
-use html5ever::local_name;
+use html5ever::{QualName, local_name, ns};
 
 use crate::dom::bindings::codegen::Bindings::ElementBinding::ElementMethods;
 use crate::dom::bindings::codegen::Bindings::HTMLCollectionBinding::HTMLCollectionMethods;
@@ -20,7 +20,7 @@ use crate::dom::bindings::inheritance::Castable;
 use crate::dom::bindings::reflector::reflect_dom_object;
 use crate::dom::bindings::root::DomRoot;
 use crate::dom::bindings::str::DOMString;
-use crate::dom::element::Element;
+use crate::dom::element::{CustomElementCreationMode, Element, ElementCreator};
 use crate::dom::html::htmlcollection::{CollectionFilter, HTMLCollection};
 use crate::dom::html::htmloptionelement::HTMLOptionElement;
 use crate::dom::html::htmlselectelement::HTMLSelectElement;
@@ -61,8 +61,15 @@ impl HTMLOptionsCollection {
         let document = root.owner_document();
 
         for _ in 0..count {
-            let element =
-                HTMLOptionElement::new(local_name!("option"), None, &document, None, can_gc);
+            let element = Element::create(
+                QualName::new(None, ns!(html), local_name!("option")),
+                None,
+                &document,
+                ElementCreator::ScriptCreated,
+                CustomElementCreationMode::Asynchronous,
+                None,
+                can_gc,
+            );
             let node = element.upcast::<Node>();
             root.AppendChild(node, can_gc)?;
         }

components/script/dom/html/htmlprogresselement.rs

@@ -5,7 +5,7 @@
 use std::cell::Ref;
 
 use dom_struct::dom_struct;
-use html5ever::{LocalName, Prefix, local_name};
+use html5ever::{LocalName, Prefix, QualName, local_name, ns};
 use js::rust::HandleObject;
 
 use crate::dom::attr::Attr;
@@ -18,8 +18,7 @@ use crate::dom::bindings::num::Finite;
 use crate::dom::bindings::root::{Dom, DomRoot, MutNullableDom};
 use crate::dom::bindings::str::DOMString;
 use crate::dom::document::Document;
-use crate::dom::element::{AttributeMutation, Element};
-use crate::dom::html::htmldivelement::HTMLDivElement;
+use crate::dom::element::{AttributeMutation, CustomElementCreationMode, Element, ElementCreator};
 use crate::dom::html::htmlelement::HTMLElement;
 use crate::dom::node::{BindContext, Node, NodeTraits};
 use crate::dom::nodelist::NodeList;
@@ -37,7 +36,7 @@ pub(crate) struct HTMLProgressElement {
 #[derive(Clone, JSTraceable, MallocSizeOf)]
 #[cfg_attr(crown, crown::unrooted_must_root_lint::must_root)]
 struct ShadowTree {
-    progress_bar: Dom<HTMLDivElement>,
+    progress_bar: Dom<Element>,
 }
 
 impl HTMLProgressElement {
@@ -75,11 +74,18 @@ impl HTMLProgressElement {
         let document = self.owner_document();
         let root = self.upcast::<Element>().attach_ua_shadow_root(true, can_gc);
 
-        let progress_bar = HTMLDivElement::new(local_name!("div"), None, &document, None, can_gc);
+        let progress_bar = Element::create(
+            QualName::new(None, ns!(html), local_name!("div")),
+            None,
+            &document,
+            ElementCreator::ScriptCreated,
+            CustomElementCreationMode::Asynchronous,
+            None,
+            can_gc,
+        );
+
         // FIXME: This should use ::-moz-progress-bar
-        progress_bar
-            .upcast::<Element>()
-            .SetId("-servo-progress-bar".into(), can_gc);
+        progress_bar.SetId("-servo-progress-bar".into(), can_gc);
         root.upcast::<Node>()
             .AppendChild(progress_bar.upcast::<Node>(), can_gc)
             .unwrap();
@@ -109,7 +115,6 @@ impl HTMLProgressElement {
 
         shadow_tree
             .progress_bar
-            .upcast::<Element>()
             .set_string_attribute(&local_name!("style"), style.into(), can_gc);
     }
 }

components/script/dom/html/htmltableelement.rs

@@ -5,7 +5,7 @@
 use std::cell::Cell;
 
 use dom_struct::dom_struct;
-use html5ever::{LocalName, Prefix, local_name, ns};
+use html5ever::{LocalName, Prefix, QualName, local_name, ns};
 use js::rust::HandleObject;
 use style::attr::{AttrValue, LengthOrPercentageOrAuto, parse_unsigned_integer};
 use style::color::AbsoluteColor;
@@ -19,7 +19,9 @@ use crate::dom::bindings::inheritance::Castable;
 use crate::dom::bindings::root::{Dom, DomRoot, LayoutDom, MutNullableDom};
 use crate::dom::bindings::str::DOMString;
 use crate::dom::document::Document;
-use crate::dom::element::{AttributeMutation, Element, LayoutElementHelpers};
+use crate::dom::element::{
+    AttributeMutation, CustomElementCreationMode, Element, ElementCreator, LayoutElementHelpers,
+};
 use crate::dom::html::htmlcollection::{CollectionFilter, HTMLCollection};
 use crate::dom::html::htmlelement::HTMLElement;
 use crate::dom::html::htmltablecaptionelement::HTMLTableCaptionElement;
@@ -150,8 +152,18 @@ impl HTMLTableElement {
             return section;
         }
 
-        let section =
-            HTMLTableSectionElement::new(atom.clone(), None, &self.owner_document(), None, can_gc);
+        let section = Element::create(
+            QualName::new(None, ns!(html), atom.clone()),
+            None,
+            &self.owner_document(),
+            ElementCreator::ScriptCreated,
+            CustomElementCreationMode::Asynchronous,
+            None,
+            can_gc,
+        );
+
+        let section = DomRoot::downcast::<HTMLTableSectionElement>(section).unwrap();
+
         match *atom {
             local_name!("thead") => self.SetTHead(Some(&section)),
             local_name!("tfoot") => self.SetTFoot(Some(&section)),
@@ -227,13 +239,17 @@ impl HTMLTableElementMethods<crate::DomTypeHolder> for HTMLTableElement {
         match self.GetCaption() {
             Some(caption) => caption,
             None => {
-                let caption = HTMLTableCaptionElement::new(
-                    local_name!("caption"),
+                let caption = Element::create(
+                    QualName::new(None, ns!(html), local_name!("caption")),
                     None,
                     &self.owner_document(),
+                    ElementCreator::ScriptCreated,
+                    CustomElementCreationMode::Asynchronous,
                     None,
                     can_gc,
                 );
+                let caption = DomRoot::downcast::<HTMLTableCaptionElement>(caption).unwrap();
+
                 self.SetCaption(Some(&caption))
                     .expect("Generated caption is invalid");
                 caption
@@ -329,13 +345,16 @@ impl HTMLTableElementMethods<crate::DomTypeHolder> for HTMLTableElement {
 
     // https://html.spec.whatwg.org/multipage/#dom-table-createtbody
     fn CreateTBody(&self, can_gc: CanGc) -> DomRoot<HTMLTableSectionElement> {
-        let tbody = HTMLTableSectionElement::new(
-            local_name!("tbody"),
+        let tbody = Element::create(
+            QualName::new(None, ns!(html), local_name!("tbody")),
             None,
             &self.owner_document(),
+            ElementCreator::ScriptCreated,
+            CustomElementCreationMode::Asynchronous,
             None,
             can_gc,
         );
+        let tbody = DomRoot::downcast::<HTMLTableSectionElement>(tbody).unwrap();
         let node = self.upcast::<Node>();
         let last_tbody = node
             .rev_children()
@@ -357,13 +376,16 @@ impl HTMLTableElementMethods<crate::DomTypeHolder> for HTMLTableElement {
             return Err(Error::IndexSize);
         }
 
-        let new_row = HTMLTableRowElement::new(
-            local_name!("tr"),
+        let new_row = Element::create(
+            QualName::new(None, ns!(html), local_name!("tr")),
             None,
             &self.owner_document(),
+            ElementCreator::ScriptCreated,
+            CustomElementCreationMode::Asynchronous,
             None,
             can_gc,
         );
+        let new_row = DomRoot::downcast::<HTMLTableRowElement>(new_row).unwrap();
         let node = self.upcast::<Node>();
 
         if number_of_row_elements == 0 {

components/script/dom/html/htmltablerowelement.rs

@@ -3,7 +3,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
 use dom_struct::dom_struct;
-use html5ever::{LocalName, Prefix, local_name, ns};
+use html5ever::{LocalName, Prefix, QualName, local_name, ns};
 use js::rust::HandleObject;
 use style::attr::{AttrValue, LengthOrPercentageOrAuto};
 use style::color::AbsoluteColor;
@@ -17,7 +17,9 @@ use crate::dom::bindings::inheritance::Castable;
 use crate::dom::bindings::root::{DomRoot, LayoutDom, MutNullableDom};
 use crate::dom::bindings::str::DOMString;
 use crate::dom::document::Document;
-use crate::dom::element::{Element, LayoutElementHelpers};
+use crate::dom::element::{
+    CustomElementCreationMode, Element, ElementCreator, LayoutElementHelpers,
+};
 use crate::dom::html::htmlcollection::HTMLCollection;
 use crate::dom::html::htmlelement::HTMLElement;
 use crate::dom::html::htmltablecellelement::HTMLTableCellElement;
@@ -104,7 +106,18 @@ impl HTMLTableRowElementMethods<crate::DomTypeHolder> for HTMLTableRowElement {
         node.insert_cell_or_row(
             index,
             || self.Cells(),
-            || HTMLTableCellElement::new(local_name!("td"), None, &node.owner_doc(), None, can_gc),
+            || {
+                let cell = Element::create(
+                    QualName::new(None, ns!(html), local_name!("td")),
+                    None,
+                    &node.owner_doc(),
+                    ElementCreator::ScriptCreated,
+                    CustomElementCreationMode::Asynchronous,
+                    None,
+                    can_gc,
+                );
+                DomRoot::downcast::<HTMLTableCellElement>(cell).unwrap()
+            },
             can_gc,
         )
     }

components/script/dom/html/htmltablesectionelement.rs

@@ -3,7 +3,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
 use dom_struct::dom_struct;
-use html5ever::{LocalName, Prefix, local_name, ns};
+use html5ever::{LocalName, Prefix, QualName, local_name, ns};
 use js::rust::HandleObject;
 use style::attr::{AttrValue, LengthOrPercentageOrAuto};
 use style::color::AbsoluteColor;
@@ -15,7 +15,9 @@ use crate::dom::bindings::inheritance::Castable;
 use crate::dom::bindings::root::{DomRoot, LayoutDom};
 use crate::dom::bindings::str::DOMString;
 use crate::dom::document::Document;
-use crate::dom::element::{Element, LayoutElementHelpers};
+use crate::dom::element::{
+    CustomElementCreationMode, Element, ElementCreator, LayoutElementHelpers,
+};
 use crate::dom::html::htmlcollection::HTMLCollection;
 use crate::dom::html::htmlelement::HTMLElement;
 use crate::dom::html::htmltablerowelement::HTMLTableRowElement;
@@ -81,7 +83,18 @@ impl HTMLTableSectionElementMethods<crate::DomTypeHolder> for HTMLTableSectionEl
         node.insert_cell_or_row(
             index,
             || self.Rows(),
-            || HTMLTableRowElement::new(local_name!("tr"), None, &node.owner_doc(), None, can_gc),
+            || {
+                let row = Element::create(
+                    QualName::new(None, ns!(html), local_name!("tr")),
+                    None,
+                    &node.owner_doc(),
+                    ElementCreator::ScriptCreated,
+                    CustomElementCreationMode::Asynchronous,
+                    None,
+                    can_gc,
+                );
+                DomRoot::downcast::<HTMLTableRowElement>(row).unwrap()
+            },
             can_gc,
         )
     }

components/script/dom/servoparser/mod.rs

@@ -78,7 +78,7 @@ use crate::dom::processinginstruction::ProcessingInstruction;
 use crate::dom::reportingendpoint::ReportingEndpoint;
 use crate::dom::shadowroot::IsUserAgentWidget;
 use crate::dom::text::Text;
-use crate::dom::types::{HTMLAudioElement, HTMLMediaElement, HTMLVideoElement};
+use crate::dom::types::HTMLMediaElement;
 use crate::dom::virtualmethods::vtable_for;
 use crate::network_listener::PreInvoke;
 use crate::realms::enter_realm;
@@ -1035,27 +1035,43 @@ impl ParserContext {
         // Step 5. Set the appropriate attribute of the element host element, as described below,
         // to the address of the image, video, or audio resource.
         let node = if media_type == MediaType::Image {
-            let img = HTMLImageElement::new(
-                local_name!("img"),
+            let img = Element::create(
+                QualName::new(None, ns!(html), local_name!("img")),
                 None,
                 doc,
-                None,
                 ElementCreator::ParserCreated(1),
+                CustomElementCreationMode::Asynchronous,
+                None,
                 CanGc::note(),
             );
+            let img = DomRoot::downcast::<HTMLImageElement>(img).unwrap();
             img.SetSrc(USVString(self.url.to_string()));
             DomRoot::upcast::<Node>(img)
         } else if mime_type.type_() == mime::AUDIO {
-            let audio = HTMLAudioElement::new(local_name!("audio"), None, doc, None, CanGc::note());
-            audio
-                .upcast::<HTMLMediaElement>()
-                .SetSrc(USVString(self.url.to_string()));
+            let audio = Element::create(
+                QualName::new(None, ns!(html), local_name!("audio")),
+                None,
+                doc,
+                ElementCreator::ParserCreated(1),
+                CustomElementCreationMode::Asynchronous,
+                None,
+                CanGc::note(),
+            );
+            let audio = DomRoot::downcast::<HTMLMediaElement>(audio).unwrap();
+            audio.SetSrc(USVString(self.url.to_string()));
             DomRoot::upcast::<Node>(audio)
         } else {
-            let video = HTMLVideoElement::new(local_name!("video"), None, doc, None, CanGc::note());
-            video
-                .upcast::<HTMLMediaElement>()
-                .SetSrc(USVString(self.url.to_string()));
+            let video = Element::create(
+                QualName::new(None, ns!(html), local_name!("video")),
+                None,
+                doc,
+                ElementCreator::ParserCreated(1),
+                CustomElementCreationMode::Asynchronous,
+                None,
+                CanGc::note(),
+            );
+            let video = DomRoot::downcast::<HTMLMediaElement>(video).unwrap();
+            video.SetSrc(USVString(self.url.to_string()));
             DomRoot::upcast::<Node>(video)
         };
         // Step 4. Append an element host element for the media, as described below, to the body element.