@emkodev/emroute 1.10.0-beta.4 → 1.12.0-beta.1

package/src/element/component.element.ts

@@ -11,8 +11,8 @@
 
 import type { Component } from '../../core/component/abstract.component.ts';
 import type { ComponentContext, ContextProvider } from '../../core/type/component.type.ts';
-import { HTMLElementBase } from '../util/html.util.ts';
-import { LAZY_ATTR, RESERVED_ATTRS, SSR_ATTR } from '../../core/util/html.util.ts';
+import { CSSStyleSheetBase, HTMLElementBase } from '../util/html.util.ts';
+import { LAZY_ATTR, RESERVED_ATTRS, SSR_ATTR, scopeWidgetCss } from '../../core/util/html.util.ts';
 
 type ComponentState = 'idle' | 'loading' | 'ready' | 'error';
 
@@ -36,6 +36,9 @@ export class ComponentElement<TParams, TData> extends HTMLElementBase {
   /** Lazy module loaders keyed by tag name — set by registerLazy(). */
   private static lazyLoaders = new Map<string, () => Promise<unknown>>();
 
+  /** Shared CSSStyleSheet cache — keyed by widget name for cross-instance sharing. */
+  private static sheetCache = new Map<string, CSSStyleSheet>();
+
   /** App-level context provider set once during router initialization. */
   private static extendContext: ContextProvider | undefined;
 
@@ -47,6 +50,9 @@ export class ComponentElement<TParams, TData> extends HTMLElementBase {
     ComponentElement.extendContext = provider;
   }
 
+  /** Custom state names exposed via ElementInternals for CSS `:state()` matching. */
+  private static readonly CUSTOM_STATES = ['lazy', 'loading', 'hydrating', 'ready', 'error'] as const;
+
   private component: Component<TParams, TData>;
   private effectiveFiles?: WidgetFiles | undefined;
   private params: TParams | null = null;
@@ -57,6 +63,7 @@ export class ComponentElement<TParams, TData> extends HTMLElementBase {
   private deferred: PromiseWithResolvers<void> | null = null;
   private abortController: AbortController | null = null;
   private intersectionObserver: IntersectionObserver | null = null;
+  private readonly internals: ElementInternals;
 
   /** Promise that resolves with fetched data (available after loadData starts) */
   dataPromise: Promise<TData | null> | null = null;
@@ -65,6 +72,7 @@ export class ComponentElement<TParams, TData> extends HTMLElementBase {
     super();
     this.component = component;
     this.effectiveFiles = files;
+    this.internals = this.attachInternals();
     // Attach shadow root if not already present (Declarative Shadow DOM creates it from <template shadowrootmode="open">)
     // This enables progressive enhancement: SSR with DSD works without JS, then hydrates when JS loads
     if (!this.shadowRoot) {
@@ -72,6 +80,14 @@ export class ComponentElement<TParams, TData> extends HTMLElementBase {
     }
   }
 
+  /** Update the CSS-visible custom state via ElementInternals. */
+  private setCustomState(next: typeof ComponentElement.CUSTOM_STATES[number]): void {
+    for (const s of ComponentElement.CUSTOM_STATES) {
+      this.internals.states.delete(s);
+    }
+    this.internals.states.add(next);
+  }
+
   /**
    * Register a widget as a custom element: `widget-{name}`.
    * Creates a fresh widget instance per DOM element (per-element state).
@@ -203,7 +219,6 @@ export class ComponentElement<TParams, TData> extends HTMLElementBase {
     }
 
     this.component.element = this;
-    this.style.contentVisibility = 'auto';
     this.abortController = new AbortController();
     const signal = this.abortController.signal;
 
@@ -244,9 +259,13 @@ export class ComponentElement<TParams, TData> extends HTMLElementBase {
     };
     this.context = ComponentElement.extendContext ? ComponentElement.extendContext(base) : base;
 
+    // Apply CSS via adoptedStyleSheets (shared across instances)
+    this.adoptCss();
+
     // Hydrate from SSR: adopt content from Declarative Shadow DOM
     if (this.hasAttribute(SSR_ATTR)) {
       this.removeAttribute(SSR_ATTR);
+      this.setCustomState('hydrating');
 
       // Read SSR data from light DOM (JSON text placed alongside shadow root)
       const lightText = this.textContent?.trim();
@@ -267,7 +286,10 @@ export class ComponentElement<TParams, TData> extends HTMLElementBase {
         const args = { data: this.data, params: this.params!, context: this.context };
         queueMicrotask(() => {
           this.component.hydrate!(args);
+          this.setCustomState('ready');
         });
+      } else {
+        this.setCustomState('ready');
       }
 
       this.signalReady();
@@ -276,6 +298,7 @@ export class ComponentElement<TParams, TData> extends HTMLElementBase {
 
     // Lazy: defer loadData until element is visible
     if (this.hasAttribute(LAZY_ATTR)) {
+      this.setCustomState('lazy');
       this.intersectionObserver = new IntersectionObserver((entries) => {
         const entry = entries[0]!;
         if (entry.isIntersecting) {
@@ -299,6 +322,9 @@ export class ComponentElement<TParams, TData> extends HTMLElementBase {
     this.abortController?.abort();
     this.abortController = null;
     this.state = 'idle';
+    for (const s of ComponentElement.CUSTOM_STATES) {
+      this.internals.states.delete(s);
+    }
     this.data = null;
     this.context = undefined!;
     this.dataPromise = null;
@@ -328,12 +354,44 @@ export class ComponentElement<TParams, TData> extends HTMLElementBase {
     return this.effectiveFiles ?? {};
   }
 
+  /** Base sheet shared by all widgets — host-level defaults. */
+  private static baseSheet: CSSStyleSheet | null = null;
+
+  private static getBaseSheet(): CSSStyleSheet {
+    if (!ComponentElement.baseSheet) {
+      ComponentElement.baseSheet = new CSSStyleSheetBase();
+      ComponentElement.baseSheet.replaceSync(':host { container-type: inline-size; content-visibility: auto; }');
+    }
+    return ComponentElement.baseSheet;
+  }
+
+  /** Apply CSS via adoptedStyleSheets with cross-instance sheet sharing. */
+  private adoptCss(): void {
+    const css = this.effectiveFiles?.css;
+    const base = ComponentElement.getBaseSheet();
+
+    if (!css) {
+      this.shadowRoot!.adoptedStyleSheets = [base];
+      return;
+    }
+
+    const name = this.component.name;
+    let sheet = ComponentElement.sheetCache.get(name);
+    if (!sheet) {
+      sheet = new CSSStyleSheetBase();
+      sheet.replaceSync(scopeWidgetCss(css, name));
+      ComponentElement.sheetCache.set(name, sheet);
+    }
+    this.shadowRoot!.adoptedStyleSheets = [base, sheet];
+  }
+
   private async loadData(): Promise<void> {
     if (this.params === null) return;
 
     const signal = this.abortController?.signal;
 
     this.state = 'loading';
+    this.setCustomState('loading');
     this.render();
 
     try {
@@ -349,6 +407,7 @@ export class ComponentElement<TParams, TData> extends HTMLElementBase {
       if (signal?.aborted) return;
 
       this.state = 'ready';
+      this.setCustomState('ready');
     } catch (e) {
       if (e instanceof DOMException && e.name === 'AbortError') return;
       if (signal?.aborted) return;
@@ -363,6 +422,7 @@ export class ComponentElement<TParams, TData> extends HTMLElementBase {
 
   private setError(message: string): void {
     this.state = 'error';
+    this.setCustomState('error');
     this.errorMessage = message;
     this.render();
     this.signalReady(); // Ready even on error (completed loading)

package/src/util/html.util.ts

@@ -16,16 +16,50 @@ export {
   STATUS_MESSAGES,
 } from '../../core/util/html.util.ts';
 
+/**
+ * SSR-compatible CSSStyleSheet mock.
+ * Stores cssText for serialization into <style> tags during SSR.
+ */
+class SsrCSSStyleSheet {
+  cssText = '';
+
+  replaceSync(css: string): void {
+    this.cssText = css;
+  }
+
+  replace(css: string): Promise<SsrCSSStyleSheet> {
+    this.cssText = css;
+    return Promise.resolve(this);
+  }
+}
+
+/** Server-safe CSSStyleSheet: real in browser, mock on server. */
+export const CSSStyleSheetBase = globalThis.CSSStyleSheet ??
+  (SsrCSSStyleSheet as unknown as typeof CSSStyleSheet);
+
 /**
  * SSR-compatible ShadowRoot mock.
  */
 class SsrShadowRoot {
   private _innerHTML = '';
+  private _adoptedStyleSheets: SsrCSSStyleSheet[] = [];
 
   constructor(public readonly host: SsrHTMLElement) {}
 
+  get adoptedStyleSheets(): SsrCSSStyleSheet[] {
+    return this._adoptedStyleSheets;
+  }
+
+  set adoptedStyleSheets(sheets: SsrCSSStyleSheet[]) {
+    this._adoptedStyleSheets = sheets;
+  }
+
   get innerHTML(): string {
-    return this._innerHTML;
+    const adopted = this._adoptedStyleSheets
+      .filter(s => s.cssText)
+      .map(s => `<style>${s.cssText}</style>`)
+      .join('');
+    return adopted + this._innerHTML;
   }
 
   set innerHTML(value: string) {
@@ -55,6 +89,13 @@ class SsrShadowRoot {
   }
 }
 
+/**
+ * SSR-compatible ElementInternals mock.
+ */
+class SsrElementInternals {
+  readonly states = new Set<string>();
+}
+
 /**
  * SSR-compatible HTMLElement mock.
  */
@@ -105,6 +146,10 @@ class SsrHTMLElement {
     return this._shadowRoot as unknown as ShadowRoot;
   }
 
+  attachInternals(): ElementInternals {
+    return new SsrElementInternals() as unknown as ElementInternals;
+  }
+
   getAttribute(name: string): string | null {
     return this._attributes.get(name) ?? null;
   }