Skip to content

Commit 6eb2a07

Browse files
committed
fix(label-group): guard all renderRoot.querySelector calls for SSR
During SSR, renderRoot exists but lacks querySelector as a method. Optional chaining on the method call (`?.querySelector?.()`) handles this. Also replace `@queryAssignedNodes` with a manually guarded getter for the category slot. Assisted-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent 8adf51a commit 6eb2a07

1 file changed

Lines changed: 8 additions & 5 deletions

File tree

elements/pf-label-group/pf-label-group.ts

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { LitElement, html, isServer, type TemplateResult } from 'lit';
22
import { customElement } from 'lit/decorators/custom-element.js';
33
import { property } from 'lit/decorators/property.js';
44
import { state } from 'lit/decorators/state.js';
5-
import { queryAssignedNodes } from 'lit/decorators/query-assigned-nodes.js';
65
import { classMap } from 'lit/directives/class-map.js';
76

87
import { observes } from '@patternfly/pfe-core/decorators/observes.js';
@@ -89,14 +88,18 @@ export class PfLabelGroup extends LitElement {
8988
@state() private _ssrLabelCount = 0;
9089

9190
get #overflowLabel(): PfLabel | null {
92-
return this.renderRoot?.querySelector<PfLabel>('#overflow') ?? null;
91+
return this.renderRoot?.querySelector?.<PfLabel>('#overflow') ?? null;
9392
}
9493

9594
get #closeButton(): HTMLButtonElement | null {
96-
return this.renderRoot?.querySelector<HTMLButtonElement>('#close-button') ?? null;
95+
return this.renderRoot?.querySelector?.<HTMLButtonElement>('#close-button') ?? null;
9796
}
9897

99-
@queryAssignedNodes({ slot: 'category', flatten: true }) private _categorySlotted?: Node[];
98+
get #categorySlotted(): Node[] {
99+
const slot = this.renderRoot
100+
?.querySelector?.<HTMLSlotElement>('slot[name="category"]');
101+
return slot?.assignedNodes({ flatten: true }) ?? [];
102+
}
100103

101104
get #labels(): NodeListOf<PfLabel> | PfLabel[] {
102105
if (isServer) {
@@ -113,7 +116,7 @@ export class PfLabelGroup extends LitElement {
113116
}
114117

115118
get #hasCategory(): boolean {
116-
return (this._categorySlotted ?? []).length > 0;
119+
return this.#categorySlotted.length > 0;
117120
}
118121

119122
get #remaining(): number {

0 commit comments

Comments
 (0)