diff --git a/addons/docs/src/frameworks/web-components/config.js b/addons/docs/src/frameworks/web-components/config.js
deleted file mode 100644
index e40070ade605..000000000000
--- a/addons/docs/src/frameworks/web-components/config.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react';
-import { render } from 'lit-html';
-import { extractArgTypes, extractComponentDescription } from './custom-elements';
-import { sourceDecorator } from './sourceDecorator';
-
-export const decorators = [sourceDecorator];
-
-export const parameters = {
-  docs: {
-    extractArgTypes,
-    extractComponentDescription,
-    inlineStories: true,
-    prepareForInline: (storyFn) => {
-      class Story extends React.Component {
-        constructor(props) {
-          super(props);
-          this.wrapperRef = React.createRef();
-        }
-
-        componentDidMount() {
-          render(storyFn(), this.wrapperRef.current);
-        }
-
-        render() {
-          return React.createElement('div', { ref: this.wrapperRef });
-        }
-      }
-      return React.createElement(Story);
-    },
-  },
-};
diff --git a/addons/docs/src/frameworks/web-components/config.ts b/addons/docs/src/frameworks/web-components/config.ts
new file mode 100644
index 000000000000..30273896e170
--- /dev/null
+++ b/addons/docs/src/frameworks/web-components/config.ts
@@ -0,0 +1,19 @@
+import { extractArgTypes, extractComponentDescription } from './custom-elements';
+import { sourceDecorator } from './sourceDecorator';
+import { prepareForInline } from './prepareForInline';
+import { SourceType } from '../../shared';
+
+export const decorators = [sourceDecorator];
+
+export const parameters = {
+  docs: {
+    extractArgTypes,
+    extractComponentDescription,
+    inlineStories: true,
+    prepareForInline,
+    source: {
+      type: SourceType.DYNAMIC,
+      language: 'html',
+    },
+  },
+};
diff --git a/addons/docs/src/frameworks/web-components/prepareForInline.ts b/addons/docs/src/frameworks/web-components/prepareForInline.ts
new file mode 100644
index 000000000000..183819c5bd48
--- /dev/null
+++ b/addons/docs/src/frameworks/web-components/prepareForInline.ts
@@ -0,0 +1,18 @@
+import type { StoryFn } from '@storybook/addons';
+import React from 'react';
+import { render } from 'lit-html';
+
+export const prepareForInline = (storyFn: StoryFn) => {
+  class Story extends React.Component {
+    wrapperRef = React.createRef<HTMLElement>();
+
+    componentDidMount(): void {
+      render(storyFn(), this.wrapperRef.current);
+    }
+
+    render(): React.ReactElement {
+      return React.createElement('div', { ref: this.wrapperRef });
+    }
+  }
+  return React.createElement(Story);
+};