wrapper element shows in the story HTML

[gullerya]

Hello, and first of all - kudos for a very helpful addon.

I'm having the issue, that the Storybook's own wrapping div is appearing in the compiled HTML. Probably you've already encountered this issue, so asking here just before diving into debugging.

The generated HTML looks like this:

<div id="root-inner">
  <!---->
  <vwc-note
    connotation="success"
    icon="check-circle"
    header="Pascal's theological argument"
  >
    Pascal argues that a rational person should live as though God exists and
    seek to believe in God. If God does not actually exist, such a person will
    have only a finite loss (some pleasures, luxury, etc.), whereas if God does
    exist, he stands to receive infinite gains (as represented by eternity in
    Heaven) and avoid infinite losses (eternity in Hell).
  </vwc-note>
  <!---->
</div>

That root-inner thingie shouldn't be there, right? The only probably special thing that we are doing in our case is to use LitElement's html template literal function to provide our story.

[dutscher]

which storybook version do you use? here i have the same issue https://github.com/whitespace-se/storybook-addon-html/issues/35

cheers and +1

[gullerya]

Mine is 6.1.1.

[jeanfredrik]

Thanks for reporting this. It’s now fixed in version 4.1.0

[gullerya]

I've just run our Storybook (6.1.1) with the new plugin versions (tried 4.1.0 and 4.2.0) - the issue is still present.

[jeanfredrik]

You need to set the root parameter to "#root-inner" for it to have any effect. You can also remove the empty comments with the removeEmptyComments parameter. Example:

export const parameters = {
  html: {
    root: '#root-inner', // default: #root
    removeEmptyComments: true, // default: false
  },
};

This is documented in the Readme. Sorry I didn’t tell you when I closed the issue. Let me know if it still doesn’t work for you.

[gullerya]

Perfect, sorry I've not looked myself! Thank you very much!!!