问题标签 [lit]

我正在使用点亮的自定义元素：

我在组件 B 中使用组件 A 并希望访问 B 的属性字母（从子元素到父元素）。我怎么做？

我正在使用Lit构建我的前端 UI 组件。我还使用了定义自己的 Web 组件的公司内部设计系统。我的问题是，当用户点击其上的“关闭”按钮时，这些内部 Web 组件之一可以直接从 DOM 中删除自己。Lit 不知道发生了这种情况，如果我重新渲染我的组件，它就不起作用。有没有办法以某种方式手动向 Lit 指示真实 DOM 已更改并同步其缓存？

例如，这是我的 LitElement Web 组件的渲染方法的简化版本：

“内部组件”做自己的事情并呈现一个“关闭”按钮，当单击该按钮时，会直接将其自身从 DOM 中的父元素中移除。它确实会发出一个发生这种情况的事件，但如果我调用“requestUpdate”重新渲染，Lit 不会重新渲染内部组件。如果有一个 Lit API 我可以在关闭事件期间调用“将缓存与实际 DOM 同步”，那么它可能会起作用。

提前致谢！

- 史蒂夫

我正在使用lit-localization ( https://www.npmjs.com/package/lit-translate ) 来更改组件语言。但是所有文档和演示都使用打字稿。

如果有人使用lit-translate完成了 Web 组件本地化，请分享您是如何使用 javascript 进行本地化的。如果不是，那么本地化我的 Web 组件的解决方案是什么。

https://github.com/andreasbm/lit-translate

我有一些使用发光元素创建的 Web 组件。其中包括一些从另一个站点发送和获取数据的 api 请求，我希望通过 api 请求标头发送一些数据。因此，我希望创建一个通用函数来包含这些标题详细信息，以防我将来需要更改它们，我不需要一一编辑这些组件。我需要如下解决方案：

common_function.js

my_component.js

请让我知道一种使用 lit 元素实现此目的的方法。提前致谢。

Lit 文档将 Web Test Runner 称为测试。它导航到这个示例页面。

我试过测试MyElement，只有一个<p>。

通过 open-wc 进行测试时，该元素shadowDom没有<p>在descendant.

是否需要更多设置来使用 open-wc 测试 Lit 元素？web-test-runner.config.js 是：

我想通过 vite 在 npm 模块中获取原始的 css 字符串。根据 vite 手册，
https
://vitejs.dev/guide/assets.html#importing-asset-as-string 它说我们可以通过将“？raw”放在标识符末尾来获取原始字符串。

所以我试试这个：

从“swiper/css/bundle?raw”导入样式；

但这显示如下错误：

[vite] 内部服务器错误：“swiper”包中缺少“./css/bundle?raw”导出

如果我使用这个：

从“swiper/css/bundle”导入样式；

没有错误，但是 css 不仅作为字符串加载，而且作为捆绑 css 处理。
这不好，因为我想在我的基于 lit 的 web 组件中使用这个 css。
有没有办法通过 vite 将 css 作为原始字符串？

我正在密切关注lit制作一个跨框架组件库，但要成为一个可行的选择，我需要一种方法来获取诸如 Vue 的作用域插槽或 React 渲染函数之类的结果，以便我可以与组件共享保存在 lit 中的状态用户将使用他们最喜欢的框架进行编码。

关于如何实现这样的事情的任何想法：

能够让 lit 组件处理逻辑并仅将正确的 props 从另一个框架传递给子组件将是框架互操作性的圣杯。在示例中，用户可以提供带有他选择的框架的自定义 Row 组件。我知道这种特定的语法是无法实现的，但我想知道是否有替代模式来获得最终结果。

我试图创建一个对按下和释放事件做出反应的简单 Vaadin 组件（如 Button）。在新闻事件中，它必须从麦克风开始录音，在发布时它必须将记录的数据上传到后端。我认为上传的不错选择是使用 Upload Vaadin 组件。我找到了如何在页面上记录和播放记录数据的示例，但我找不到如何使用上传组件开始收集它的方法。而且我不确定如果为 Vaadin 14 + Lit 创建组件，它将在下一个 LTS 版本中有用。请指出我如何开始开发我的组件。

找到用于录音的 npm：链接

并用于创建 Lit 组件：链接

或者也许还有其他一些可能性，比如自定义 StreamResource 将记录的数据从浏览器发送到后端而不使用 Upload 类？

我正在使用 Vaadin Flow，版本 22。我正在尝试集成一个 Web 组件，该组件具有需要一组对象的属性，并且这些对象使用 Javascript 日期。

为了给您一个想法，以下是您应该如何在 Javascript 环境中使用它：

我还没有弄清楚如何将这种数据从 Java 代码传递到 LitElement。到目前为止，我坚持使用下面的代码（实际上，通过 Jackson 将我的数据编组为 JSON），但如果我尝试在其中使用日期，它将只是一个 ISO8601 字符串，而不是实际的 Javascript 日期。 .

你能帮我弄清楚怎么做吗？

提前致谢 ！

编辑：在探索 Vaadin 代码后，我意识到没有内置的方法可以自动将我的数据解析为日期。所以我最终制作了一个扩展第三方类的 JS 类，并为其添加了一个方法setData，该方法将解析传入的 JSON 数据并将每个 ISO8601 字符串转换为日期，然后执行this.data = myNewData;. 并从我调用的Java中的相应组件

我正在使用 Shadow DOM 使用 customElement，例如：

innerHTML（在我的例子中由 lit/lit-element 生成）类似于：

我知道，如果const ht = document.querySelector('hello-there')我可以调用.innerHTML并获取<b>S</b>amanthaht 的 shadowRoot ，我可以调用.innerHTML Hello ！`。但...

浏览器本质上呈现<span>Hello <b>S</b>amantha!</span>. .assignedNodes除了遍历所有，并用插槽内容替换插槽之外，还有其他方法可以获得此输出吗？像.slotRenderedInnerHTML什么？

（更新：我现在已经编写了可以遍历assignedNodes并执行我想要的代码，但与浏览器原生解决方案相比，它似乎脆弱而缓慢。）