4.34 Shadow DOM - How can i override Popup styles?

[JonathanDawe_BAS]

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?

[ReneRubalcava · Accepted solution]

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!

[JonathanDawe_BAS]

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

   const mapElement = document.querySelector('arcgis-map');
    const adoptedStyleSheets = mapElement?.shadowRoot?.adoptedStyleSheets;
    const firstStyleSheet = adoptedStyleSheets?.[0];
    if (firstStyleSheet) {
      // Insert each rule individually
      firstStyleSheet.insertRule(`
        .esri-component {
          box-shadow: none !important;
        }
      `);

      firstStyleSheet.insertRule(`
        .esri-attribution.esri-widget {
          height: 20px !important;
          color: var(--attribution-color) !important;
          background-color: var(--attribution-background-color) !important;
        }
      `);
      firstStyleSheet.insertRule(`
        .esri-popup__main-container.esri-widget {
          border-color: var(--popup-main-container-border-color) !important;
          border-radius: var(--popup-main-container-border-radius) !important;
          border-width: var(--popup-main-container-border-width) !important;
          shadow: var(--popup-main-container-shadow) !important;
          overflow: hidden !important;
          border-style: var(--popup-main-container-border-style) !important;
        }
      `);

      firstStyleSheet.insertRule(`
        .esri-popup__pointer-direction {
          border-color: var(--popup-pointer-direction-border-color) !important;
          border-width: var(--popup-pointer-direction-border-width) !important;
          background-color: var(--popup-pointer-direction-background-color) !important;
          border-style: var(--popup-pointer-direction-border-style) !important;
        }
      `);