问题标签 [lit]

我一直在为我的发光元素项目使用 Stripe。安装卡元素根本不起作用。这是我正在使用的代码示例

每次我运行它时，我都会收到以下错误

Uncaught (in promise) IntegrationError: Elements cannot bemounted in a ShadowRoot. 请安装在 Light DOM 中。

我知道我们在 Lit 元素中没有 DOM，但是我们如何在 shadowDom 中安装元素呢？

因此，我正在映射一组对象，并希望在选择单选按钮时显示在页面上。例如，如果数组中有两个对象，则将有两个单选按钮。如果你按下radio1，它应该呈现form1。如果按radio2，它应该隐藏form1并显示form2。

我创建了一个名为 formIndex 的属性来跟踪正在按下哪个按钮，以便我知道要调用哪个表单，但我在实现时遇到了麻烦。

当前行为：在页面加载时，两个无线电都出现，但尚未呈现数据。当我按下radio1 时，它同时显示form1 和form2。当我按下radio2 时，它同时显示form1 和form2。

我在 TypeScript 文件中使用 LitElement。

这是我创建的属性。由于我通过从 0 开始的数组进行映射，因此我将此属性初始化为 -1：

这是我渲染表格的地方：

最后，这是处理收音机点击的方法：

如何使它在单击第一个单选时仅显示第一个表单而单击第二个单选时仅显示第二个表单的位置？谢谢！

我正在尝试为 vaadin-grid-pagination 项目构建一个页面大小选择器，并在此过程中提出了一个使用 vaadin-dropdown-menu webcomponents 的设计，如下所示：

我遇到的问题是@click 事件似乎没有被触发。在之前的尝试中，我使用了 shibui-dropdown webcomponent 来实现相同的目标，并且该组件运行良好，我能够使用 @click 事件传递在 UI 中选择的值。

我选择使用 vaadin 的原因是它具有一般 vaadin 主题的外观和感觉，并且整体看起来会更好。

无法触发@click事件我做错了什么？

从这里开始vaadin-item @click event in lit template我替换了

和

我现在面临的问题是，当单击打开选择下拉菜单的菜单图标时，我在 javascript 控制台中出现动画异常：

vaadin-bundle-f3342f1907b875298b7b.cache.js:7198 无法播放（淡入动画）。TypeError: document.timeline.play is not a function at HTMLElement._configureAnimations (vaadin-bundle-f3342f1907b875298b7b.cache.js:7198) at HTMLElement.playAnimation (vaadin-bundle-f3342f1907b875298b7b.cache.js:7198) at HTMLElement._renderOpened ( vaadin-bundle-f3342f1907b875298b7b.cache.js:7228) 在 HTMLElement.__openedChanged (vaadin-bundle-f3342f1907b875298b7b.cache.js:7198) 在 HTMLElement。(vaadin-bundle-f3342f1907b875298b7b.cache.js:7198)

不确定可以做些什么来解决这个问题。

我有一个像这样的对象属性

像这样被实例化

基于它，我想构建一个包含 3 个条目的下拉列表，即通过迭代 pageSizeValues

虽然 console.log 在 UI 中正确显示键值对，但我根本没有得到呈现的项目。

当我迭代一个数组而不是一个对象时，我设法正确地渲染了这些项目，所以我不确定问题可能出在哪里。

所以我有以下内容styles：

然后我将其设置renderRoot为 lightdom：

有了这个样式没有应用，我必须手动添加：

如果我删除createRenderRoot，则样式无需<style>在函数中设置标签即可工作render。

谁能告诉我我做错了什么？或者为什么会这样？

我想使用 Lit 反应式控制器创建一个基本的状态管理。目的是在整个应用程序中共享属性值。

当控制器附加到视图和嵌套在视图中的组件时，会出现此问题。当控制器内的值发生变化时，视图中的值会更新，但不会在嵌套组件中更新。

示例：state.js 包含存储逻辑。视图访问存储以创建值并显示状态值。嵌套组件也显示状态值。

state.js

组件.js

视图.js

在 view.js 中单击按钮会更新 view.js 中的 this.state.test，但不会在 component.js 中更新

背景

我尝试了几个关键字，但无法找到禁用更漂亮的引号修改的解决方案。我正在做一个 Polymer Lit 项目，我尝试了很多东西，但维护代码缩进真的很困难……所以 prettier 做得很好，但只有一个问题破坏了我的代码。

格式化前的代码

格式化后的代码

是否有任何标志/属性我可以传递给 prettier 以忽略或避免引号，并且所有其他事情都应该解决......

如果没有任何人可以告诉我是否有任何其他 Formater 可以使用 lit 元素完成干净的工作..

我有下面的 html，我在一个发光的组件中呈现：

通过以下构造函数，我正在调用调整大小处理程序：

handleresize 方法如下：

我正在尝试获取'col' ID 的标签，但它让我为空。有人可以告诉这里的错误是什么吗？

我目前正在使用 LitElement 开发一个 Web 项目，并且我有一个菜单，当我单击 hamburguer 按钮时会显示，当我单击关闭按钮或导航到其他页面时会关闭。

我的问题是我想应用 CSS 属性overflow: hidden;以停止页面其余部分的滚动（因为我的菜单具有 100% 的宽度和高度），并在菜单关闭时删除该属性。

当我单击菜单按钮时，组件Menu被创建，当我单击关闭按钮（或导航到另一个页面）时，组件被删除，所以我必须在一个组件中应用并overflow在另一个组件上删除它。

所以，我的问题是，如何做到这一点？