Cesium CreditDisplay overlay lacks styles when instantiated from Lit component

[rudifa]

The issue is visible on the branch main, commit 6f8df87, tag cesium-viewer-in-lit-component-credits-styles-missing (the first screenshot below).

@olange identified the problem source and provided a workaround in PR #11:

Problem lies in source CesiumJS › packages › engine › Source › Scene › CreditDisplay; it attaches the generated CSS to document.head— which won't pierce the ShadowDOM:

function appendCss() {
  let style = "";
  style += addStyle(".cesium-credit-lightbox-overlay", {
    display: "none",
    "z-index": "1", //must be at least 1 to draw over top other Cesium widgets
    position: "absolute",
    top: "0",
    left: "0",
    width: "100%",
    height: "100%",
    "background-color": "rgba(80, 80, 80, 0.8)",
  });
  …
  const head = document.head;
  const css = document.createElement("style");
  css.innerHTML = style;
  head.insertBefore(css, head.firstChild);
}

As a workaround, @olange copied the generated CSS styles from the devtools Elements and pasted them into our file cesium-lit.js:

/* add styles for the credit-lightbox overlay */
        .cesium-credit-lightbox-overlay {
          display: none;
          z-index: 1;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(80, 80, 80, 0.8);
        }
...

Details:

1. branch main, commit 6f8df87, tag cesium-viewer-in-lit-component-credits-styles-missing : the CreditsDisplay box lacks the corresponding styles, so it is displayed after the main view

2. branch main, as of commit 2cefa0d, tag add-credits-styling-workaround looks good, the CreditsDisplay box is overlaid on top of the main view

[rudifa]

This issue is resolved by upgrading to cesium v1.104.0, which contains my fix for the issue Cesium.Viewer instantiated inside my lit component: CreditDisplay is missing its styles #10907