diff --git a/packages/webawesome/src/components/drawer/drawer.ts b/packages/webawesome/src/components/drawer/drawer.ts index 3d40cfd5f..87f2c7cb2 100644 --- a/packages/webawesome/src/components/drawer/drawer.ts +++ b/packages/webawesome/src/components/drawer/drawer.ts @@ -291,29 +291,29 @@ export default class WaDrawer extends WebAwesomeElement { } } -// -// Watch for data-drawer="open *" clicks -// -document.addEventListener('click', (event: MouseEvent) => { - const drawerAttrEl = (event.target as Element).closest('[data-drawer]'); - - if (drawerAttrEl instanceof Element) { - const [command, id] = parseSpaceDelimitedTokens(drawerAttrEl.getAttribute('data-drawer') || ''); - - if (command === 'open' && id?.length) { - const doc = drawerAttrEl.getRootNode() as Document | ShadowRoot; - const drawer = doc.getElementById(id) as WaDrawer; - - if (drawer?.localName === 'wa-drawer') { - drawer.open = true; - } else { - console.warn(`A drawer with an ID of "${id}" could not be found in this document.`); +if (!isServer) { + // + // Watch for data-drawer="open *" clicks + // + document.addEventListener('click', (event: MouseEvent) => { + const drawerAttrEl = (event.target as Element).closest('[data-drawer]'); + + if (drawerAttrEl instanceof Element) { + const [command, id] = parseSpaceDelimitedTokens(drawerAttrEl.getAttribute('data-drawer') || ''); + + if (command === 'open' && id?.length) { + const doc = drawerAttrEl.getRootNode() as Document | ShadowRoot; + const drawer = doc.getElementById(id) as WaDrawer; + + if (drawer?.localName === 'wa-drawer') { + drawer.open = true; + } else { + console.warn(`A drawer with an ID of "${id}" could not be found in this document.`); + } } } - } -}); + }); -if (!isServer) { // Ugly, but it fixes light dismiss in Safari: https://bugs.webkit.org/show_bug.cgi?id=267688 document.body.addEventListener('pointerdown', () => { /* empty */ diff --git a/packages/webawesome/src/internal/slot.ts b/packages/webawesome/src/internal/slot.ts index a11fdcec0..5499f5f2d 100644 --- a/packages/webawesome/src/internal/slot.ts +++ b/packages/webawesome/src/internal/slot.ts @@ -1,4 +1,4 @@ -import type { ReactiveController, ReactiveControllerHost } from 'lit'; +import { isServer, type ReactiveController, type ReactiveControllerHost } from 'lit'; /** A reactive controller that determines when slots exist. */ export class HasSlotController implements ReactiveController { @@ -11,6 +11,11 @@ export class HasSlotController implements ReactiveController { } private hasDefaultSlot() { + // `Element#childNodes` is unavailable in Lit's SSR context + if (isServer) { + return false; + } + return [...this.host.childNodes].some(node => { if (node.nodeType === Node.TEXT_NODE && node.textContent!.trim() !== '') { return true; @@ -36,6 +41,11 @@ export class HasSlotController implements ReactiveController { } private hasNamedSlot(name: string) { + // `Element#querySelector` is unavailable in Lit's SSR context + if (isServer) { + return false; + } + return this.host.querySelector(`:scope > [slot="${name}"]`) !== null; } @@ -44,10 +54,20 @@ export class HasSlotController implements ReactiveController { } hostConnected() { + // `ShadowRoot#addEventListener` implementation in https://github.com/lit/lit/pull/4893 + if (isServer) { + return; + } + this.host.shadowRoot!.addEventListener('slotchange', this.handleSlotChange); } hostDisconnected() { + // `ShadowRoot#removeEventListener` implementation in https://github.com/lit/lit/pull/4893 + if (isServer) { + return; + } + this.host.shadowRoot!.removeEventListener('slotchange', this.handleSlotChange); }