@storybook-extras/variants not working with Lit web component

[dakdh]

Hi @sheriffMoose, this addon is a cool project. Thanks for sharing it with the world.

I wanted to try it out on a new Storybook 7.0 project I'm working on, which is using @storybook/web-components and Vite. To get started I followed the instructions here: https://github.com/sheriffMoose/storybook-extras/tree/master/packages/variants#readme

But when I look at the story where I've added

parameters: {
    variants: {
      enable: true
    },
  },

I get the following error, and my component isn't rendered in the Storybook canvas:

I'm not sure if there's an issue in _populateStoryTemplate() or in one of the other functions called before it in _init(), but without modifying your code locally, my assumption is that there's an problem due to my component/story using @storybook/web-components and/or Lit's html template literal function.

Here are the relevant parts of my package.json:

  "dependencies": {
    "lit": "2.7.2"
  },
  "devDependencies": {
    "@storybook-extras/variants": "^0.0.68",
    "@storybook/addon-essentials": "7.0.3",
    "@storybook/addon-links": "7.0.3",
    "@storybook/blocks": "7.0.3",
    "@storybook/web-components": "7.0.3",
    "@storybook/web-components-vite": "7.0.3",
    "sass": "1.62.0",
    "storybook": "7.0.4",
    "typescript": "5.0.4",
    "vite": "4.2.1"
  },

[sheriffMoose]

hi @dakdh, thanks for reaching out, when I developed this addon, I've taken into consideration both angular & react. If you would like to submit a PR to support web-components as well, that would be great.

Otherwise, I will create a PR as soon as possible and keep you posted.

Thanks again :)