[Bug]: Constructor of lit-component called twice

[herrKlein]

The constructor in lit web-component, wen used in storybook is called twice.

test-constructor.ts

@customElement('test-constructor')
class TestConstructorComponent extends LitElement {
  constructor() {
    super();
    console.count();
  }

  render() {
    return html` <span>constructor called multiple times in storybook</span> `;
  }
}

count is 2 in storybook ( reproducible example below ) count is 1 in lit-playground ( reproducible example below )

test-constructor.stories.ts

export const TestConstructor = {
  render: () => {
    return html`<test-constructor></test-constructor>`;
  }
};

This gives a number of problems, including a warning the reactive cycle is called within. And some implemented lifecycle methods. I think this is related: https://github.com/storybookjs/storybook/issues/17094. But a very old issue and maybe that one was related to lit itself.

There are no workarounds known te me, so hopefully someone knows what the problem is when using lit in storybook.

Thanks in advance

To Reproduce

The following component in Storybook calls the constructor twice

https://stackblitz.com/edit/github-q3itzv?file=src%2Fstories%2Ftest-constructor.stories.ts,src%2Fstories%2Ftest-constructor.ts&preset=node

The same component in Lit Playground only calls the constructor once

Lit playground reproduce

System

Storybook Environment Info:

  System:
    OS: macOS 12.6.5
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node
    Yarn: 1.22.18 - ~/.yarn/bin/yarn
    npm: 9.6.5 - ~/.nvm/versions/node/v18.12.1/bin/npm <----- active
    pnpm: 7.27.0 - /usr/local/bin/pnpm
  Browsers:
    Chrome: 119.0.6045.199
    Edge: 119.0.2151.97
    Safari: 16.4.1
  npmPackages:
    @storybook/addon-a11y: ^7.6.3 => 7.6.3 
    @storybook/addon-essentials: ^7.6.3 => 7.6.3 
    @storybook/addon-interactions: ^7.6.3 => 7.6.3 
    @storybook/addon-jest: ^7.6.3 => 7.6.3 
    @storybook/addon-links: ^7.6.3 => 7.6.3 
    @storybook/addon-storysource: ^7.6.3 => 7.6.3 
    @storybook/blocks: ^7.6.3 => 7.6.3 
    @storybook/jest: ^0.2.3 => 0.2.3 
    @storybook/test: ^7.6.3 => 7.6.3 
    @storybook/test-runner: ^0.16.0 => 0.16.0 
    @storybook/testing-library: ^0.2.2 => 0.2.2 
    @storybook/web-components: ^7.6.3 => 7.6.3 
    @storybook/web-components-vite: ^7.6.3 => 7.6.3 
    eslint-plugin-storybook: ^0.6.15 => 0.6.15 
    storybook: ^7.6.3 => 7.6.3

Additional context

No response

[rdsingh13]

Hi , I check the issue this is happening because of bug in lit librrary thats why it called twice

[herrKlein]

Did you find a reference to a bug report in lit. or do you know what causes this to happen in storybook but not in the playground?

[James-Wilkinson-git]

I also have this issue, two VM scripts are made in Chrome when I inject a console log. I am doing this through a storybook decorator.