A recent change in Polaris broke some part of our app

Polaris
1

To give more context, we are using Rails / Hotwire and this page is using Svelte.

The first visit to this page, the svelte component is initialized, but icons are missing.

broken1
broken11048×786 12 KB

After a page refresh, the icons are working correctly.

refresh1
refresh11040×772 15.2 KB

Also, we are seeing lots of polaris errors regarding adopetedStyleSheets.

polaris-errors
polaris-errors1396×1544 715 KB

Is this related to Svelte or Hotwire in any way?
It was working for months until yesterday and we didn’t changed anything on our end.

Thank you!

2

I think it was because of the old <ui-title-bar> . As I switched to the new version <s page heading="title"></s-page>, the bug disappeared.

I can still see the adopedStylesheets console issues.

3

Does anyone have any hints about the adoptedStylesheets issue?
I notice this is only happening in Svelte.

4

Hi @app

I’m not seeing any other reports of this from other devs, it could be a Svelte-specific issue?

5

It’s very possible I had this issue because I distinctly remember having to switch a project recently from ui-title-bar to s-page, although I don’t remember what my exact issue was as it was with an older project I was updating to web components anyway.

Do you guys keep a set of reference pages in the shopify admin as well as externally so you can monitor for breaking or unexpected changes in the components for both cases?

6

@Liam-Shopify, Yes. I think there is a compatibility issue with svelte caching and polaris.js

Here is what Gemini said about the adopedStylesheets issue. The code is part

The adopedStylesheets code from Polaris you provided reveals the smoking gun. This isn't just a Svelte issue; it is an architectural conflict between how Polaris (built on Preact/Custom Elements) handles styles and how Svelte/Turbo moves elements around the DOM.

The Source of the Crash
Look at this specific part of the code you shared:

JavaScript
adoptedCallback() {
    this.#i(),
    this[Je] && (
        this[Je].adoptedStyleSheets = [], // 1. Wipes existing styles
        je(this[Je], this.#r),            // 2. Tries to re-apply global CSS
        je(this[Je], this.#a)             // 3. Tries to re-apply component CSS
    )
}
The function je (defined earlier in your snippet) is trying to use new r (which is new CSSStyleSheet()) and cache it in a WeakMap called Me.

Why the Key didn't fix it: Svelte's {#key} destroys and remounts the component. When that new component is added to the DOM, if it is being moved into a different "Document Context" (common in Svelte's transition/fragment phase), the adoptedCallback fires. Polaris then tries to pull a cached stylesheet from that WeakMap and apply it to a new document. Browsers strictly forbid sharing a Constructed Style Sheet between two different documents for security reasons.

The Fix: Browser Environment Isolation
Since you cannot easily change the Polaris source code, you need to prevent Svelte from "re-adopting" the node in a way that triggers this logic.