Storybook: CSF Story with arbitrary MDX docs – embedded story renders HTML as string

[hv-pul]

Describe the bug
My setup is the one described here:
https://github.com/storybookjs/storybook/blob/6.0-docs/addons/docs/docs/recipes.md#csf-stories-with-arbitrary-mdx

I'm using the current version of Storybook 6, with the web components preset.

I'm trying to embed a story into the non-story MDX, like this:
<Story id="my-component--my-story" />

If I'm not mistaken, that should embed the story that I have defined in my CSF story and render it the same as on the canvas tab.
Instead, it renders the HTML as if it was richtext content:

<div id="my-component--my-story">
    <div>
        <!---->
        &lt;h2&gt;Regular&lt;/h2&gt;
        &lt;my-component&gt;Button&lt;/my-component&gt;
    <!---->
    </div>
</div>

To Reproduce
Steps to reproduce the behavior:
see above. I can not currently provide an example repo I'm afraid …

Expected behavior
The story should render HTML element as elements, not as text nodes.

Screenshots

Code snippets
MyComponent.stories.js

import docs from '~path/to/my-component.mdx';

export default {
    title: 'My-Component',
    parameters: {
        docs: {
            page: docs
        }
    }
};

export const myStory = () => {
    return `
        <h2>Regular</h2>
        <my-component>Button</my-component>
    `;
};

my-component.mdx

import { Story, Preview } from '@storybook/addon-docs/blocks';

# My Component
some markdown …

<Story id="my-component--my-story" />

some more markdown …

System:

Environment Info:

  System:
    OS: macOS High Sierra 10.13.6
    CPU: (4) x64 Intel(R) Core(TM) i7-7567U CPU @ 3.50GHz
  Binaries:
    Node: 12.16.3 - ~/.nvm/versions/node/v12.16.3/bin/node
    Yarn: 1.19.1 - ~/.yarn/bin/yarn
    npm: 6.14.5 - ~/.nvm/versions/node/v12.16.3/bin/npm
  Browsers:
    Chrome: 84.0.4147.105
    Firefox: 77.0.1
    Safari: 13.1.2
  npmPackages:
    @storybook/addon-backgrounds: ^6.0.0-rc.18 => 6.0.0-rc.18 
    @storybook/addon-docs: ^6.0.0-rc.18 => 6.0.0-rc.18 
    @storybook/addon-knobs: ^6.0.0-rc.18 => 6.0.0-rc.18 
    @storybook/addon-storysource: ^6.0.0-rc.18 => 6.0.0-rc.18 
    @storybook/web-components: ^6.0.0-rc.18 => 6.0.0-rc.18 

Additional context
As you can see, the story itself is loaded correctly, just not rendered correctly.
Also, if I do not use the Story component, but embed my web component directly in the .mdx file via <my-component>Button</my-component>, it renders correctly. So it's not an issue with the component itself.
Of course I could embed my examples like this, but for the sake of convenience I would like to re-use the existing stories instead.

[marie-maxime]

When using Storybook web components, you have to render the code inside your story with lit-html

Something like this:

```javascript
import docs from '~path/to/my-component.mdx';
import { html } from "lit-html";

export default {
title: 'My-Component',
parameters: {
docs: {
page: docs
}
}
};

export const myStory = () => {
return html <h2>Regular</h2> <my-component>Button</my-component> ;
};

[hv-pul]

Thanks @marie-maxime, that does work indeed!

However I still think it is inconsistent, as it works differently on an MDX docs page (where you need to use lit-html) and a CSF story (where you don't)?

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!