diff --git a/components/script/dom/element.rs b/components/script/dom/element.rs
index 7e3e5a09b77..e9852a8432e 100644
--- a/components/script/dom/element.rs
+++ b/components/script/dom/element.rs
@@ -666,10 +666,6 @@ impl Element {
             .upcast::<Node>()
             .set_containing_shadow_root(Some(&shadow_root));
 
-        if is_ua_widget == IsUserAgentWidget::Yes {
-            shadow_root.upcast::<Node>().set_in_ua_widget();
-        }
-
         let bind_context = BindContext {
             tree_connected: self.upcast::<Node>().is_connected(),
             tree_is_in_a_document_tree: self.upcast::<Node>().is_in_a_document_tree(),
@@ -684,6 +680,36 @@ impl Element {
         Ok(shadow_root)
     }
 
+    /// Attach a UA widget shadow root with its default parameters.
+    /// Additionally mark ShadowRoot to use styling configuration for a UA widget.
+    ///
+    /// TODO: Ideally, all of the UA shadow root should use UA widget styling, but
+    ///       some of the UA widget implemented prior to the implementation of Gecko's
+    ///       UA widget matching, might need some tweaking.
+    pub(crate) fn attach_ua_shadow_root(
+        &self,
+        use_ua_widget_styling: bool,
+        can_gc: CanGc,
+    ) -> DomRoot<ShadowRoot> {
+        let root = self
+            .attach_shadow(
+                IsUserAgentWidget::Yes,
+                ShadowRootMode::Closed,
+                false,
+                false,
+                true,
+                SlotAssignmentMode::Manual,
+                can_gc,
+            )
+            .expect("Attaching UA shadow root failed");
+
+        if use_ua_widget_styling {
+            root.upcast::<Node>().set_in_ua_widget();
+        }
+
+        root
+    }
+
     pub(crate) fn detach_shadow(&self, can_gc: CanGc) {
         let Some(ref shadow_root) = self.shadow_root() else {
             unreachable!("Trying to detach a non-attached shadow root");
diff --git a/components/script/dom/htmldetailselement.rs b/components/script/dom/htmldetailselement.rs
index 1d48b8e7a97..23315ac4f93 100644
--- a/components/script/dom/htmldetailselement.rs
+++ b/components/script/dom/htmldetailselement.rs
@@ -103,18 +103,10 @@ impl HTMLDetailsElement {
 
     fn create_shadow_tree(&self, can_gc: CanGc) {
         let document = self.owner_document();
+        // TODO(stevennovaryo): Reimplement details styling.
         let root = self
             .upcast::<Element>()
-            .attach_shadow(
-                IsUserAgentWidget::Yes,
-                ShadowRootMode::Closed,
-                false,
-                false,
-                false,
-                SlotAssignmentMode::Manual,
-                can_gc,
-            )
-            .expect("Attaching UA shadow root failed");
+            .attach_ua_shadow_root(false, can_gc);
 
         let summary = HTMLSlotElement::new(local_name!("slot"), None, &document, None, can_gc);
         root.upcast::<Node>()
diff --git a/components/script/dom/htmlinputelement.rs b/components/script/dom/htmlinputelement.rs
index 0e0d0c5161a..33559b64e6c 100644
--- a/components/script/dom/htmlinputelement.rs
+++ b/components/script/dom/htmlinputelement.rs
@@ -1090,17 +1090,9 @@ impl HTMLInputElement {
     /// or create one if none exists.
     fn shadow_root(&self, can_gc: CanGc) -> DomRoot<ShadowRoot> {
         self.upcast::<Element>().shadow_root().unwrap_or_else(|| {
+            // TODO(stevennovaryo): adjust type=color's styling.
             self.upcast::<Element>()
-                .attach_shadow(
-                    IsUserAgentWidget::Yes,
-                    ShadowRootMode::Closed,
-                    false,
-                    false,
-                    true,
-                    SlotAssignmentMode::Manual,
-                    can_gc,
-                )
-                .expect("Attaching UA shadow root failed")
+                .attach_ua_shadow_root(self.input_type() == InputType::Text, can_gc)
         })
     }
 
@@ -1269,7 +1261,7 @@ impl HTMLInputElement {
                 } else {
                     value = DOMString::from("#000000");
                 }
-                let style = format!("background-color: {value}");
+                let style = format!("background-color: {value} !important; z-index: 10000");
                 color_shadow_tree
                     .color_value
                     .upcast::<Element>()
diff --git a/components/script/dom/htmlmediaelement.rs b/components/script/dom/htmlmediaelement.rs
index aa1323cdc5f..59a0fefdef7 100644
--- a/components/script/dom/htmlmediaelement.rs
+++ b/components/script/dom/htmlmediaelement.rs
@@ -1996,17 +1996,10 @@ impl HTMLMediaElement {
             // if we are already showing the controls.
             return;
         }
-        let shadow_root = element
-            .attach_shadow(
-                IsUserAgentWidget::Yes,
-                ShadowRootMode::Closed,
-                false,
-                false,
-                false,
-                SlotAssignmentMode::Manual,
-                can_gc,
-            )
-            .unwrap();
+        // FIXME: Recheck styling for media element
+        let shadow_root = self
+            .upcast::<Element>()
+            .attach_ua_shadow_root(false, can_gc);
         let document = self.owner_document();
         let script = HTMLScriptElement::new(
             local_name!("script"),
diff --git a/components/script/dom/htmlmeterelement.rs b/components/script/dom/htmlmeterelement.rs
index 24470d82de9..ea58040707b 100644
--- a/components/script/dom/htmlmeterelement.rs
+++ b/components/script/dom/htmlmeterelement.rs
@@ -79,18 +79,8 @@ impl HTMLMeterElement {
 
     fn create_shadow_tree(&self, can_gc: CanGc) {
         let document = self.owner_document();
-        let root = self
-            .upcast::<Element>()
-            .attach_shadow(
-                IsUserAgentWidget::Yes,
-                ShadowRootMode::Closed,
-                false,
-                false,
-                false,
-                SlotAssignmentMode::Manual,
-                can_gc,
-            )
-            .expect("Attaching UA shadow root failed");
+        // FIXME: Add servo specific appearence reftest
+        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);
         root.upcast::<Node>()
diff --git a/components/script/dom/htmlprogresselement.rs b/components/script/dom/htmlprogresselement.rs
index 25e4ff15c2b..3b0f2b48897 100644
--- a/components/script/dom/htmlprogresselement.rs
+++ b/components/script/dom/htmlprogresselement.rs
@@ -77,18 +77,8 @@ impl HTMLProgressElement {
 
     fn create_shadow_tree(&self, can_gc: CanGc) {
         let document = self.owner_document();
-        let root = self
-            .upcast::<Element>()
-            .attach_shadow(
-                IsUserAgentWidget::Yes,
-                ShadowRootMode::Closed,
-                false,
-                false,
-                false,
-                SlotAssignmentMode::Manual,
-                can_gc,
-            )
-            .expect("Attaching UA shadow root failed");
+        // FIXME: Add servo specific appearence reftest
+        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);
         // FIXME: This should use ::-moz-progress-bar
diff --git a/components/script/dom/htmlselectelement.rs b/components/script/dom/htmlselectelement.rs
index 0f48c8e923f..2a068bc4162 100644
--- a/components/script/dom/htmlselectelement.rs
+++ b/components/script/dom/htmlselectelement.rs
@@ -258,18 +258,8 @@ impl HTMLSelectElement {
 
     fn create_shadow_tree(&self, can_gc: CanGc) {
         let document = self.owner_document();
-        let root = self
-            .upcast::<Element>()
-            .attach_shadow(
-                IsUserAgentWidget::Yes,
-                ShadowRootMode::Closed,
-                false,
-                false,
-                false,
-                SlotAssignmentMode::Manual,
-                can_gc,
-            )
-            .expect("Attaching UA shadow root failed");
+        // TODO: Adjust <select> element styling considering
+        let root = self.upcast::<Element>().attach_ua_shadow_root(true, can_gc);
 
         let select_box = HTMLDivElement::new(local_name!("div"), None, &document, None, can_gc);
         select_box.upcast::<Element>().set_string_attribute(