Repository: storybook
Issue: Custom element sub components are not imported into Story
Labels: bug,web-components,canvas

**Describe the bug**

When mocking an autonomous custom element in Storybook 6.4 that has many children, the children custom element classes are not also loaded despite being imported into the same Story file. This worked at some point in Storybook 6.4-alpha. When upgrading from 6.4.0-alpha.18 to 6.4.x any custom elements in Storybook with children fail to load the content of the story in the iframe. A workaround is to export the classes for each sub component in the story file, but that leads to an undesirable effect of listing all the sub components in the sidebar.


**To Reproduce**

A reproduction of this issue is found at https://github.com/steveblue/web-component-storybook-issues on the main branch. 

```typescript
const Template: Story<Partial<any>> = (args) => html`
  <div>This should display a table.</div>
  <a-tablecard></a-tablecard>
`;
```

TableCard has a direct child in ShadowDOM: Table

```typescript
export class TableCard extends HTMLElement {
  constructor() {
    super();
    const shadowRoot: ShadowRoot = this.attachShadow({ mode: "open" });
    const template = document.createElement("template");
    template.innerHTML = `<table is="a-table">
    <thead></thead>
    <tbody>
        <tr is="a-tr"><td is="a-td"></td> <td is="a-td"></td> <td is="a-td"></td> <td is="a-td"></td></tr>
        <tr is="a-tr"><td is="a-td"></td> <td is="a-td"></td> <td is="a-td"></td> <td is="a-td"></td></tr>
        <tr is="a-tr"><td is="a-td"></td> <td is="a-td"></td> <td is="a-td"></td> <td is="a-td"></td></tr>
        <tr is="a-tr"><td is="a-td"></td> <td is="a-td"></td> <td is="a-td"></td> <td is="a-td"></td></tr>
        <tr is="a-tr"><td is="a-td"></td> <td is="a-td"></td> <td is="a-td"></td> <td is="a-td"></td></tr>
    </tbody>
    </table>`;
    shadowRoot.appendChild(template.content.cloneNode(true));
  }
}

customElements.define("a-tablecard", TableCard);
```

Table has many children, Tr and Td. 

Neither Table, Tr, or Td display in Storybook iframe.

<img width="723" alt="Screen Shot 2021-12-29 at 9 31 22 AM" src="https://user-images.githubusercontent.com/1171943/147691386-7ad9ef15-6f85-4a8c-b9d1-a60219bd943f.png">


The workaround/nested branch displays the solution for an undesirable workaround.

By exporting the sub components in the Story file, they appear in the iframe.

```typescript

const Template: Story<Partial<any>> = (args) => html`
  <a-tablecard></a-tablecard>
`;

export const Primary = Template.bind({});
Primary.args = {};

export { TableCard, Table, Tr, Td };

```

although this also adds each sub component to the side bar, when none of them are exported in CSF, so each view produces a 404.


<img width="532" alt="Screen Shot 2021-12-29 at 9 30 38 AM" src="https://user-images.githubusercontent.com/1171943/147691535-9c9fa8ae-8067-4a8a-87de-382211bfbaf5.png">


**System**

  System:
    OS: macOS 12.0.1
    CPU: (10) arm64 Apple M1 Max
  Binaries:
    Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
    Yarn: 3.1.1 - ~/.nvm/versions/node/v16.13.0/bin/yarn
    npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm
  Browsers:
    Chrome: 96.0.4664.110
    Safari: 15.1
  npmPackages:
    @storybook/addon-actions: ^6.5.0-alpha.5 => 6.5.0-alpha.5
    @storybook/addon-docs: ^6.5.0-alpha.5 => 6.5.0-alpha.5
    @storybook/addon-essentials: ^6.5.0-alpha.5 => 6.5.0-alpha.5
    @storybook/addon-links: ^6.5.0-alpha.5 => 6.5.0-alpha.5
    @storybook/web-components: ^6.5.0-alpha.5 => 6.5.0-alpha.5


**Additional context**

This issue blocks development of nested Web Components in Storybook.