diff --git a/__tests__/html2/fluentTheme/customElement/shadowRoot.html b/__tests__/html2/fluentTheme/customElement/shadowRoot.html
new file mode 100644
index 0000000000..ee109e263f
--- /dev/null
+++ b/__tests__/html2/fluentTheme/customElement/shadowRoot.html
@@ -0,0 +1,95 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script type="importmap">
+      {
+        "imports": {
+          "react": "https://esm.sh/react@18.3.1",
+          "react-dom": "https://esm.sh/react-dom@18.3.1",
+          "react-dom/": "https://esm.sh/react-dom@18.3.1/"
+        }
+      }
+    </script>
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script type="module">
+      import React from 'react';
+      window.React = React;
+    </script>
+    <script defer crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+    <script defer crossorigin="anonymous" src="/__dist__/botframework-webchat-fluent-theme.production.min.js"></script>
+    <style>
+      webchat-element {
+        display: contents;
+      }
+    </style>
+  </head>
+  <body>
+    <webchat-element></webchat-element>
+
+    <script type="module">
+      import React from 'react';
+      import { createRoot } from 'react-dom/client';
+
+      run(async function () {
+        const {
+          WebChat: { FluentThemeProvider, ReactWebChat }
+        } = window; // Imports in UMD fashion.
+
+        class WebChatElement extends HTMLElement {
+          constructor() {
+            super();
+
+            this.attachShadow({ mode: 'open' });
+          }
+
+          connectedCallback() {
+            const container = document.createElement('main');
+
+            container.id = 'webchat';
+
+            this.shadowRoot.appendChild(container);
+            this.shadowRoot.appendChild(document.head.querySelector('link').cloneNode());
+
+            const directLine = testHelpers.createDirectLineWithTranscript(
+              testHelpers.transcriptNavigation.generateTranscript()
+            );
+
+            const store = testHelpers.createStore();
+
+            const App = () => React.createElement(
+              ReactWebChat,
+              {
+                directLine: directLine,
+                nonce: "test",
+                store: store,
+                styleOptions: { stylesRoot: this.shadowRoot }
+              }
+            );
+
+            const root = createRoot(container);
+
+            root.render(
+              React.createElement(FluentThemeProvider, null,
+                React.createElement(App)
+              )
+            );
+          }
+        }
+
+        customElements.define('webchat-element', WebChatElement);
+
+        pageElements.root(document.querySelector('webchat-element').shadowRoot);
+
+        await pageConditions.uiConnected();
+        await pageConditions.scrollToBottomCompleted();
+        await host.snapshot('local');
+
+        for (const style of document.querySelector('webchat-element').shadowRoot.querySelectorAll('style')) {
+          expect(style.nonce).toBe('test');
+        }
+      });
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/__tests__/html2/fluentTheme/customElement/slotted.html b/__tests__/html2/fluentTheme/customElement/slotted.html
new file mode 100644
index 0000000000..a56173c82a
--- /dev/null
+++ b/__tests__/html2/fluentTheme/customElement/slotted.html
@@ -0,0 +1,81 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script type="importmap">
+      {
+        "imports": {
+          "react": "https://esm.sh/react@18.3.1",
+          "react-dom": "https://esm.sh/react-dom@18.3.1",
+          "react-dom/": "https://esm.sh/react-dom@18.3.1/"
+        }
+      }
+    </script>
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script type="module">
+      import React from 'react';
+      window.React = React;
+    </script>
+    <script defer crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+    <script defer crossorigin="anonymous" src="/__dist__/botframework-webchat-fluent-theme.production.min.js"></script>
+    <style>
+      webchat-element {
+        display: contents;
+      }
+    </style>
+  </head>
+  <body>
+    <webchat-element>
+      <main id="webchat"></main>
+    </webchat-element>
+
+    <script type="module">
+      import React from 'react';
+      import { createRoot } from 'react-dom/client';
+
+      run(async function () {
+        const {
+          WebChat: { FluentThemeProvider, ReactWebChat }
+        } = window; // Imports in UMD fashion.
+
+        class WebChatElement extends HTMLElement {
+          constructor() {
+            super();
+
+            this.attachShadow({ mode: 'open' });
+          }
+
+          connectedCallback() {
+            const slot = document.createElement('slot');
+
+            this.shadowRoot.appendChild(slot);
+
+            const directLine = testHelpers.createDirectLineWithTranscript(
+              testHelpers.transcriptNavigation.generateTranscript()
+            );
+            const store = testHelpers.createStore();
+
+            const App = () => React.createElement(ReactWebChat, { directLine: directLine, store: store });
+
+            const root = createRoot(this.querySelector('#webchat'));
+
+            root.render(
+              React.createElement(FluentThemeProvider, null,
+                React.createElement(App)
+              )
+            );
+          }
+        }
+
+        customElements.define('webchat-element', WebChatElement);
+
+        pageElements.root(document.querySelector('webchat-element'));
+
+        await pageConditions.uiConnected();
+        await pageConditions.scrollToBottomCompleted();
+        await host.snapshot('local');
+      });
+    </script>
+  </body>
+</html>
\ No newline at end of file
