diff --git a/module/applications/components/filigree-box.mjs b/module/applications/components/filigree-box.mjs
index 6c746d6461..82c3c84c10 100644
--- a/module/applications/components/filigree-box.mjs
+++ b/module/applications/components/filigree-box.mjs
@@ -30,11 +30,18 @@ export default class FiligreeBoxElement extends HTMLElement {
   /* -------------------------------------------- */
 
   /**
-   * The stylesheet to attach to the element's shadow root.
-   * @type {CSSStyleSheet}
+   * The stylesheets map to attach to the element's shadow root.
+   * @type {Map}
    * @protected
    */
-  static _stylesheet;
+  static _stylesheets;
+
+  /* -------------------------------------------- */
+
+  /** @override */
+  adoptedCallback() {
+    this.#buildStyle();
+  }
 
   /* -------------------------------------------- */
 
@@ -42,9 +49,16 @@ export default class FiligreeBoxElement extends HTMLElement {
    * Build the shadow DOM's styles.
    */
   #buildStyle() {
-    if ( !this.constructor._stylesheet ) {
-      this.constructor._stylesheet = new CSSStyleSheet();
-      this.constructor._stylesheet.replaceSync(`
+    if (!this.constructor._stylesheets) {
+      this.constructor._stylesheets = new WeakMap();
+    }
+
+    const _window = this.ownerDocument.defaultView;
+    let cssObj = this.constructor._stylesheets.get(_window.document);
+
+    if (!cssObj) {
+      cssObj = new _window.CSSStyleSheet();
+      cssObj.replaceSync(`
         :host {
           position: relative;
           isolation: isolate;
@@ -92,8 +106,9 @@ export default class FiligreeBoxElement extends HTMLElement {
           inset-block: 30px;
         }
       `);
+      this.constructor._stylesheets.set(_window.document, cssObj);
     }
-    this.#shadowRoot.adoptedStyleSheets = [this.constructor._stylesheet];
+    this.#shadowRoot.adoptedStyleSheets = [this.constructor._stylesheets.get(_window.document)];
   }
 
   /* -------------------------------------------- */
diff --git a/module/applications/components/icon.mjs b/module/applications/components/icon.mjs
index 260f85ecc0..59796401d3 100644
--- a/module/applications/components/icon.mjs
+++ b/module/applications/components/icon.mjs
@@ -41,7 +41,7 @@ export default class IconElement extends HTMLElement {
    * Stylesheet that is shared among all icons.
    * @type {CSSStyleSheet}
    */
-  static #stylesheet;
+  static _stylesheets;
 
   /* -------------------------------------------- */
 
@@ -51,14 +51,20 @@ export default class IconElement extends HTMLElement {
    */
   static #svgCache = new Map();
 
+
   /* -------------------------------------------- */
 
-  /** @inheritDoc */
-  connectedCallback() {
-    // Create icon styles
-    if ( !this.constructor.#stylesheet ) {
-      this.constructor.#stylesheet = new CSSStyleSheet();
-      this.constructor.#stylesheet.replaceSync(`
+  #buildCSS() {
+    if (!this.constructor._stylesheets) {
+      this.constructor._stylesheets = new WeakMap();
+    }
+
+    const _window = this.ownerDocument.defaultView;
+    let cssObj = this.constructor._stylesheets.get(_window.document);
+
+    if (!cssObj) {
+      cssObj = new _window.CSSStyleSheet();
+      cssObj.replaceSync(`
         :host {
           display: contents;
         }
@@ -68,9 +74,23 @@ export default class IconElement extends HTMLElement {
           height: var(--icon-height, var(--icon-size, 1em));
         }
       `);
+      this.constructor._stylesheets.set(_window.document, cssObj);
     }
-    this.#shadowRoot.adoptedStyleSheets = [this.constructor.#stylesheet];
+    this.#shadowRoot.adoptedStyleSheets = [this.constructor._stylesheets.get(_window.document)];
+  }
 
+  /* -------------------------------------------- */
+
+  /** @override */
+  adoptedCallback() {
+    this.#buildCSS();
+  }
+
+  /* -------------------------------------------- */
+
+  /** @inheritDoc */
+  connectedCallback() {
+    this.#buildCSS();
     const insertElement = element => {
       if ( !element ) return;
       const clone = element.cloneNode(true);
diff --git a/module/applications/components/proficiency-cycle.mjs b/module/applications/components/proficiency-cycle.mjs
index 0699cfc7b4..f282dd26c8 100644
--- a/module/applications/components/proficiency-cycle.mjs
+++ b/module/applications/components/proficiency-cycle.mjs
@@ -33,11 +33,11 @@ export default class ProficiencyCycleElement extends HTMLElement {
   #shadowRoot;
 
   /**
-   * The stylesheet to attach to the element's shadow root.
-   * @type {CSSStyleSheet}
+   * The stylesheet lookup to attach to the element's shadow root.
+   * @type {Map}
    * @protected
    */
-  static _stylesheet;
+  static _stylesheets;
 
   /* -------------------------------------------- */
 
@@ -120,9 +120,15 @@ export default class ProficiencyCycleElement extends HTMLElement {
   /*  Methods                                     */
   /* -------------------------------------------- */
 
+  /** @override */
+  adoptedCallback() {
+    this.#buildCSS();
+  }
+
+  /* -------------------------------------------- */
+
   /** @override */
   connectedCallback() {
-    this.replaceChildren();
     this.#buildHTML();
     this.#refreshValue();
 
@@ -139,9 +145,16 @@ export default class ProficiencyCycleElement extends HTMLElement {
    * Build the CSS internals.
    */
   #buildCSS() {
-    if ( !this.constructor._stylesheet ) {
-      this.constructor._stylesheet = new CSSStyleSheet();
-      this.constructor._stylesheet.replaceSync(`
+    if (!this.constructor._stylesheets) {
+      this.constructor._stylesheets = new WeakMap();
+    }
+
+    const _window = this.ownerDocument.defaultView;
+    let cssObj = this.constructor._stylesheets.get(_window.document);
+
+    if (!cssObj) {
+      cssObj = new _window.CSSStyleSheet();
+      cssObj.replaceSync(`
         :host { display: inline-block; }
         div { --_fill: var(--proficiency-cycle-enabled-color, var(--dnd5e-color-blue)); }
         div:has(:disabled, :focus-visible) { --_fill: var(--proficiency-cycle-disabled-color, var(--dnd5e-color-gold)); }
@@ -198,8 +211,9 @@ export default class ProficiencyCycleElement extends HTMLElement {
           opacity: 0;
         }
       `);
+      this.constructor._stylesheets.set(_window.document, cssObj);
     }
-    this.#shadowRoot.adoptedStyleSheets = [this.constructor._stylesheet];
+    this.#shadowRoot.adoptedStyleSheets = [this.constructor._stylesheets.get(_window.document)];
   }
 
   /* -------------------------------------------- */
@@ -209,7 +223,7 @@ export default class ProficiencyCycleElement extends HTMLElement {
    */
   #buildHTML() {
     const div = document.createElement("div");
-    this.#shadowRoot.appendChild(div);
+    this.#shadowRoot.replaceChildren(div);
 
     const input = document.createElement("input");
     input.setAttribute("type", "number");