问题标签 [lit-html]

我正在用 lit-element 编写一个 web 组件，我想知道如何在一个变量中渲染一个字符串，该变量仍然具有完整的@click 侦听器，带有 html“处理器”而不是纯字符串。

不起作用，而

作品。

谢谢你的帮助！

我正在尝试使用 Lit-Element 创建一个 HTMLPortalElement，但是当我准备激活（）门户时，我在 Web 开发控制台中收到此错误：

DOMException：无法在“HTMLPortalElement”上执行“激活”：HTMLPortalElement 未与门户上下文关联。

在编写快照测试时，我需要进行一系列交互。例如，选择“商品”目录如下所示：

但是假设我现在需要单击“添加选择”按钮，该按钮仅在选择了中间列中的选项时才可单击/出现：

该功能需要选择商品目录，然后点击“电子产品”（例如）。

应该：

1. 执行这个“动作”的函数会执行之前所有需要的步骤吗？（然后它不是可组合的，但它是安全的）
2. 此功能应独立存在，并由您来确保您正确使用它
3. 如果有问题，这个函数应该抛出一个错误
4. （可能，我知道这将如何工作）我应该通过巧妙地使用返回签名类型和输入类型以某种方式使这一切成为类型安全的

选项 1 不可避免地看起来像像附图一样组合在一起的功能，但我不确定如何让它们安全地独立组合。

另一个相关链接：https ://kentcdodds.com/blog/effective-snapshot-testing

我应该采用方法 1、2、3、4 还是其他方法？为什么？

我是 lit-element 的新手，当使用 import 包含库时，我收到以下错误：

未捕获的类型错误：无法解析模块说明符“lit-element”。相对引用必须以“/”、“./”或“../”开头。

请提供任何替代方案/解决方案。

我想为我的站点使用 UI5 Web 组件“选择”，但下拉菜单没有打开。

我正在使用 Lit-HTML、Typescript 和 Webpack。我将 Playground 中的示例复制到我的代码中，并导入了两个模块（Select、StandardListItem）。确切的示例以及我更改的版本不起作用。但它显示带有 Attribute 的 li-Element selected。我还使用了其他一些 UI5 组件，例如 Input 或 Datepicker，它们都可以正常工作。

选择元素：

我进口了：

我希望有一个下拉菜单，但是当我单击小箭头或字段时没有任何反应。

我开始了一个基于LitElement的项目，里面 有很多相互嵌套的组件，假设我们有这样的结构：

根组件是my-app

如您所见，我们有两个组件： my-form

和我的看法：

为了获得属性count更改，我分派my-form了my-view事件侦听器，my-app然后在那时使用它，除了将其作为组件导入之外，handleCountChange我还分配了作为类导入的count值。MyView

目前，这是可行的，但我觉得还有很长的路要走，尤其是当我有更多嵌套组件时。我想知道这样做是否有更好的方法。是否有类似的东西Context API存在于react.js 我考虑使用redux但有人不推荐使用 litElemnt。我正在考虑的一个想法是将事件发送到document而不是当前组件，但也许这是一个不好的做法！你有什么建议，请告诉我？

我在一家拥有大量 webcomponents 目录的大公司使用 Polymer 1 和 2 工作了大约一年，我相信 webcomponents 会非常有用。我知道像https://adamsilver.io/articles/the-problem-with-web-components/这样的“缺点想法” 。

现在我正在深入研究如何有效地使用 vanilla webcomponents。我刚开始的前提是使用 vanilla web-components 将有助于与 webcomponents 改进保持一致（我不能为这样的想法辩护——我现在只是假设这一点）。然后我正在尝试创建一个堆栈来使用 vanilla webcomponents。

搜索推荐的测试方法我到达了https://open-wc.org/testing并且我认为它旨在促进良好实践而不添加特定框架（来自其网站：“开放 Web 组件是一项社区努力，独立于任何框架或公司”）。这正是我正在寻找的：一种良好的实践和众所周知的推荐，类似于我们从 micorservice.io 获得的微服务（这只是一个类比）。

尝试使用 package.json 中的脚手架：

所以，我的主要问题是：为什么 lit-html 用于 web 组件？

围绕我的主要问题的有用疑问，据我所知，lit-html 是由谷歌和聚合物团队赞助的框架。这不是以某种方式迫使我使用 polifylls 在所有浏览器中运行吗？假设我不关心浏览器不符合 web 组件，我为什么需要一个框架？

假设我有一个自定义元素。它由两部分组成，一个是打开和切换菜单的按钮，另一个是菜单本身。我想将菜单直接放在按钮 ( position: absolute) 下方，但按钮的高度可能因主题而异。如何在第一次渲染之前找出按钮的高度？

简化示例：

正如您在示例中看到的，我想知道初始渲染时按钮的高度并dynamicButtonHeight以某种方式填充变量。在这个例子中，它是 30px，但这实际上可以是任何数字。如果我想将菜单向右对齐，这同样适用于宽度。

我知道我可以先渲染标记，然后使用按钮获得对按钮的引用，this.root.querySelector("button").offsetHeight然后再重新渲染。尽管多亏了 lit-html 这会很有效，但我觉得这很脏并且在某些用例中会中断。

还有其他想法吗？

有人可以帮助我分享实现发布请求的示例。我有一个 web 表单，在填写所有必需的参数后，应该创建一个 json 请求并将其传递给 post API。我在 Lit-html 框架中使用 java 脚本。

提前致谢

我正在做一个 lit-element 项目，但我遇到了一个问题，reset.css无法应用于包装的 Web 组件shadow-root

我已经尝试过这种方式，但出现以下错误。

我试过的代码是这样的：

这被放入一个 html 文件中。

如何避免此错误，并将 reset.css 应用于 Web 组件？