diff --git a/examples/lit-ts/.storybook/main.ts b/examples/lit-ts/.storybook/main.ts
index 4b13e910..b5d72c17 100644
--- a/examples/lit-ts/.storybook/main.ts
+++ b/examples/lit-ts/.storybook/main.ts
@@ -8,7 +8,10 @@ module.exports = {
     builder: '@storybook/builder-vite',
   },
   framework: '@storybook/web-components',
-  features: { buildStoriesJson: true },
+  features: {
+    buildStoriesJson: true,
+    storyStoreV7: true,
+  },
   async viteFinal(config, { configType }) {
     return mergeConfig(config, {
       // prettier-ignore
diff --git a/packages/builder-vite/codegen-modern-iframe-script.ts b/packages/builder-vite/codegen-modern-iframe-script.ts
index 31b43b05..83725493 100644
--- a/packages/builder-vite/codegen-modern-iframe-script.ts
+++ b/packages/builder-vite/codegen-modern-iframe-script.ts
@@ -4,7 +4,7 @@ import { transformAbsPath } from './utils/transform-abs-path';
 import type { ExtendedOptions } from './types';
 
 export async function generateModernIframeScriptCode(options: ExtendedOptions) {
-  const { presets, configDir } = options;
+  const { presets, configDir, framework } = options;
 
   const previewOrConfigFile = loadPreviewOrConfigFile({ configDir });
   const presetEntries = await presets.apply('config', [], options);
@@ -12,14 +12,37 @@ export async function generateModernIframeScriptCode(options: ExtendedOptions) {
     .filter(Boolean)
     .map((configEntry) => transformAbsPath(configEntry));
 
-  // noinspection UnnecessaryLocalVariableJS
+  const generateHMRHandler = (framework: string): string => {
+    // Web components are not compatible with HMR, so disable HMR, reload page instead.
+    if (framework === 'web-components') {
+      return `
+      if (import.meta.hot) {
+        import.meta.hot.decline();
+      }`.trim();
+    }
+
+    return `
+    if (import.meta.hot) {
+      import.meta.hot.accept('${virtualStoriesFile}', (newModule) => {
+      // importFn has changed so we need to patch the new one in
+      preview.onStoriesChanged({ importFn: newModule.importFn });
+      });
+
+    import.meta.hot.accept(${JSON.stringify(configEntries)}, ([...newConfigEntries]) => {
+      const newGetProjectAnnotations =  () => composeConfigs(newConfigEntries);
+
+      // getProjectAnnotations has changed so we need to patch the new one in
+      preview.onGetProjectAnnotationsChanged({ getProjectAnnotations: newGetProjectAnnotations });
+    });
+  }`.trim();
+  };
+
   /**
    * This code is largely taken from https://github.com/storybookjs/storybook/blob/d1195cbd0c61687f1720fefdb772e2f490a46584/lib/builder-webpack4/src/preview/virtualModuleModernEntry.js.handlebars
    * Some small tweaks were made to `getProjectAnnotations` (since `import()` needs to be resolved asynchronously)
    * and the HMR implementation has been tweaked to work with Vite.
    * @todo Inline variable and remove `noinspection`
    */
-  // language=JavaScript
   const code = `
     import { composeConfigs, PreviewWeb } from '@storybook/preview-web';
     import { ClientApi } from '@storybook/client-api';
@@ -38,21 +61,8 @@ export async function generateModernIframeScriptCode(options: ExtendedOptions) {
     window.__STORYBOOK_CLIENT_API__ = new ClientApi({ storyStore: preview.storyStore });
 
     preview.initialize({ importFn, getProjectAnnotations });
-
-    if (import.meta.hot) {
-        import.meta.hot.accept('${virtualStoriesFile}', (newModule) => {
-
-        // importFn has changed so we need to patch the new one in
-        preview.onStoriesChanged({ importFn: newModule.importFn });
-        });
-
-      import.meta.hot.accept(${JSON.stringify(configEntries)}, ([...newConfigEntries]) => {
-        const newGetProjectAnnotations =  () => composeConfigs(newConfigEntries);
-
-        // getProjectAnnotations has changed so we need to patch the new one in
-        preview.onGetProjectAnnotationsChanged({ getProjectAnnotations: newGetProjectAnnotations });
-      });
-    }
+    
+    ${generateHMRHandler(framework)};
     `.trim();
   return code;
 }