Select to view content in your preferred language

Shadow DOM

1223
13
12-23-2025 07:43 AM
MatthewDriscoll
MVP Alum

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?

Tags (2)
13 Replies
Sage_Wall
Esri Regular Contributor

Untitled.pngIs 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

 

 

0 Kudos
MatthewDriscoll
MVP Alum

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.

Sage_Wall
Esri Regular Contributor

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

0 Kudos
LMFGeospatial
Occasional Contributor

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.

0 Kudos