From bb6b66ef399cdf1031c925ce6e275a110f241b63 Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Wed, 20 Nov 2024 17:21:39 +0200
Subject: [PATCH] perf: wip experimental ssr with lightdom css

---
 docs/_plugins/lit-ssr/worker.ts         | 9 ++++++++-
 elements/rh-table/demo/rh-table.html    | 2 --
 elements/rh-table/rh-sort-button.ts     | 6 +++---
 elements/rh-table/rh-table-lightdom.css | 5 +++++
 4 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/docs/_plugins/lit-ssr/worker.ts b/docs/_plugins/lit-ssr/worker.ts
index d073e7e64c..1e9a7d10d0 100644
--- a/docs/_plugins/lit-ssr/worker.ts
+++ b/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 };
 }
-
diff --git a/elements/rh-table/demo/rh-table.html b/elements/rh-table/demo/rh-table.html
index 31523bb0b8..4c3f0ab67f 100644
--- a/elements/rh-table/demo/rh-table.html
+++ b/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>
diff --git a/elements/rh-table/rh-sort-button.ts b/elements/rh-table/rh-sort-button.ts
index 4686c61625..500ca9fd85 100644
--- a/elements/rh-table/rh-sort-button.ts
+++ b/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,
     });
   }
diff --git a/elements/rh-table/rh-table-lightdom.css b/elements/rh-table/rh-table-lightdom.css
index 73b157ed10..1b10897c24 100644
--- a/elements/rh-table/rh-table-lightdom.css
+++ b/elements/rh-table/rh-table-lightdom.css
@@ -1,3 +1,8 @@
+@property --_rhds-lightdom {
+  inherits: false;
+  syntax: string;
+}
+
 rh-table {
   --_rhds-lightdom: rh-table;