Web-components: Attempt default render function

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

@@ -2,4 +2,4 @@ import { parameters as docsParams } from './docs/config';
 
 export const parameters = { framework: 'web-components' as const, ...docsParams };
 export { decorators, argTypesEnhancers } from './docs/config';
-export { renderToDOM } from './render';
+export { render, renderToDOM } from './render';

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

@@ -3,16 +3,33 @@
 import global from 'global';
 
 import { dedent } from 'ts-dedent';
-import { render } from 'lit-html';
+import { render as litRender, html } from 'lit-html';
 // Keep `.js` extension to avoid issue with Webpack (related to export map?)
 // eslint-disable-next-line import/extensions
 import { isTemplateResult } from 'lit-html/directive-helpers.js';
 import { simulatePageLoad, simulateDOMContentLoaded } from '@storybook/preview-web';
 import type { RenderContext } from '@storybook/store';
+import { ArgsStoryFn } from '@storybook/csf';
 import { WebComponentsFramework } from './types';
 
 const { Node } = global;
 
+export const render: ArgsStoryFn<WebComponentsFramework> = (args, context) => {
+  const { id, component } = context;
+  if (!component) {
+    throw new Error(
+      `Unable to render story ${id} as the component annotation is missing from the default export`
+    );
+  }
+
+  // FIXME: replace by one of
+  // - https://github.com/lit/lit/pull/1960
+  // - https://github.com/open-wc/open-wc/pull/2398
+  const argProps = Object.entries(args).map(([key, val]) => `.${key}=${val}`);
+
+  return html`<${component} ${argProps.join(' ')}></${component}>`;
+};
+
 export function renderToDOM(
   { storyFn, kind, name, showMain, showError, forceRemount }: RenderContext<WebComponentsFramework>,
   domElement: Element
@@ -29,7 +46,7 @@ export function renderToDOM(
     }
     const renderTo = domElement.querySelector<HTMLElement>('[id="root-inner"]');
 
-    render(element, renderTo);
+    litRender(element, renderTo);
     simulatePageLoad(domElement);
   } else if (typeof element === 'string') {
     domElement.innerHTML = element;

code/renderers/web-components/template/stories/README.md

@@ -0,0 +1 @@
+Placeholder until we write some render-specific stories