Goal
An `` rendered on the server is visible before its JavaScript runs, and stays visible when scripting is disabled.
Context
The base wrapper starts at `opacity: 0; transform: translateX(…)` and only `connected()` adds the `.showing` class that makes it visible. In Declarative Shadow DOM output from `@webtides/element-js-ssr-renderer` the markup and styles are complete, but the notification stays transparent until the element upgrades, and forever without JS. For inline status messages (a failed login, a saved-changes hint) that is the content the page is there for. Hit in loewen-digital/sveltekit-ai-starter-template (issue #10 there); the template injects `:host(:not(:state(connected))) [part~='base'] { opacity: 1; transform: none }` through the renderer's per-component `styles` until this is solved upstream.
Acceptance criteria
Proposal (non-binding)
Treat "not yet connected" as the resting visible state, e.g. `:host(:not(:state(connected))) [part~='base'] { opacity: 1; transform: none; }` in `notification.style.js`, or derive the resting state from the reflected `[open]` attribute and only animate from a `.entering` class.
Out of scope
The toast stack, which is created client-side only.
Goal
An `` rendered on the server is visible before its JavaScript runs, and stays visible when scripting is disabled.
Context
The base wrapper starts at `opacity: 0; transform: translateX(…)` and only `connected()` adds the `.showing` class that makes it visible. In Declarative Shadow DOM output from `@webtides/element-js-ssr-renderer` the markup and styles are complete, but the notification stays transparent until the element upgrades, and forever without JS. For inline status messages (a failed login, a saved-changes hint) that is the content the page is there for. Hit in loewen-digital/sveltekit-ai-starter-template (issue #10 there); the template injects `:host(:not(:state(connected))) [part~='base'] { opacity: 1; transform: none }` through the renderer's per-component `styles` until this is solved upstream.
Acceptance criteria
Proposal (non-binding)
Treat "not yet connected" as the resting visible state, e.g. `:host(:not(:state(connected))) [part~='base'] { opacity: 1; transform: none; }` in `notification.style.js`, or derive the resting state from the reflected `[open]` attribute and only animate from a `.entering` class.
Out of scope
The toast stack, which is created client-side only.