fix(elements): ssr connected callbacks

Author: bennypowers

elements/pf-back-to-top/pf-back-to-top.ts

@@ -158,7 +158,9 @@ export class PfBackToTop extends LitElement {
     }
 
     this.#scrollSpy = !!this.scrollableSelector;
-    if (this.#scrollSpy && this.scrollableSelector) {
+    if (isServer) {
+      return;
+    } else if (this.#scrollSpy && this.scrollableSelector) {
       const scrollableElement = this.#rootNode?.querySelector?.(this.scrollableSelector);
       if (!scrollableElement) {
         this.#logger.error(`unable to find element with selector ${this.scrollableSelector}`);

elements/pf-clipboard-copy/pf-clipboard-copy.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, type TemplateResult } from 'lit';
+import { LitElement, html, isServer, type TemplateResult } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -108,7 +108,9 @@ export class PfClipboardCopy extends LitElement {
   connectedCallback(): void {
     super.connectedCallback();
     this.#mo.observe(this, { characterData: true });
-    this.#onMutation();
+    if (!isServer) {
+      this.#onMutation();
+    }
   }
 
   /**
@@ -167,7 +169,7 @@ export class PfClipboardCopy extends LitElement {
   }
 
   #onMutation() {
-    if (this.childNodes.length > 0) {
+    if (this.childNodes?.length > 0) {
       this.value = this.getAttribute('value') ?? this.#dedent(Array.from(this.childNodes, child =>
         (child instanceof Element || child instanceof Text) ? (child.textContent ?? '') : '')
           .join(''));

elements/pf-table/pf-table.ts

@@ -708,7 +708,7 @@ export class PfTable extends LitElement {
   }
 
   #onSlotchange() {
-    this.columns = this.querySelector('pf-tr')?.querySelectorAll('pf-th')?.length ?? 0;
+    this.columns = this.querySelector?.('pf-tr')?.querySelectorAll('pf-th')?.length ?? 0;
     this.requestUpdate();
   }
 

elements/pf-tabs/pf-tab.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, type TemplateResult } from 'lit';
+import { LitElement, html, isServer, type TemplateResult } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';
@@ -63,7 +63,7 @@ export class PfTab extends LitElement {
   static readonly styles: CSSStyleSheet[] = [styles];
 
   @queryAssignedElements({ slot: 'icon', flatten: true })
-  private icons!: HTMLElement[];
+  private icons?: HTMLElement[];
 
   @property({ reflect: true, type: Boolean }) active = false;
 
@@ -105,13 +105,14 @@ export class PfTab extends LitElement {
     const { box, fill = false, vertical = false } = this.ctx ?? {};
     const light = box === 'light';
     const dark = box === 'dark';
+    const icons = isServer ? [] : this.icons;
     return html`
       <div id="button"
            part="button"
            class="${classMap({ active, box: !!box, dark, light, fill, vertical })}">
         <slot name="icon"
               part="icon"
-              ?hidden="${!this.icons.length}"
+              ?hidden="${!icons?.length}"
               @slotchange="${() => this.requestUpdate()}"></slot>
         <slot part="text"></slot>
       </div>

elements/pf-tooltip/pf-tooltip.ts

@@ -130,11 +130,11 @@ export class PfTooltip extends LitElement {
   }) flipBehavior?: Placement[];
 
   get #invoker(): HTMLSlotElement | null {
-    return this.shadowRoot?.querySelector('#invoker') ?? null;
+    return this.shadowRoot?.querySelector?.('#invoker') ?? null;
   }
 
   get #content(): HTMLElement | null {
-    return this.shadowRoot?.querySelector('#tooltip') ?? null;
+    return this.shadowRoot?.querySelector?.('#tooltip') ?? null;
   }
 
   #referenceTrigger?: HTMLElement | null;