fix: inject DSD with inline styles for nested custom elements

The SSR pipeline's injectDSD() was not recursively processing custom
elements nested inside other components' shadow DOM. A <theme-toggle>
inside <blog-shell>'s render output was emitted as an empty element
with no DSD template — no styles, no content until JS upgraded it.
This caused a visible layout shift (CLS) in the header.

Changes:
- render-server.js: recursively call injectDSD() on each component's
  rendered inner HTML so nested elements get their own DSD templates
  with inline <style> tags. Mirrors how Lit SSR handles this.
- component.js: when a shadow root already exists from DSD, remove
  the SSR inline <style> before calling adoptStyles() to avoid
  duplicate styles (adoptedStyleSheets takes over).
- blog-shell.ts: revert the manual CLS workaround — no longer needed
  since the framework now handles it.

Author: vivek7405

examples/blog/components/blog-shell.ts

@@ -61,14 +61,6 @@ export class BlogShell extends WebComponent {
     }
     .nav a:hover { color: var(--fg); }
 
-    /* Reserve space for theme-toggle before it upgrades to prevent
-       header height shift (CLS). Matches the button size in theme-toggle. */
-    .nav theme-toggle {
-      display: inline-flex;
-      width: 36px;
-      height: 36px;
-    }
-
     main {
       display: block;
       max-width: 760px;

packages/core/src/component.js

@@ -350,13 +350,23 @@ export class WebComponent extends Base {
     this._connected = true;
     const Ctor = /** @type any */ (this.constructor);
     if (Ctor.shadow !== false) {
+      const hadSSRShadow = !!this.shadowRoot;
       if (!this.shadowRoot) {
         /** @type any */ (this).attachShadow({ mode: 'open' });
       }
       this._renderRoot = this.shadowRoot;
       const styles = Ctor.styles;
       const list = Array.isArray(styles) ? styles : isCSS(styles) ? [styles] : [];
-      if (list.length) adoptStyles(this._renderRoot, list);
+      if (list.length) {
+        // If the shadow root came from Declarative Shadow DOM (SSR), it
+        // contains an inline <style> tag. Remove it before switching to
+        // adoptedStyleSheets to avoid duplicate styles.
+        if (hadSSRShadow) {
+          const ssrStyle = this.shadowRoot.querySelector('style');
+          if (ssrStyle) ssrStyle.remove();
+        }
+        adoptStyles(this._renderRoot, list);
+      }
     } else {
       this._renderRoot = this;
       // Light DOM: static styles is not supported (no shadow root for

packages/core/src/render-server.js

@@ -254,7 +254,10 @@ async function injectDSD(html, ctx) {
       applyAttrsToInstance(instance, attrMap, Cls);
       let tpl = instance.render ? instance.render() : '';
       if (tpl && typeof tpl.then === 'function') tpl = await tpl;
-      const inner = await render(tpl, ctx);
+      // Render the template to HTML, then recursively inject DSD for
+      // any nested custom elements (e.g. <theme-toggle> inside <blog-shell>).
+      const rawInner = await render(tpl, ctx);
+      const inner = await injectDSD(rawInner, ctx);
 
       if (isShadow) {
         // Shadow DOM: wrap in Declarative Shadow DOM template