microsoft · EisenbergEffect · Aug 18, 2022 · Aug 17, 2022 · Aug 17, 2022 · Aug 17, 2022
diff --git a/change/@microsoft-fast-ssr-93d4338f-50c8-4672-bd23-9ad9939af65a.json b/change/@microsoft-fast-ssr-93d4338f-50c8-4672-bd23-9ad9939af65a.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat: implement Declarative Shadow DOM polyfill as an optional plugin for FAST Server Side Rendering",
+  "packageName": "@microsoft/fast-ssr",
+  "email": "roeisenb@microsoft.com",
+  "dependentChangeType": "prerelease"
+}
diff --git a/examples/ssr/server.js b/examples/ssr/server.js
@@ -2,7 +2,7 @@
 import "@microsoft/fast-ssr/install-dom-shim";
 import fs from "fs";
 import { html } from "@microsoft/fast-element";
-import fastSSR, { RequestStorageManager } from "@microsoft/fast-ssr";
+import fastSSR, { RequestStorageManager, DeclarativeShadowDOMPolyfill } from "@microsoft/fast-ssr";
 import express from "express";
 import { DefaultTodoList, app as todoApp, TodoList } from "fast-todo-app";
 
@@ -22,8 +22,10 @@ const template = html`
             <meta charset="UTF-8" />
             <meta name="viewport" content="width=device-width, initial-scale=1.0" />
             <title>SSR Example</title>
+            <style>${DeclarativeShadowDOMPolyfill.undefinedElementStyles}</style>
         <body>
             <todo-app></todo-app>
+            <script>${DeclarativeShadowDOMPolyfill.nonStreamingTemplateUpgrade}</script>
             <!--
                 Use caution in production environments embedding JSON.
                 In general the JSON should be sanitized to prevent

diff --git a/packages/web-components/fast-ssr/docs/api-report.md b/packages/web-components/fast-ssr/docs/api-report.md
@@ -19,6 +19,12 @@ export type ComponentDOMEmissionMode = "shadow";
 // @beta (undocumented)
 export type ConstructableElementRenderer = (new (tagName: string, renderInfo: RenderInfo) => ElementRenderer) & typeof ElementRenderer;
 
+// @public
+export const DeclarativeShadowDOMPolyfill: Readonly<{
+    undefinedElementStyles: string;
+    nonStreamingTemplateUpgrade: string;
+}>;
+
 // @beta (undocumented)
 export abstract class ElementRenderer {
     constructor(tagName: string, renderInfo: RenderInfo);

diff --git a/packages/web-components/fast-ssr/src/declarative-shadow-dom-polyfill.ts b/packages/web-components/fast-ssr/src/declarative-shadow-dom-polyfill.ts
@@ -0,0 +1,36 @@
+// Reference: https://web.dev/declarative-shadow-dom/
+
+/**
+ * Provides style and JavaScript code snippets for polyfills related
+ * to Declarative Shadow DOM (DSD).
+ */
+export const DeclarativeShadowDOMPolyfill = Object.freeze({
+    /**
+     * Styles that hide undefined elements, taking account of the
+     * fact that undefined elements with DSD should not be hidden.
+     * @remarks
+     * These styles should be used in a style element tag in the head
+     * of the HTML document.
+     */
+    undefinedElementStyles: `:not(:defined) > template[shadowroot] ~ *  {
+    display: none;
+}` as string,
+    /**
+     * A JavaScript polyfill for DSD that recursively converts all templates
+     * in the document with the shadowroot attribute into actual shadow roots.
+     * @remarks
+     * This is a one-time operation that should be placed at the end of the SSR'd
+     * HTML but before any other scripts run.
+     */
+    nonStreamingTemplateUpgrade: `if (!HTMLTemplateElement.prototype.hasOwnProperty('shadowRoot')) {
+    (function attachShadowRoots(root) {
+        root.querySelectorAll("template[shadowroot]").forEach(template => {
+            const mode = template.getAttribute("shadowroot");
+            const shadowRoot = template.parentNode.attachShadow({ mode });
+            shadowRoot.appendChild(template.content);
+            template.remove();
+            attachShadowRoots(shadowRoot);
+        });
+    })(document);
+}` as string,
+});
diff --git a/packages/web-components/fast-ssr/src/exports.ts b/packages/web-components/fast-ssr/src/exports.ts
@@ -81,6 +81,7 @@ export default function fastSSR(): {
 }
 
 export * from "./request-storage.js";
+export * from "./declarative-shadow-dom-polyfill.js";
 export type {
     ComponentDOMEmissionMode,
     ElementRenderer,