topic Re: 4.34 Shadow DOM - How can i override Popup styles? in ArcGIS JavaScript Maps SDK Questions

4.34 Shadow DOM - How can i override Popup styles?

JonathanDawe_BAS — Fri, 24 Oct 2025 11:08:33 GMT

In 4.33 and earlier version of the ArcGIS API it was straight forward to interact with the widgets and components that the API was creating.

In many ways it was a bit of a super power of the API that you could either 1) use the Esri styled widgets, 2) use the styled widgets with some minor style customisation, 3) implement your own using the underlying viewmodel.

With the latest changes to the map components parts are being moved into the ShadowDOM via slots, but now it seems to have become impossible to style parts of the user interface without complex Javascript injection of styling, or extremely simple and constrained changes to colours with css variables.

in 4.33 I overrode the popup styling based on the theme of our application. It uses a mixture of css-variables and additional styling to add border radius e.g. targeting esri-popup__main-container, or esri-popup__pointer-direction.

How would I achieve something similar in the newer versions of the API? Am I going to have to start reimplementing every Esri component if I want containers to have curved borders?

Re: 4.34 Shadow DOM - How can i override Popup styles?

ReneRubalcava — Fri, 24 Oct 2025 13:37:17 GMT

Currently in 4.34, only way to do this will be via JS style updates via shadowRoot selectors.

As we are working on the Popup component, and components in general, we are evaluating what type of design tokens we should expose in addition to the calcite tokens. These are items we can add to the list, thanks!

Re: 4.34 Shadow DOM - How can i override Popup styles?

JonathanDawe_BAS — Fri, 24 Oct 2025 14:01:21 GMT

Thanks Rene, In the meantime I managed to hack my styles back in...

Re: 4.34 Shadow DOM - How can i override Popup styles?

ValCannon2 — Fri, 14 Nov 2025 18:03:55 GMT

This looks brilliant but I can't seem to make it work. Do you update the stylesheet before the arcgisViewReadyChange or after? After the popup view is ready? Could you look at my pen and see what I'm doing wrong.

--update: I figured it out. After the arcgisViewReadyChange. Thanks a bunch. pen2

Re: 4.34 Shadow DOM - How can i override Popup styles?

JackFanZhang — Tue, 25 Nov 2025 15:25:06 GMT

Thanks @ReneRubalcava for the explanation. According to an earlier ESRI Blog, it says

Internally, components are constructed using Calcite Design System’s components, so they can be styled using Calcite’s design tokens (via CSS)

I thought I could make all calcite-buttons in all web components like arcgis-home rounded by overriding al calcite-button like below. However, it doesn't seem work. I wonder if I understood it correctly or there's something wrong in my implementation.

Re: 4.34 Shadow DOM - How can i override Popup styles?

MatthewDriscoll — Thu, 05 Feb 2026 15:58:52 GMT

Here is how I got past the shadow root and change the font-family and other things.

// Wait until the component and its view are ready await mapElement.componentOnReady(); // 3Access the shadow root of the component const shadowRootPop = mapElement.shadowRoot; // Create a style element const stylePop = document.createElement("style"); stylePop.textContent = ` /* Popup header text */ .esri-popup__main-container.esri-widget{ font-family: 'Courier New', Courier, monospace !important; } .esri-ui .esri-popup .esri-widget__heading { font-weight: 300 !important; font-size: 12.5px !important; line-height: 1.3 !important; } .esri-popup__main-container{ width: 340px !important;} /* Optional: move the popup up from bottom if needed */ .esri-popup__main-container.esri-widget { bottom: 80px !important; } `; // Append the style into the component shadow root shadowRootPop.appendChild(stylePop);

Re: 4.34 Shadow DOM - How can i override Popup styles?

ValCannon2 — Thu, 05 Feb 2026 15:57:55 GMT

Clever, but this still feels like a workaround that might not work in the next update (5x, any minute now?). Hopefully there will be access to style attributes in the arcgis-popup component soon.