问题标签 [lit]

我正在使用 lit-element，并且有些地方需要添加滚动侦听器并运行一些函数，因此决定为此创建一个“服务”，它将 addEventListener 并可以将函数作为回调。在调用unsubscribeDomEvents()它时应该删除EventListener。

所以基本功能正在工作，但 removeEventListener 没有。_onScroll()即使在unsubscribeDomEvents()被调用之后，我仍然可以从中看到这个控制台。这是我现在拥有的：

这是我在组件中使用它的方式

将不胜感激任何帮助！

我正在尝试在 React 应用程序中使用一些 Web 组件。但是，React 无法检测 Web 组件标签。

我收到错误，例如，

“JSX.IntrinsicElements”类型上不存在属性“vaadin-text-field”。

我是否需要使用Reactify-WC才能在 React 中使用 WebComponents？

我使用 lit 和 vaadin-combo-box 创建了一个组合框组件。我能够毫无问题地创建组合框，但我不知道如何设置默认值。如何在选择之前将默认值设置为“标签 1”？

我有一个存储在变量中的 html 模板：

我想在myTemplate.

就像是

但这引用了模板而不是元素；如何隔离元素来修改它？

使用 LitElement 和 shadow dom。我曾经在 light dom 中有这个代码：

当我切换到使用 shadow dom 时，this.shadowRoot.documentElement 会中断。
firstElementChild 似乎工作。但它是等价的吗？

在 shadowroot 中使用 scrollHeight、scrollTop 等文档属性的最佳方式是什么？

谢谢！

• 尝试使用每个按钮单击创建一个列表。

• 我想在 ul 元素中附加 li 标签。OnClick 我已经创建了 addList 函数。

• 处理点击事件。

  这是代码。

这个包为使用 lit 创建的动画元素提供了帮助：https ://github.com/lit/lit/tree/main/packages/labs/motion 。

该页面指出：

“此外，元素在最初渲染到 DOM 时以及被移除时都可以设置动画。”

我希望能够在安装时或在卸载之前为元素设置动画，但我找不到任何可以做到这一点的示例。

为了具体说明我想要实现的目标，它本质上是一个轮播式面板：

• 我有一个parent包装 div，溢出设置为只显示一个childdiv。
• 当一个函数在父级中运行时，我希望当前可见child的“飞离”到左侧，并被一个从右侧滑入的新函数替换。

我当然可以通过手动触发它而不破坏child向左飞的元素来实现这一点，但我试图了解是否有更整洁/更惯用的方式。

parent.ts

child.ts

我意识到我在上面所做的是更新同一child组件的颜色，而不是删除/替换它，但希望它可以让我对我正在尝试做的事情有一个基本的了解。

我是 lit 的新手，并且对 javascript 很陌生，所以这可能就像我误解了一些术语或一些基本的生命周期管理一样简单 - 所以非常感谢所有帮助！

今天我花了一些时间和 Lit 一起尝试制作一个简单的 WebComponent，它使一个 HTTP GET 到一个 URI，它返回一个完整的 HTML 文档，我想将这个 HTML 文档注入到 WebComponent 的影子 DOM 中；基本上，这个 WebComponent 充当了一个简单的代理，用于在我的网页上嵌入一个外部托管（但受信任）的 Web 片段。我遇到了几个问题：

1. Lit 认为所有的 HTML 都是不安全的，所以我不得不用 Lit 的unsafeHTML指令来标记它。
2. 然后，我注意到注入的 HTML 中没有任何脚本或链接标签被跟踪，因此我将传入的 HTML 解析为 HtmlDocument，找到所有脚本/链接标签，并使用“重新创建”它们并将它们document.createElement(...)返回到我的使成为（）。我现在注意到图像也没有出现。

我不喜欢抓取脚本/链接并重新创建它们并将它们插入我的 Web 组件，但我很好奇 - 处理这个联合/消费联合 HTML 页面/片段的正确方法是什么？

oEmbed 已经解决了这个问题吗？

使用不同的 WebComponent 库是否更简单？

在这一点上，这似乎比应该的要困难得多。

我正在尝试使用 Material Custom Component 并使用其他一些组件。但我有版本冲突Uncaught DOMException。

未捕获的 DOMException：无法在“CustomElementRegistry”上执行“定义”：名称“mwc-icon”已用于此注册表。

目前，我正在使用 yarn 包管理器来处理自定义组件版本。

我不了解litWeb 组件架构中的反应性概念。从其他框架中，我假设以下示例将毫无问题地更新，但它不适用于lit.

我可以看到子组件render方法仅在最初被调用，而不是在我单击按钮后再次被调用。但即使我通过 手动调用它Web Components DevTools，它也不会以新状态重新渲染。

我必须改变什么才能让它工作？

父组件：

子组件：