问题标签 [lit]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
140 浏览

web-component - LitElement 对象属性为空

我有一个将对象作为属性的组件,但由于某种原因,渲染this.item未定义。

在我的 HTML 中,我有以下内容:

为了接受一个对象作为参数,我有什么遗漏吗?我尝试过调整一些事情,例如使 arg.item="{ }"无济于事。

0 投票
1 回答
181 浏览

javascript - 通过 Shadow DOM 使用composed=false 传递标准JavaScript 事件

<input>我有一个自定义的发光 Web 组件,它在其 Shadow DOM中包含一个元素。我想对change自定义元素外部的输入触发的事件做出反应,但该change事件默认具有composed: false,因此该事件不会通过 Shadow DOM 边界。我可以在组件实现中捕获该事件,但该composed属性是只读的,因此我无法更新它并调度相同的事件对象。我可以用 来创建一个新对象 new Event('change', {'composed': true}),但是它没有target原始事件的属性。什么是好方法?我应该手动将原始事件的属性复制到新的事件对象吗?

0 投票
3 回答
119 浏览

javascript - 在组件外部使用 html 函数返回 [object Object] LitElement

我对此感到头疼,如果有人知道如何解决它,那就太棒了。我正在使用 LitElement 创建一个表格组件,想要使用它的开发人员可以添加一个 customHTML 来呈现不同的输入。为此,他/她可以使用属性“headers”,如下所示:

使用内部组件:

我面临的问题是当我尝试在我的表格组件中使用这个 customHTML 时,它正在返回 [object Object]。你对此有什么解释吗?有可能解决这个问题吗?

谢谢!

0 投票
1 回答
309 浏览

reactjs - “模块解析失败:使用带有 NextJS 的发光组件时出现意外字符'@'”

我尝试在我的 NextJS 项目中导入一个发光组件。

这是我的组件:

这是我的 NextJS 元素:

这是输出:

我是 NextJS 和 React 的新手。这真的是 Webpack 问题还是我应该以某种方式修复我的元素?

0 投票
0 回答
40 浏览

javascript - 带有嵌套图标的iOS画外音html按钮不执行单击双击

我使用 Lit 为我们的应用程序创建了一些图标按钮,最近注意到在 iOS 上使用语音它需要三次点击来执行点击事件而不是双击。仅当我有一个嵌套在按钮内的元素(如 svg 或 span)时才会发生这种情况。如果只是一个文本节点,它可以正常工作。我已经尝试了一切,包括向子元素添加点击事件以委托点击,但它从未在子项目上执行。

我怎样才能让它在双击时与画外音一起使用?

0 投票
0 回答
79 浏览

unit-testing - Sinon:存根使用 fetch api 的包装器方法,并且该方法在 web 组件的 main 函数中被调用

我有一个 fetch api 的包装方法,它返回一个承诺。看,下面的代码示例:

所以,现在我有一个方法,我调用这个 fetchWrapper 方法,如下所示:

这里的问题是,我想对这个方法 loadData 进行单元测试。所以,我正在尝试使用下面的单元测试代码来存根内部方法。

请让我知道进行单元测试的解决方案是什么。我尝试了多种方法,但没有找到任何可行的解决方案。帮助。

0 投票
1 回答
517 浏览

web-component - 如何在 lit-element 中声明必需的属性

在 react 中,我们可以使用PropTypes将特定道具标记为必需道具。

Vue 还支持所需的道具:

如何在 lit-element 中做到这一点?一个框架声称它非常好,但不支持诸如必需属性之类的简单事物,这太有趣了。

0 投票
1 回答
216 浏览

vaadin - 瓦丁 18 | 使用 Littemplate 从客户端调用服务器

我正在尝试使用 littemplate 从客户端调用服务器端函数。我检查了 Vaadin 站点上的示例,发现客户端可以通过 this.$server._some_method 调用服务器端。我尝试在 littemplate 中使用 $server,但在前端编译期间,vaadin 抛出错误,指出“属性 '$server' 在类型 'HelloWorld' 上不存在”。请让我知道这个程序有什么问题并指导我。谢谢你。

光照模板

爪哇

0 投票
3 回答
227 浏览

vaadin-flow - 瓦丁 18 | 需要使用 Lit-Template 和 HTML 文本将消息从客户端传递到服务器

我正在尝试使用 littemplate 从客户端调用服务器端函数。我有一个需要帮助的问题。我在服务器端添加了一个 HTML fromatted 文本,它有一个自定义组件“hello-world2”。

我在这个自定义组件中传递了一个属性(name="Vaadin")。我希望当用户单击“helloButton”时,应将值“Vaadin”发送到服务器并调用“acceptMessage”。但截至目前,我收到了附加屏幕截图中显示的错误。

我这样做是因为在我当前的应用程序中我已经生成了 HTML 表。对于几列我正在尝试合并和使用 <vaadin-button> HTML 标记。因此,当用户单击此按钮时,我希望服务器端出现消息/值以进行进一步处理。

请指导我如何做到这一点。

点亮模板

爪哇

在此处输入图像描述

在此处输入图像描述

0 投票
1 回答
59 浏览

lit - 为什么有一个“。” 在点亮样本的选项中?

lit 在以下 URL 中介绍了“更改检测”的示例。 https://lit.dev/playground/#sample=examples/properties-has-changed

为什么有一个“。” 在 my-element.ts 的第 16 行中指定“日期显示”选项时,在“日期”的开头?