Repository: storybook
Issue: @storybook/web-components 6.3.1 WSOD with no console Errors
Labels: bug,has workaround,web-components

**Describe the bug**
I know other issues are active, and so far I have not found working solutions for my case. I am also experiencing a blank white screen, with no terminal or browser console errors at all. 

Project is built on Lit Element / Lit HTML

**To Reproduce**
https://github.com/momentum-design/momentum-ui/tree/kehyde/storybook-upgrade/web-components

run `yarn install`
run `yarn storybook`

**System**
Please paste the results of `npx sb@next info` here.
```
System:
    OS: macOS 11.3.1
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
  Binaries:
    Node: 12.22.1 - ~/.nvm/versions/node/v12.22.1/bin/node
    Yarn: 1.21.1 - ~/.yarn/bin/yarn
    npm: 6.14.12 - ~/.nvm/versions/node/v12.22.1/bin/npm
  Browsers:
    Chrome: 91.0.4472.114
    Edge: 91.0.864.59
    Firefox: 82.0.3
    Safari: 14.1
  npmPackages:
    @storybook/addon-a11y: ^6.3.0 => 6.3.1 
    @storybook/addon-docs: ^6.3.0 => 6.3.1 
    @storybook/addon-essentials: ^6.3.0 => 6.3.1 
    @storybook/addon-knobs: ^6.3.0 => 6.3.0 
    @storybook/api: ^6.3.1 => 6.3.1 
    @storybook/storybook-deployer: ^2.8.10 => 2.8.10 
    @storybook/theming: ^6.3.1 => 6.3.1 
    @storybook/web-components: 6.3.1 => 6.3.1 
```

**Additional context**
##### main.ts:
```javascript
import * as webpack from "webpack";
import { commonDev } from '../webpack.config';

/**
 * merge two arrays into one and remove the duplicates
 *
 * @param merger
 * @param mergee
 * @returns {Array<any>} merged unique array
 */
const mergeUnique = (merger: Array<any>, mergee?: Array<any>) =>
  mergee ?
    merger.concat(mergee.filter((item: any) => merger.indexOf(item) === -1)) :
    merger;

module.exports = {
  stories: [
    "../src/components/**/*.stories.ts",
    "../src/components/**/*.stories.mdx",
    "../src/internal-components/color-table/ColorTable.stories.ts",
    "../src/internal-components/color-table/*.stories.mdx"
  ],

  addons: [
    "@storybook/addon-knobs/register",
    "@storybook/addon-a11y/register",
    "@storybook/addon-docs",
    "@storybook/addon-controls",
    "@storybook/addon-actions/register",
    "@storybook/addon-viewport"
  ],

  webpackFinal: async (storybookConfig: webpack.Configuration, { configType }: { configType : "DEVELOPMENT" | "PRODUCTION" }) => {

    console.log("Storybook build mode: ", configType);

    // RESOLVE
    {
      storybookConfig.resolve = storybookConfig.resolve || {};

      // EXTENSIONS
      {
        storybookConfig.resolve.extensions = mergeUnique(storybookConfig.resolve?.extensions || [], commonDev.resolve?.extensions || []);
      }

      // ALIAS
      {
        storybookConfig.resolve.alias = commonDev.resolve?.alias;
      }
    }

    // MODULE
    {
      storybookConfig.module = storybookConfig.module || { rules: [] };

      // RULES
      {
        storybookConfig.module.rules = mergeUnique(storybookConfig.module.rules, commonDev.module?.rules || []);
      }
    }

    // PLUGINS
    {

      // Storybook production has it's own tuned HtmlWebpackPlugin
      const omitPluginNames = (configType === "DEVELOPMENT") ? [] : ["HtmlWebpackPlugin"];

      const plugins = (commonDev.plugins || []).filter(p => omitPluginNames.indexOf(p.constructor.name) === -1);

      storybookConfig.plugins = mergeUnique(storybookConfig.plugins || [], plugins);
    }

    return storybookConfig;
  }
}
```


##### manager.ts:
```javascript
import { addons } from '@storybook/addons';

addons.setConfig({
  isFullscreen: false,
  showNav: true,
  showPanel: true,
  panelPosition: 'bottom',
  sidebarAnimations: true,
  enableShortcuts: true,
  isToolshown: true,
  selectedPanel: undefined,
  initialActive: 'sidebar',
  sidebar: {
    showRoots: false,
  }
});
```


##### preview.ts:
```javascript
import { addParameters, setCustomElements } from "@storybook/web-components";
import customElements from './custom-elements.json';

/**
 * Custom element file generated automatically by execute this command
 * npx web-component-analyzer src\components\**\*.ts --outFile .storybook\custom-elements.json
*/

// addDecorator(withA11y);

setCustomElements(customElements);

addParameters({
  docs: {
    inlineStories: false,
  },
  controls: { expanded: true },
  a11y: {
    config: {},
    options: {
      checks: { 'color-contrast': { options: { noScroll: true } } },
      restoreScroll: true,
    },
  },
  options: {
    storySort: {
      order: ['Components', 'Internal References'],
      method: 'alphabetical'
    }
  }
});
```