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?

[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

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

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

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

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

[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]

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]

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
];

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