--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -821,17 +821,17 @@ notification[value="translation"] {
   notification[value="translation"] button[anonid="translate"]:active {
     background-color: #008ACB;
   }
 
   notification[value="translation"] button[type="menu"] > .button-box > .button-menu-dropmarker,
   notification[value="translation"] menulist > .menulist-dropmarker {
     list-style-image: url(chrome://global/skin/icons/arrow-dropdown-16.svg);
   }
-  notification[value="translation"] menulist > .menulist-dropmarker > .dropmarker-icon {
+  notification[value="translation"] menulist > .menulist-dropmarker::part(icon) {
     width: 11px;
     height: 11px;
   }
 
   notification[value="translation"] button > .button-box,
   notification[value="translation"] button[type="menu"] > .button-box > .button-menu-dropmarker {
     padding: 0;
     margin-inline-start: 3ch;

--- a/toolkit/content/widgets/general.js
+++ b/toolkit/content/widgets/general.js
@@ -32,23 +32,22 @@ class MozDeck extends MozXULElement {
   get selectedPanel() {
     return this.children[this.selectedIndex];
   }
 }
 
 customElements.define("deck", MozDeck);
 
 class MozDropmarker extends MozXULElement {
-  connectedCallback() {
-    // Only create the image the first time we are connected
-    if (!this.firstElementChild) {
-      let image = document.createXULElement("image");
-      image.classList.add("dropmarker-icon");
-      this.appendChild(image);
-    }
+  constructor() {
+    super();
+    let shadowRoot = this.attachShadow({mode: "open"});
+    let image = document.createXULElement("image");
+    image.setAttribute("part", "icon");
+    shadowRoot.appendChild(image);
   }
 }
 
 customElements.define("dropmarker", MozDropmarker);
 
 class MozCommandSet extends MozXULElement {
   connectedCallback() {
     if (this.getAttribute("commandupdater") === "true") {

--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -374,17 +374,17 @@ xul|*.menulist-dropmarker {
   padding: 0;
   border: none;
   background-color: transparent;
   list-style-image: url("chrome://global/skin/icons/arrow-dropdown-12.svg");
   -moz-context-properties: fill;
   fill: currentColor;
 }
 
-xul|*.menulist-dropmarker > xul|*.dropmarker-icon {
+xul|*.menulist-dropmarker::part(icon) {
   width: 12px;
   height: 12px;
 }
 
 xul|menulist > xul|menupopup {
   -moz-appearance: none;
   border: 1px solid var(--in-content-box-border-color);
   border-radius: 2px;

--- a/toolkit/themes/shared/popupnotification.inc.css
+++ b/toolkit/themes/shared/popupnotification.inc.css
@@ -80,17 +80,17 @@
 .popup-notification-dropmarker > .button-box > .button-menu-dropmarker {
   /* This is to override the linux !important */
   -moz-appearance: none !important;
   display: -moz-box;
   padding: 0;
   margin: 0;
 }
 
-.popup-notification-dropmarker > .button-box > .button-menu-dropmarker > .dropmarker-icon {
+.popup-notification-dropmarker > .button-box > .button-menu-dropmarker::part(icon) {
   width: 16px;
   height: 16px;
   list-style-image: url(chrome://global/skin/icons/arrow-dropdown-16.svg);
   -moz-context-properties: fill;
   fill: currentColor;
 }
 
 .popup-notification-warning {