Web-components: Fix source decorator to handle document fragments

[bashmish]

What I did

I'm migrating our company's setup from Storybook 6 to Storybook 7 and ran into the issue with one of our decorators. Let me explain what it does first.

We have a custom decorator to allow rendering stories explicitly with Lit 1 and Lit 2 to help in migration for Lit 1 -> 2.

export const withLitCompat = render =>
  makeDecorator({
    name: 'withLitCompat',
    parameterName: 'litCompat',
    wrapper: (getStory, context) => {
      const fragment = document.createDocumentFragment();
      render(getStory(context), fragment);
      return fragment;
    },
  });

Then you can configure what lit version you want your stories to be rendered with, e.g.:

// preview.js
import { render } from 'my-design-system/lit-1.js';
import { withLitCompat } from 'path/to/with-lit-compat.js';

export const decorators = [
  withLitCompat(render),
];

Storybook 7 changed the order of decorators, so the sourceDecorator is executed after our custom decorators, which results in the following bug:

• document fragment with child nodes containing the story is passed from withLitCompat to sourceDecorator
• document fragment gets rendered in sourceDecorator by Lit which moves its child nodes to the new div, leaving it empty
• document fragment (now empty) is passed further to the renderToCanvas which renders empty document fragment

This fix makes sure to clone the document fragment to prevent moving of the child nodes which fixes this bug.

How to test

Unit test is provided to verify correct document fragment handling.

Checklist

• Make sure your changes are tested (stories and/or unit, integration, or end-to-end tests)
• Make sure to add/update documentation regarding your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Maintainers

• If this PR should be tested against many or all sandboxes,
  make sure to add the ci:merged or ci:daily GH label to it.
• Make sure this PR contains one of the labels below.

["cleanup", "BREAKING CHANGE", "feature request", "bug", "documentation", "maintenance", "dependencies", "other"]

[bashmish]

I made a PR into main, although the default was into next. I tried to find some guidance on that, but could't, so made a decision myself in favor of main, as next seemed a bit further away from now. But I'm fine to change this and make a PR into next if necessary.

[shilman]

Thanks so much for this @bashmish ! Please target next and we'll patch bugfixes back to main.

[bashmish]

@shilman sure, done :)