perf: wip experimental ssr with lightdom css

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,3 +1,8 @@
+@property --_rhds-lightdom {
+  inherits: false;
+  syntax: string;
+}
+
 rh-table {
   --_rhds-lightdom: rh-table;