diff --git a/.changeset/lost-days-sick.md b/.changeset/lost-days-sick.md
new file mode 100644
index 0000000000..18415e294f
--- /dev/null
+++ b/.changeset/lost-days-sick.md
@@ -0,0 +1,13 @@
+---
+"@patternfly/pfe-core": minor
+---
+
+`ssrCallConnectedCallback`: exported from `ssr-shims.js`, replacing the deprecated `globalThis.litSsrCallConnectedCallback` global. Pass a predicate to limit which elements receive `connectedCallback` during SSR, or omit it to opt in all elements.
+
+```typescript
+import { ssrCallConnectedCallback } from '@patternfly/pfe-core/ssr-shims.js';
+
+ssrCallConnectedCallback(el =>
+ el.localName.startsWith('pf-') || el.localName.startsWith('rh-')
+);
+```
diff --git a/.changeset/poor-sky-blue.md b/.changeset/poor-sky-blue.md
new file mode 100644
index 0000000000..407dbc2479
--- /dev/null
+++ b/.changeset/poor-sky-blue.md
@@ -0,0 +1,15 @@
+---
+"@patternfly/pfe-tools": minor
+---
+
+`renderGlobal`: third `connectedCallbackFilter` parameter limits which elements receive `connectedCallback` during SSR. Without it, all elements opt in.
+
+```typescript
+import { renderGlobal } from '@patternfly/pfe-tools/ssr/global.js';
+
+const html = await renderGlobal(
+ '',
+ ['my-package/my-el.js'],
+ el => el.localName.startsWith('my-'),
+);
+```
diff --git a/core/pfe-core/ssr-shims.ts b/core/pfe-core/ssr-shims.ts
index 32d0168960..7eef70229a 100644
--- a/core/pfe-core/ssr-shims.ts
+++ b/core/pfe-core/ssr-shims.ts
@@ -1,4 +1,5 @@
import { installWindowOnGlobal } from '@lit-labs/ssr/lib/dom-shim.js';
+import { LitElementRenderer } from '@lit-labs/ssr/lib/lit-element-renderer.js';
class ObserverShim {
observe(): void {
@@ -30,8 +31,13 @@ function getComputedStyle() {
};
};
-// @ts-expect-error: opt in to event support in ssr
-globalThis.litSsrCallConnectedCallback = true;
+export function ssrCallConnectedCallback(
+ predicate: (element: { localName: string }) => boolean = () => true,
+): void {
+ LitElementRenderer.renderOptions.push(
+ element => predicate(element) ? { connectedCallback: true } : undefined,
+ );
+}
installWindowOnGlobal({
ErrorEvent: Event,
diff --git a/package-lock.json b/package-lock.json
index e6e5f2b58b..962b137401 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1906,14 +1906,14 @@
}
},
"node_modules/@lit-labs/ssr": {
- "version": "4.0.0",
- "resolved": "https://registry.npmjs.org/@lit-labs/ssr/-/ssr-4.0.0.tgz",
- "integrity": "sha512-pODr+t7cZVIrCRLuSLuWAACDnztEk5IrRFwFsbxyAyWcP2XP8aKuUZdVM/biXqxvIyHyCKtNZ92Gdcr+pjA5BQ==",
+ "version": "4.1.0",
+ "resolved": "https://registry.npmjs.org/@lit-labs/ssr/-/ssr-4.1.0.tgz",
+ "integrity": "sha512-m0zymVVlHB1ddJQ1lastsV8ROW3whFOiHJhVPQWd04MnGTkTlUUVLQctux1QlyD9BtLXNN6iASxv388vhgKMFg==",
"license": "BSD-3-Clause",
"peer": true,
"dependencies": {
"@lit-labs/ssr-client": "^1.1.7",
- "@lit-labs/ssr-dom-shim": "^1.5.0",
+ "@lit-labs/ssr-dom-shim": "^1.6.0",
"@lit/reactive-element": "^2.0.4",
"@parse5/tools": "^0.3.0",
"enhanced-resolve": "^5.10.0",
@@ -1948,9 +1948,9 @@
}
},
"node_modules/@lit-labs/ssr-dom-shim": {
- "version": "1.5.1",
- "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.5.1.tgz",
- "integrity": "sha512-Aou5UdlSpr5whQe8AA/bZG0jMj96CoJIWbGfZ91qieWu5AWUMKw8VR/pAkQkJYvBNhmCcWnZlyyk5oze8JIqYA==",
+ "version": "1.6.0",
+ "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.6.0.tgz",
+ "integrity": "sha512-VHb0ALPMTlgKjM6yIxxoQNnpKyUKLD04VzeQdsiXkMqkvYlAHxq9glGLmgbb889/1GsohSOAjvQYoiBppXFqrQ==",
"license": "BSD-3-Clause"
},
"node_modules/@lit/context": {
@@ -16022,7 +16022,7 @@
"@11ty/eleventy-plugin-syntaxhighlight": "^5.0.2",
"@changesets/cli": "^2.29.8",
"@koa/router": "^15.1.1",
- "@lit-labs/ssr": "^4.0.0",
+ "@lit-labs/ssr": "^4.1.0",
"@open-wc/testing": "^4.0.0",
"@playwright/test": "~1.57.0",
"@pwrs/mappa": "^0.0.4",
diff --git a/tools/pfe-tools/package.json b/tools/pfe-tools/package.json
index 9951194275..c604a1514b 100644
--- a/tools/pfe-tools/package.json
+++ b/tools/pfe-tools/package.json
@@ -68,7 +68,7 @@
"@11ty/eleventy-plugin-syntaxhighlight": "^5.0.2",
"@changesets/cli": "^2.29.8",
"@koa/router": "^15.1.1",
- "@lit-labs/ssr": "^4.0.0",
+ "@lit-labs/ssr": "^4.1.0",
"@open-wc/testing": "^4.0.0",
"@playwright/test": "~1.57.0",
"@pwrs/mappa": "^0.0.4",
diff --git a/tools/pfe-tools/ssr/global.ts b/tools/pfe-tools/ssr/global.ts
index eecb84a620..e23b5a7a48 100644
--- a/tools/pfe-tools/ssr/global.ts
+++ b/tools/pfe-tools/ssr/global.ts
@@ -3,14 +3,18 @@
* first importing the provided component defintions into nodejs' global scope.
* @param html string to render
* @param importSpecifiers list of web component definition module import specifiers
+ * @param connectedCallbackFilter optional predicate to limit which elements
+ * receive `connectedCallback` during SSR. Defaults to all elements.
*/
export async function renderGlobal(
html: string,
importSpecifiers: string[],
+ connectedCallbackFilter?: (element: { localName: string }) => boolean,
): Promise {
// hack to avoid circular typescript project reference
const spec = '@patternfly/pfe-core/ssr-shims.js';
- await import(spec);
+ const { ssrCallConnectedCallback } = await import(spec);
+ ssrCallConnectedCallback(connectedCallbackFilter);
const { ssr } = await import('./ssr.js');
await Promise.all(importSpecifiers.map(x => import(x)));
return ssr(html);