[Bug]: Constructor of lit-component called twice
#25,116 opened on Dec 5, 2023
Repository metrics
- Stars
- (89,909 stars)
- PR merge metrics
- (Avg merge 7d 22h) (184 merged PRs in 30d)
Description
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
The same component in Lit Playground only calls the constructor once
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