feat: lightdom css controller

docs/_includes/layouts/pages/element.11ty.ts

@@ -71,9 +71,9 @@ export default class ElementsPage extends Renderer<Context> {
     } = doc;
     const content = fileExists ? await this.renderFile(filePath, ctx) : '';
     const stylesheets = [
-      '/assets/packages/@rhds/elements/elements/rh-table/rh-table-lightdom.css',
+      // '/assets/packages/@rhds/elements/elements/rh-table/rh-table-lightdom.css',
       '/styles/samp.css',
-      ctx.doc.hasLightdom && `/assets/packages/@rhds/elements/elements/${tagName}/${tagName}-lightdom.css`,
+      // ctx.doc.hasLightdom && `/assets/packages/@rhds/elements/elements/${tagName}/${tagName}-lightdom.css`,
       isCodePage && '/styles/pages/code.css',
     ].filter(Boolean);
 
@@ -961,4 +961,3 @@ export default class ElementsPage extends Renderer<Context> {
     }
   }
 };
-

docs/_plugins/lit-ssr/worker.ts

@@ -60,6 +60,14 @@ class RHDSSSRableRenderer extends LitElementRenderer {
     }
     yield* super.renderShadow(renderInfo);
   }
+
+  override* renderLight(renderInfo: RenderInfo): RenderResult {
+    if (this.tagName === 'rh-table') {
+      console.log(renderInfo.customElementHostStack);
+      console.log(this.element);
+    }
+    yield* super.renderLight(renderInfo);
+  }
 }
 
 const elementRenderers = [
@@ -93,4 +101,3 @@ export default async function renderPage({
   const end = performance.now();
   return { page, rendered, durationMs: end - start };
 }
-

elements/rh-table/demo/rh-table.html

@@ -38,8 +38,6 @@
   <small slot="summary">Dates and venues subject to change.</small>
 </rh-table>
 
-<link rel="stylesheet" href="../rh-table-lightdom.css">
-
 <script type="module">
   import '@rhds/elements/rh-table/rh-table.js';
 </script>

elements/rh-table/rh-sort-button.ts

@@ -3,17 +3,17 @@ import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { classMap } from 'lit/directives/class-map.js';
 
-import { ComposedEvent } from '@patternfly/pfe-core';
-
 import { colorContextConsumer, type ColorTheme } from '../../lib/context/color/consumer.js';
 
 import styles from './rh-sort-button.css';
 
 const DIRECTIONS_OPPOSITES = { asc: 'desc', desc: 'asc' } as const;
 
-export class RequestSortEvent extends ComposedEvent {
+export class RequestSortEvent extends Event {
   constructor(public direction: 'asc' | 'desc') {
     super('request-sort', {
+      bubbles: true,
+      composed: true,
       cancelable: true,
     });
   }

elements/rh-table/rh-table-lightdom.css

@@ -1,4 +1,11 @@
+@property --_rhds-lightdom {
+  inherits: false;
+  syntax: string;
+}
+
 rh-table {
+  --_rhds-lightdom: rh-table;
+
   container: host / inline-size;
 
   & thead {

elements/rh-table/rh-table.ts

@@ -1,3 +1,5 @@
+import type { ColorTheme } from '@rhds/elements/lib/context/color/consumer.js';
+
 import { LitElement, html, isServer } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -6,7 +8,8 @@ import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
 
 import { RequestSortEvent, RhSortButton } from './rh-sort-button.js';
 
-import { colorContextConsumer, type ColorTheme } from '../../lib/context/color/consumer.js';
+import { colorContextConsumer } from '@rhds/elements/lib/context/color/consumer.js';
+import { LightdomCSSController } from '@rhds/elements/lib/LightdomCSSController.js';
 
 import styles from './rh-table.css';
 
@@ -68,6 +71,9 @@ export class RhTable extends LitElement {
     return this.querySelector('[slot="summary"]') as HTMLElement | undefined;
   }
 
+  // eslint-disable-next-line no-unused-private-class-members
+  #lightdom = new LightdomCSSController(this, import.meta.url);
+
   #internalColorPalette?: string | null;
 
   #logger = new Logger(this);

lib/LightdomCSSController.ts

@@ -0,0 +1,50 @@
+import type { ReactiveController, ReactiveElement } from 'lit';
+
+import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
+import type { RHDSSSRController } from './ssr-controller.js';
+
+const handleAsText = (r: Response) => r.text();
+
+export class LightdomCSSController implements ReactiveController, RHDSSSRController {
+  isRHDSSSRController = true;
+
+  host: ReactiveElement;
+
+  #tagName: string;
+
+  /** URL to lightdom sheet, by convention it must be the tagName, with `-lightdom.css` suffix */
+  #url: URL;
+
+  #logger: Logger;
+
+  #computedStyles?: CSSStyleDeclaration;
+
+  constructor(
+    host: ReactiveElement,
+    /** import.meta.url from the element definition module */
+    url: string,
+  ) {
+    this.host = host;
+    this.#tagName = host.localName;
+    this.#url = new URL(`${this.#tagName}-lightdom.css`, url);
+    this.#logger = new Logger(host);
+    host.addController(this);
+  }
+
+  async hostConnected(): Promise<void> {
+    this.#computedStyles ??= getComputedStyle(this.host);
+    if (this.#computedStyles.getPropertyValue('--_rhds-lightdom') !== this.#tagName) {
+      const root = this.host.getRootNode();
+      if (root instanceof Document || root instanceof ShadowRoot) {
+        try {
+          const sheet = new CSSStyleSheet();
+          const css = await fetch(this.#url).then(handleAsText);
+          sheet.replaceSync(css);
+          root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
+        } catch (error) {
+          this.#logger.error(error);
+        }
+      }
+    }
+  };
+}

uxdot/uxdot-repo-status-checklist.ts

@@ -17,8 +17,6 @@ export class UxdotRepoStatusChecklist extends UxdotRepoElement {
   render() {
     const status = this.getStatus(this.element!);
     return html`
-      <!-- TODO: remove lightdom after implementing auto-load-->
-      <link rel="stylesheet" href="/assets/packages/@rhds/elements/elements/rh-table/rh-table-lightdom.css">
       <div id="container">
         <rh-table>
           <table>

uxdot/uxdot-repo-status-list.ts

@@ -15,8 +15,6 @@ export class UxdotRepoStatusList extends UxdotRepoElement {
   render() {
     const status = this.getStatus(this.element!);
     return html`
-      <!-- TODO: remove lightdom after implementing auto-load-->
-      <link rel="stylesheet" href="/assets/packages/@rhds/elements/elements/rh-table/rh-table-lightdom.css">
       <div id="container">
         <a href="#status-checklist" class="checklist">What do these mean?</a>
         <div id="inner-container">

uxdot/uxdot-repo-status-table.ts

@@ -17,8 +17,6 @@ export class UxdotRepoStatusTable extends UxdotRepoElement {
   render() {
     const status = this.getStatus();
     return html`
-      <!-- TODO: remove lightdom after implementing auto-load-->
-      <link rel="stylesheet" href="/assets/packages/@rhds/elements/elements/rh-table/rh-table-lightdom.css">
       <div id="container">
         <rh-table>
           <table>

uxdot/uxdot-spacer-tokens-table.ts

@@ -48,8 +48,6 @@ export class UxdotSpacerTokensTable extends LitElement {
         .filter(Boolean);
 
     return html`
-      <!-- TODO: remove lightdom after implementing auto-load-->
-      <link rel="stylesheet" href="/assets/packages/@rhds/elements/elements/rh-table/rh-table-lightdom.css">
       <rh-table color-palette="${this.colorPalette}">
         <table>
           <caption>${this.caption}</caption>