Partials: DSR Ponyfill

Prerequisites

• - SSR route using declarative shadow-root HTML output.
• - Feature detection strategy for non-supporting browsers.
• - A vetted ponyfill asset served from a trusted source.

Step 1: Detect native support

Gate ponyfill loading to browsers that need it so modern browsers are not penalized.

function needsDeclarativeShadowDomPonyfill(): boolean {
  return !('shadowRootMode' in HTMLTemplateElement.prototype);
}

Step 2: Load ponyfill conditionally

Inject the script only when support is missing.

if (needsDeclarativeShadowDomPonyfill()) {
  const script = document.createElement('script');
  script.src = '/vendor/template-shadowroot.min.js';
  script.defer = true;
  document.head.appendChild(script);
}

Step 3: Verify SSR output and hydration

Test routes that depend on declarative shadow-root output in browsers with and without native support.

// smoke assertion idea
const hasShadow = document.querySelector('diwa-modal')?.shadowRoot;
console.log('shadow root available:', Boolean(hasShadow));

Implementation Notes

• - Most client-hydrated Diwa apps do not require a DSR ponyfill.
• - Do not load this ponyfill globally unless SSR output needs it.
• - Version and host ponyfill assets with the same rigor as application dependencies.

Troubleshooting

• - If SSR markup looks duplicated, verify ponyfill timing and hydration order.
• - If script loading fails, serve ponyfill from an allowed CSP origin.
• - If no browser in support matrix needs the ponyfill, remove it to reduce complexity.

Next Actions