问题标签 [lit]

我正在寻找一种方法来使用 MutationObserver 监听 CSS 自定义变量的变化，实际上我正在使用主 index.html 文件中定义的 CSS 自定义变量来触发 Web 内容的不同主题。我想要的是一个干净的 MutationObserver 解决方案，我可以在所有/父/子 CustomElements 中使用它来侦听 index.html 主文件中 CSS 自定义 var 的更改中该 DOM 元素规则上的 CSS 自定义 var 的更改。

实际上，我无法监听从 CSS Custom var 向下传播的三个更改。例如。我在 CustomElement 中用于监听样式更改的代码：

我有一个非常简单的模板和一个简单的嵌套模板。不幸的是，我的嵌套模板没有渲染任何东西。

我遵循了以下定义的示例：https ://lit.dev/docs/components/rendering/

这是我的容器模板。

这是我的嵌套模板。

我的页面在 devtools 检查器中如下所示：

如你看到的; ul-mail什么都不渲染，不hello from ul-mail!。

我想知道出了什么问题？

我想将我现有的 Javascript CustomElements/WebComponents（使用 Lit v1 制作并移植到 v2）转换为 TypeScript。

例子：

...或另一个：https ://github.com/lit/lit-element-starter-ts/blob/main/src/my-element.ts#L37

如何将属性定义为自定义打字稿类的数组？

例如这样的：

有一个 lit 元素container-element具有嵌套的 lit 元素gmail-item。

您如何将样式应用于嵌套元素以使最后一个gmail-item具有border-none？

目前，样式li:last-of-type不会传播到包含li.

编辑：

尝试了以下。

但不幸的是，它们都没有将样式应用于li内部gmail-item。

我也尝试添加createRendeRoot，但这删除了里面的所有样式gmail-item。

也试过设置li border-bottom to inherit。

在 lit/lit-html/lit-element 中，标准组件是 TemplateResult（通常是 HTMLTemplateResult），创建如下：

当然，库的强大和效率在于后续调用将重用相同的<div>元素，并且只替换更改的片段。

但是，为了测试renderMe()上面的函数，能够将返回值视为标准字符串会很有帮助，例如：

并在测试它如何呈现到浏览器本身之前修复函数中的任何错误。

是否有类似RENDER_AS_STRINGlit 本身或测试库中的功能？我已经搜索并没有找到一个。

将几个 lit-Components 迁移到 v2"lit": "2.1.1"后，我们收到以下打字稿错误：

“typeof MyComponent”类型的参数不能分配给“CustomElementConstructor”类型的参数。“MyComponent”类型缺少“HTMLElement”类型的以下属性：accessKey、accessKeyLabel、autocapitalize、dir 和 275 多个。

到目前为止代码运行良好 - 这只是 lit 中的一个错误吗？

我有超级简单的发光元素，我试图有一个基于 isOpen 反应属性的关闭或打开图标。单击元素集this.isOpen = !this.isOpen，这应该会导致更新。不幸的是，单击该按钮不会导致重新渲染。任何想法为什么会发生这种情况？垃圾点击时正确Console.log注销。true false true false tue

编辑：将 isOpen 更改为字符串open和closed. 没有效果。
edit2：将 isOpen 更改为@state(). 没有效果。
编辑3：添加this.requestUpdate()并且有效。但这没有任何意义！re-render如果更改它们不会导致甚至触发，那么关于“反应性”属性的“反应性”是什么lifecycle methods？？？？？？

嘿，我正在尝试制作一个评论组件（看起来有点像 todolist atm）。我有我的组件与 redux 链接，如果我 console.log 我的数组（请参阅评论列表 this.commentaries）我看到它已填充，但评论项目未显示在列表中的屏幕上。 我不知道我做错了什么有人可以帮助我。这是到目前为止我拥有的三个组件的代码：

评论项目：

添加评论：

评论列表：

我的 redux 文件看起来像这样（我认为它们可以工作，因为数组已满）： CommentaryDataservice：

评论减速机：

评论动作：

评论：

应用服务：

希望有人知道答案。

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

是否有任何人可能知道这个奇怪问题的原因是什么？特维米亚

[编辑]：这可能是原因： https ://lit.dev/msg/class-field-shadowing 您应该"useDefineForClassFields": false在 tsconfig.json 中使用。实际上我确实已经将它设置为true，但是在更改为之后false我仍然有上述问题。

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

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

我目前正在研究使用 Litelements 的 Web 组件：在 Web 组件中，您可以通过将 mode 属性定义为“打开”或“关闭”来更改 shadowdom 的工作方式。像这样在没有 LitElements 的 vanilla Javascript 中：

Javascript：

来自：https ://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow

现在在带有 Typescript 的 Litelements 中，可以这样实现：

打字稿：

来自：https ://lit.dev/docs/components/shadow-dom/

自定义渲染根的最简单方法是设置 shadowRootOptions 静态属性。createRenderRoot 的默认实现在创建组件的影子根时将 shadowRootOptions 作为选项参数传递给 attachShadow。它可以设置为自定义 ShadowRootInit 字典中允许的任何选项，例如 mode 和 delegatesFocus。

老实说，我无法让它工作，我尝试了很多东西，比如：

打字稿：

上面的尝试给了我一个错误，我没有正确扩展类 LitElement。

打字稿：

给我愚蠢的错误消息，只有 VS Code 和 Typescript 会产生错误的类扩展。

打字稿：

上面的尝试给了我一条消息，告诉我我没有正确扩展并且还抱怨语法。

然后我试图找出 LitElement.shadowRootOptions 是什么类型并提供类似的东西，但后来我陷入了一个提出更多问题的兔子洞，发现这个简单的 oneliner 更加晦涩难懂。（是的，我确实阅读了传播语法，我想我理解了，我也根据传播语法阅读了这篇文章： 我不了解对象内部的传播语法 ， 它是传播“语法”还是传播“运算符” ? )

因此，为了使这个问题保持简单：

任何人都可以指出我必须如何编写语法的正确方向，所以这确实有效吗？我只是希望能够按照设置的方式将模式设置为打开或关闭。

非常感谢！

问候

亚历克斯