topic Shadow DOM in ArcGIS JavaScript Maps SDK Questions

Shadow DOM

MatthewDriscoll — Tue, 23 Dec 2025 16:03:45 GMT

This question is more for the ESRI team. In this blog it states "To customize the style, you can use the documented design tokens and component css variables to style components". Where does one find the documentation for both the tokens and css variables? Is there any available training, resources, blogs, ect, that can help us learn and navigate the Shadow DOM of these new components?

Re: Shadow DOM

Sage_Wall — Tue, 23 Dec 2025 16:47:16 GMT

Great question @MatthewDriscoll ,

Several components like arcgis-map, arcgis-scene, and others—include a Styles section in their documentation that lists the available CSS variables (these are not inherited from the Calcite Design System).

The components also use tokens (css variables) defined by Calcite, which you can find here:
https://developers.arcgis.com/calcite-design-system/foundations/tokens/reference/

To determine which Calcite tokens or CSS variables are being applied, you may need to inspect the elements using your browser’s developer tools. If you encounter something you can’t modify and have a strong business case for doing so, please let us know—we may be able to expose a variable to support that need. Hopefully we can create more resources showing how this is done in more detail the new future. There are a few examples in the Samples but they aren't easy to find.... we should improve that.
https://developers.arcgis.com/javascript/latest/sample-code/featurefilter-attributes/
https://developers.arcgis.com/javascript/latest/sample-code/layers-dimension/
https://developers.arcgis.com/javascript/latest/sample-code/layers-medialayer-control-points/
https://developers.arcgis.com/javascript/latest/sample-code/layers-medialayer-interactive/

and others

Re: Shadow DOM

LMFGeospatial — Wed, 04 Mar 2026 16:56:24 GMT

@Sage_Wall I'd like the ability to apply CSS to the Esri attribution. Look, I understand the aim to limit alteration of Esri's Calcite design. And I understand the reticence of allowing users to remove attribution completely (the Powered by Esri included). I am not looking to remove it. In fact, I never have. But I have worked to at least minimize the impact of the attribution's background color and transparency. Most of our applications are built with requests for customization - especially colors. But here you have this semi-transparent #fff background for the attribution that we can no longer affect with external CSS, as it's hidden down in the Shadow DOM now. Again, I don't want the ability to remove it. But yes, I'd absolutely like to change the color or opacity - in the past, I have removed the background altogether, retaining only the text. It's less intrusive and does not conflict with custom color designs.

Re: Shadow DOM

MatthewDriscoll — Wed, 04 Mar 2026 17:14:38 GMT

Things I have observed that might help. Change the Calcite in the css where you can instead of fighting the dom.

:root, .calcite-mode-dark { /* Typography */ --calcite-font-family: "Arial", system-ui, sans-serif; --calcite-font-size--1: 12px; --calcite-font-size--2: 13px; }

A lot of the shadow root is accessible, AI helps me a lot with this.

// Shadow DOM styling if (cc.shadowRoot) { try { const ccStyle = document.createElement("style"); ccStyle.textContent = ` :host { border-radius: 8px !important; overflow: hidden !important; } .root { border-radius: 8px !important; overflow: hidden !important; } .conversions-view { padding: 6px !important; } .arcgis-coordinate-conversion__conversion-list, .arcgis-coordinate-conversion__conversion-row { width: 200px !important; max-width: 200px !important; } .arcgis-coordinate-conversion { background: #121826; border-radius: 10px; padding: 0px 0px; width: 250px !important; } `; cc.shadowRoot.appendChild(ccStyle); } catch(e) { console.warn("CC shadow style failed:", e); } }

Re: Shadow DOM

Sage_Wall — Wed, 04 Mar 2026 17:45:05 GMT

@LMFGeospatial could you please submit an Idea in the Ideas section of this site to add css variables for attribution customization? It seems like a reasonable request to me but we would likely need to get our design teams input and if it's an "Idea" would allow us to track it a bit better.

Re: Shadow DOM

LMFGeospatial — Thu, 05 Mar 2026 16:47:19 GMT

@Sage_Wall I have tried to to append child styles already but have had no luck. Even using your code, the "constructed" styling supersedes my inline styling:

The esri attribution is, if I understand it correctly, styled in the shadow DOM of the arcgis-map component. So that's how I've attempted to address it. But the style still does not change - the constructed style is retained.

I will add my request to the "Ideas" section as you suggested.

Re: Shadow DOM

MatthewDriscoll — Fri, 06 Mar 2026 21:32:22 GMT

Try this in your javascript. It worked for me.

// ESRI attribution bar const shadowRootAttr = mapElement.shadowRoot; const attrStyle = document.createElement("style"); attrStyle.textContent = ` .esri-attribution { width: auto !important; max-width: 50% !important; border-radius: 8px 8px 0 0 !important; right: 0 !important; left: auto !important; background: rgba(0, 0, 0, 0.35) !important; opacity: 0.7 !important; } `; shadowRootAttr.appendChild(attrStyle);

* I did a bit more digging. If you are using arcgis-map I don't think it can be reached in the shadow DOM through Calcite. I think it is because the Esri attribution is legally required, so be careful not to make it invisible.

Re: Shadow DOM

MatthewDriscoll — Thu, 05 Mar 2026 17:23:03 GMT

@Sage_Wall . The current attribution default in 5.0 is padded a bit from the bottom, where in the past it was hugging it. So now, with the lower slots and the attribution, they can overlap each other. It is shrinking the space to design by doing this.

Re: Shadow DOM

LMFGeospatial — Fri, 06 Mar 2026 20:24:09 GMT

I appreciate this. This does indeed demonstrate an ability to reach the attribution styling. It certainly minimizes the impact by significantly cutting down the width and, via opacity, muting the color a bit. I would still prefer not having to change width. And opacity affects not just the background but the font text as well. As I've noted, I don't want to remove it altogether. My preference would be to have the font at 100% opacity and the background 100% transparent.

Re: Shadow DOM

MatthewDriscoll — Fri, 06 Mar 2026 21:35:29 GMT

You don't have to change the width, I was just giving an example. Here is the js to get rid of the background.

Take note that I am using dark mode in my design, so you will probably need to change that if you are not.

await mapElement.componentOnReady(); const shadowRootAttr = mapElement.shadowRoot; // Use an adopted stylesheet to beat the constructed stylesheet const sheet = new CSSStyleSheet(); sheet.replaceSync(` .esri-attribution.calcite-mode-dark { --calcite-color-transparent-tint: transparent !important; } .esri-attribution { width: auto !important; max-width: 50% !important; border-radius: 8px 8px 0 0 !important; right: 0 !important; left: auto !important; } `); // Adopt it into the shadow root — appended last so it wins shadowRootAttr.adoptedStyleSheets = [ ...shadowRootAttr.adoptedStyleSheets, sheet ];

Re: Shadow DOM

Sage_Wall — Fri, 06 Mar 2026 21:46:08 GMT

Is there perhaps some custom CSS styling producing the padded attribution. By default there shouldn't be any space between the bottom of the attribution and the bottom of the map or scene component. It should still be at the very bottom of the view, unless I'm misunderstanding the issue I don't know where the padding or margin is coming from in your screenshot @MatthewDriscoll

https://codepen.io/sagewall/pen/VYKjjwp

Re: Shadow DOM

MatthewDriscoll — Fri, 06 Mar 2026 22:16:15 GMT

That is strange. The reason I know how to change the attribution is because I ran into this. All I did for the screen shot was comment out the attribute code fix. But today it is not doing it. But, yes it is possible I did something I guess.

On that note, the problem with changing the Calcite CSS is that it is too broad. Many different elements could use the same calcite, but when you only want to change it in one place...time to fight the shadow.

Personally, I feel the the advantage of using the sdk vs experience builder is the ability to customize the design. In 5.0 it feels like way too much of that is being taken away.

Re: Shadow DOM

Sage_Wall — Fri, 06 Mar 2026 22:24:17 GMT

Hopefully it will get better as we get more feedback and learn which css variables we should expose on the components to allow for better customization without having to fight the shadow but work with it

Re: Shadow DOM

LMFGeospatial — Mon, 09 Mar 2026 18:20:36 GMT

Personally, I feel the the advantage of using the sdk vs experience builder is the ability to customize the design. In 5.0 it feels like way too much of that is being taken away.

Yes. Exactly this. I have been saying this for some time. I began with a 4.17 custom application (my first exposure to the Esri JS SDK). I failed to keep pace until about 4.29. By that point, CSS was still friendly to work with. After upgrading to 4.29, I made a commitment to always upgrade when a new release came out. But around 4.31 or so, my designs started to "break". I was spending countless hours looking at the console, trying to figure out how we're NOW supposed to style things. That worked for a little... until 4.34. At that point, so much of my CSS "broke" (most especially in the popup component) that I stopped trying to chase things, knowing 5.0 was coming out in February. When it arrived, I had to confront the issue. And it has been very frustrating fighting that Shadow DOM. And yes, I VERY much prefer custom apps vs WebAppBuilder or ExperienceBuilder because I can do what a client requests more easily (not just styling but functionality). Now I have begun to expect that, at some point, we will be forced to use out-of-the-box non-SDK options only. And so all apps will look and perform the same. And that's not ideal.