nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Shadow DOM

MatthewDriscoll

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?

Vind meer berichten getagd met

Accepted answers

All comments

MatthewDriscoll

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

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

LMFGeospatial

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.

MatthewDriscoll

@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.

MatthewDriscoll

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.

LMFGeospatial

@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.

Sage_Wall

@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.

MatthewDriscoll

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);
  }
}

LMFGeospatial

@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.

Sage_Wall

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

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.