[feat] automatically load lightdom stylesheets

[bennypowers]

Description

Say a user forgot to load rh-table-lightdom.css in the document

• or maybe they remembered, but they put an <rh-table> in another shadow root, but didn't load the lightdom styles in that shadow root.

Suggested solution

/** pseudocode */
async connectedCallback() {
  super.connectedCallback();
  const root = this.getRootNode();
  if (!root.getComputedStyle().getPropertyName(this._lightdomcssBrandName)) {
    root.adoptedStyleSheets = [...root.adoptedStyleSheets, await import('./rh-table-lightdom.css')]
  }
}

Screenshots

No response

Example API

No response

Additional context

No response

[bennypowers]

probably best handled with a controller

[zeroedin]

Ok this will definitely shine light on the bifurcation between *-lightdom.css and *-lightdom-shim.css. Some older components like navigation-secondary will have to be revisited to split out CLS/FOUC driven lightdom styles from just deeply nested styles.

[bennypowers]

note: if we place brand props like --_is-footer-css-loaded on the root, they'll inherit, and break shadow roots down the line

so we should use @property to make those not inherit, so they'll only apply to the current host / root. to disambiguate, our loading js might need to check the element's root and then maybe assign a --_is-footer-loaded-root and --_is-footer-loaded-host