Lit 组件不会自动请求更新属性更改（问题只出现在我的故事书中）

Question

这真的很奇怪：我在故事书中使用 lit（使用 @storybook/html）。我不知道为什么，但在我的环境中 lit 不会在更改属性时自动更新组件。如果我明确调用 requestUpdate，它确实在更新。每个组件都会发生这种情况，即使是这个非常简单的演示组件（首先显示 'waiting...'，3 秒后它应该显示 'done'）......在这个 codesandbox 中显然工作......但在我的故事书:-( https://codesandbox.io/s/weathered-river-087wz?file=/src/index.ts

有没有人知道这个奇怪问题的原因是什么？蒂维米亚

[编辑]：这可能是原因： https://lit.dev/msg/class-field-shadowing 您应该在 tsconfig.json 中使用 "useDefineForClassFields": false。其实我确实设置了true，但是改成false后还是出现了上面的问题

PS：我使用的是最新版本的 lit (2.1.1) 和 storybook (6.4.13)

PPS: 删除目录 node_modules 和文件 yarn.lock 和运行 yarn install 没有解决问题

Answer 1

在 tsconfig.json 中，您必须将选项 useDefineForClassFields 设置为 false 才能使 lit 运行正确。欲了解更多信息，请参阅 https://lit.dev/msg/class-field-shadowing .

要完全解决 Storybook/Webpack 的问题，我还必须执行以下操作：

yarn add -D ts-loader@8.3.0（版本 9.x 不适用于 Webpack4）
[编辑：请查看下面 Vince 的回答……他的解决方案 (= main.js + webpackFinal) 似乎是首选方式]

将以下内容添加到 .storybook/webpack.config.json（不太确定为什么）：
```
config.module.rules.push({
   test: /\.(ts|tsx)$/,
   include: path.resolve(__dirname, '../src'),
   loader: require.resolve('ts-loader')
})
```

Answer 2

我无法编辑 Natacha 回复，

我有同样的问题，以下解决了我的问题

在tsconfig.json中添加"useDefineForClassFields": false,在compilerOptions
纱线添加-D ts-loader@8.3.0
将以下内容添加到 .storybook/main.js：

const path = require('path')

module.exports = {
  //...
  webpackFinal: async (config) => {
    //...
    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      include: path.resolve(__dirname, '../src'),
      loader: require.resolve('ts-loader'),
    })

    return config
  },
}

Lit 组件不会自动请求更新属性更改（问题只出现在我的故事书中）

Lit components do not automatically request an update on property change (problem only in my storybook)

lit-element

lit-html

lit

Lit 组件不会自动请求更新 属性 更改（问题只出现在我的故事书中）

Lit components do not automatically request an update on property change (problem only in my storybook)

lit-element

lit-html

lit

Lit 组件不会自动请求更新属性更改（问题只出现在我的故事书中）