Update renderToCanvas functions to use precise type

code/frameworks/ember/src/client/preview/render.ts

@@ -20,7 +20,7 @@ let lastPromise = app.boot();
 let hasRendered = false;
 let isRendering = false;
 
-function render(options: OptionsArgs, el: Element) {
+function render(options: OptionsArgs, el: EmberFramework['canvasElement']) {
   if (isRendering) return;
   isRendering = true;
 
@@ -62,7 +62,7 @@ function render(options: OptionsArgs, el: Element) {
 
 export function renderToCanvas(
   { storyFn, kind, name, showMain, showError }: Store_RenderContext<EmberFramework>,
-  domElement: Element
+  domElement: EmberFramework['canvasElement']
 ) {
   const element = storyFn();
 

code/lib/types/src/modules/store.ts

@@ -28,7 +28,7 @@ import type {
 } from './csf';
 
 export interface WebFramework extends Framework {
-  rootElement: HTMLElement;
+  canvasElement: HTMLElement;
 }
 
 export type Store_ModuleExport = any;

code/renderers/html/src/render.ts

@@ -1,5 +1,4 @@
 /* eslint-disable no-param-reassign */
-// @ts-expect-error (Converted from ts-ignore)
 import global from 'global';
 
 import { dedent } from 'ts-dedent';
@@ -43,7 +42,7 @@ export const render: ArgsStoryFn<HtmlFramework> = (args, context) => {
 
 export function renderToCanvas(
   { storyFn, kind, name, showMain, showError, forceRemount }: Store_RenderContext<HtmlFramework>,
-  domElement: Element
+  domElement: HtmlFramework['canvasElement']
 ) {
   const element = storyFn();
   showMain();

code/renderers/preact/src/render.tsx

@@ -37,7 +37,7 @@ const StoryHarness: preact.FunctionalComponent<{
   title: string;
   showError: Store_RenderContext<PreactFramework>['showError'];
   storyFn: () => any;
-  domElement: Element;
+  domElement: PreactFramework['canvasElement'];
 }> = ({ showError, name, title, storyFn, domElement }) => {
   const content = preact.h(storyFn as any, null);
   if (!content) {
@@ -55,7 +55,7 @@ const StoryHarness: preact.FunctionalComponent<{
 
 export function renderToCanvas(
   { storyFn, title, name, showMain, showError, forceRemount }: Store_RenderContext<PreactFramework>,
-  domElement: Element
+  domElement: PreactFramework['canvasElement']
 ) {
   if (forceRemount) {
     preactRender(null, domElement);

code/renderers/react/src/render.tsx

@@ -136,7 +136,7 @@ export async function renderToCanvas(
     showException,
     forceRemount,
   }: Store_RenderContext<ReactFramework>,
-  domElement: Element
+  domElement: ReactFramework['canvasElement']
 ) {
   const Story = unboundStoryFn as FC<StoryContext<ReactFramework>>;
 

code/renderers/server/src/render.ts

@@ -56,7 +56,7 @@ export async function renderToCanvas(
     storyContext,
     storyContext: { parameters, args, argTypes },
   }: Store_RenderContext<ServerFramework>,
-  domElement: Element
+  domElement: ServerFramework['canvasElement']
 ) {
   // Some addons wrap the storyFn so we need to call it even though Server doesn't need the answer
   storyFn();

code/renderers/svelte/src/render.ts

@@ -5,9 +5,9 @@ import PreviewRender from '@storybook/svelte/templates/PreviewRender.svelte';
 
 import type { SvelteFramework } from './types';
 
-const componentsByDomElement = new Map<Element, SvelteComponentTyped>();
+const componentsByDomElement = new Map<SvelteFramework['canvasElement'], SvelteComponentTyped>();
 
-function teardown(domElement: Element) {
+function teardown(domElement: SvelteFramework['canvasElement']) {
   if (!componentsByDomElement.has(domElement)) {
     return;
   }
@@ -29,7 +29,7 @@ export function renderToCanvas(
     storyContext,
     forceRemount,
   }: Store_RenderContext<SvelteFramework>,
-  domElement: Element
+  domElement: SvelteFramework['canvasElement']
 ) {
   const existingComponent = componentsByDomElement.get(domElement);
 

code/renderers/vue/src/render.ts

@@ -8,7 +8,7 @@ import type { VueFramework } from './types';
 export const COMPONENT = 'STORYBOOK_COMPONENT';
 export const VALUES = 'STORYBOOK_VALUES';
 
-const map = new Map<Element, Instance>();
+const map = new Map<VueFramework['canvasElement'], Instance>();
 type Instance = CombinedVueInstance<
   Vue,
   {
@@ -20,7 +20,7 @@ type Instance = CombinedVueInstance<
   Record<never, any>
 >;
 
-const getRoot = (domElement: Element): Instance => {
+const getRoot = (domElement: VueFramework['canvasElement']): Instance => {
   const cachedInstance = map.get(domElement);
   if (cachedInstance != null) return cachedInstance;
 
@@ -92,13 +92,13 @@ export function renderToCanvas(
     showException,
     forceRemount,
   }: Store_RenderContext<VueFramework>,
-  domElement: Element
+  domElement: VueFramework['canvasElement']
 ) {
   const root = getRoot(domElement);
   Vue.config.errorHandler = showException;
   const element = storyFn();
 
-  let mountTarget: Element | null;
+  let mountTarget: VueFramework['canvasElement'] | null;
 
   // Vue2 mount always replaces the mount target with Vue-generated DOM.
   // https://v2.vuejs.org/v2/api/#el:~:text=replaced%20with%20Vue%2Dgenerated%20DOM

code/renderers/vue3/src/render.ts

@@ -20,11 +20,11 @@ export const setup = (fn: (app: any) => void) => {
   setupFunction = fn;
 };
 
-const map = new Map<Element, ReturnType<typeof createApp>>();
+const map = new Map<VueFramework['canvasElement'], ReturnType<typeof createApp>>();
 
 export function renderToCanvas(
   { title, name, storyFn, showMain, showError, showException }: Store_RenderContext<VueFramework>,
-  domElement: Element
+  domElement: VueFramework['canvasElement']
 ) {
   // TODO: explain cyclical nature of these app => story => mount
   let element: StoryFnVueReturnType;

code/renderers/web-components/src/render.ts

@@ -38,7 +38,7 @@ export function renderToCanvas(
     showError,
     forceRemount,
   }: Store_RenderContext<WebComponentsFramework>,
-  domElement: Element
+  domElement: WebComponentsFramework['canvasElement']
 ) {
   const element = storyFn();