标签: lit

我想通过 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作为原始字符串？

我一直在学习 Polymer 并且它进来了 - 网络的未来（lit-element和lit-html）

我知道lit-html是用于 HTML 模板的，它使用了一些有效的技术。同时lit-element是一个轻量级的 web 组件基类，里面有lit-html。

问题：如果lit-element与lit-html 一起提供，我将仅将lit-element用于我的所有目的。究竟是什么点燃-HTML有自己单独的上下文明确地这样做。

在开发独立的 Web 应用程序时应该选择lit-element还是lit-html？

任何有关指导的帮助都会有很大帮助！

我有一个丰富的编辑器，我正在重写为一个 lit-element 自定义元素。我正在使用 Firefox（最新）进行测试。我正在尝试在自定义元素的 shadowDom 中（在方法中）获取内容可编辑元素的选择。

在 Firefox 调试器中），this.shadowRootshadowRoot 元素看起来是正确的，但this.shadowRoot.getSelection没有定义，即使DocumentOrShadowRoot 说shadowRoot.getSelection()是在 shadow DOM 中获取选择的正确方法。任何人都可以阐明我缺少的东西吗？

非常感谢！

在 React 中，我们可以使用它PropTypes来将特定的 prop 标记为必需的。

requiredFunc: PropTypes.func.isRequired,

Vue 还支持必需的 props：

    propC: {
      type: String,
      required: true
    },

如何在 lit-element 中做到这一点？很有趣的是，一个框架声称它非常好，但却不支持诸如必需属性之类的简单内容。

我需要在 LitElement 中以最佳方式呈现无限可滚动数据。Vaadin-grid 似乎适合该用例。然而，数据是巨大的。所以我试图从后端延迟加载数据块。此后端 api 支持以块的形式返回记录（这样在第一次调用时将返回记录总数）。有没有可能的方法可以使用LitElement从 vaadin-grid 的后端延迟加载数据块。

根据Vaadin 提供的文档和演示，路由参数应该绑定到 location.params。提供的示例使用聚合物，当我使用 LitElement 时，location.params 未定义。除了使用 JavaScript 结合 Lit 来解析 url 以提取使用的 url :parameter 之外，还有其他技巧吗？

使用 Vaadin 22+

我正在尝试使用 LitRenderer 在 Vaadin 网格中显示一些动态 html。

以前可以使用现已弃用的 TemplateRenderer使用此 hack 来实现

var templateRenderer = TemplateRenderer.<Event>of("""
<div>
  <ul inner-h-t-m-l="[[item.html]]">
  
  </ul>
</div>
""").withProperty("html", item -> {
  String listItems = "";
  for (EventItem eventItem : item.getEventItems()) {
    listItems += "<li>"+eventItem.getValue()+"</li>";
  }
  return listItems;
});

/*
  Produces html like
  <div>
    <ul>
      <li>Thing 1</li>
      <li>Thing 3</li>
      <li>Thing 845</li>
    </ul>
  </div>
  */

这里重要的部分是设置包装元素的innerHTML。

有没有办法使用 LitRenderer 来做到这一点？我发现 Lit-Template 本身就有unsafeHTML 指令来实现这种目的。但我没有运气尝试让它或其他方法发挥作用。

谢谢

更新：2021.3.2 修复示例代码

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

import React from "react";
import "./App.css";
import "@vaadin/vaadin-button";
import "@vaadin/vaadin-text-field";

function App() {
  return (
    <div className="App">
      <vaadin-text-field label="First Name" ref="firstName" />
      <vaadin-text-field label="Last Name" ref="lastName" />
      <vaadin-button ref="addButton"> Add </vaadin-button>
    </div>
  );
}

export default App;

我收到类似的错误

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

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

在lit/lit-html/lit-element中，标准组件是TemplateResult（通常是HTMLTemplateResult），创建如下：

function renderMe(msg) {
    return html`<div>Hello ${msg}!</div>`;
}

当然，该库的强大功能和效率在于，后续调用将重用相同的<div>元素，并且仅替换更改的片段。

然而，为了测试renderMe()上面的函数，能够将返回值视为标准字符串会很有帮助，例如：

assert.equal(RENDER_AS_STRING(renderMe('kimiko')), '<div>Hello kimiko!</div>');

并在测试函数如何呈现到浏览器本身之前修复函数中的任何错误。

RENDER_AS_STRING是否有类似lit 本身或测试库中的函数？我已经搜索过，但没有找到。

我正在构建一个桌面应用程序，用于监视某些事物并生成有关其正在监视的内容的数据。当用户想要与数据交互时，应用程序会启动一个非常简单的网络服务器。服务器提供静态页面并具有基本的 http API 来提供数据。我使用 html 作为通用 UI，用户使用浏览器查看数据并与之交互。

我想使用 Google 的 Lit 2 将我的 html/css/js 重写为基于组件的 Web 应用程序。我喜欢纯 Web 组件的想法，但我注意到 Lit 提供了一些很棒的附加功能。毫不奇怪，大多数 Lit 文档都面向具有构建步骤的更传统的 Web 环境。我想看看是否可以让我的服务器尽可能简单并避免传统的后端工具（打字稿编译、缩小等）。我想用一系列简单的 js 文件中的 Lit 组件替换当前的静态 html/css/js。

目前，我的服务器从“公共”目录为我的页面提供服务，并具有最小的 http API：

- public/
 -- js/
 -- css/
 -- index.html

我应该如何在没有构建步骤的系统中使用 Lit？我需要与我自己的继承自 LitElement 的 javascript 类一起提供的最小 Lit 文件集是多少？