问题标签 [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 回答
82 浏览

web-component - lit:将昂贵的 dom 包装在不同的标签中

我的<lit-parent>组件中有一个昂贵的 DOM 节点列表,在特定条件下(例如父元素宽度 < 500px)需要包装在另一个组件中(例如画廊):

问题是,每次条件更改时,昂贵元素的列表都会被破坏并在 DOM 中重新创建,这会导致元素闪烁(我尝试了这些元素的组合,cacherepeat都没有改变行为)。

相反,我想重新使用已经创建的 DOM 并更改(或删除)包装器。

我发现在某种程度上完成这项工作的唯一方法是将条件移动到包装器元素中并移动<slot></slot>元素:

我不喜欢这个解决方案,因为它引入了很多“无用”的包装组件。如何重用部分 DOM?

0 投票
1 回答
274 浏览

javascript - 解决 web-dev-server pixi.js "import does not provide an export named 'default'" 冲突

我正在尝试更新我的一个旧站点,该站点使用 lit-element、pixi.js 和 webpack 在开发和构建中提供服务。新版本的 lit-element 已点亮,他们建议使用 web-dev-server 作为在本地提供代码的手段,但是当我尝试这样做时,我从 pixi.js 收到错误消息

https://lit.dev/docs/tools/development/(供参考)

请求的模块“./../../../es6-promise-polyfill/promise.js”不提供名为“Polyfill”的导出

从我发现的有效填充只是提供了一个立即调用的函数表达式,而 pixi.js 正在尝试进行模块导入

我对 lit-element 和 webpack 没有这个问题,我不确定如何正确解决这个问题。我想这是一个捆绑问题,但这真的不是我的强项。切换回 webpack 似乎会带来很多其他问题。(似乎与这个问题有关相对引用必须以“/”、“./”或“../”开头,但由于其中的解决方案是使用 web-dev-server 而不是 webpack,所以我绕圈跑)

对此问题的任何建议将不胜感激,在此先感谢。

0 投票
0 回答
52 浏览

javascript - 如何在 Lit 的 css 中使用字符串类名

我想将类名存储在 JS 常量中,如下所示:

然后在 html 模板中使用它们,如下所示:

问题是: Lit 不允许在css函数中使用字符串,我知道我可以在unsafeCSS每次使用它时将每个单独的类包装在 中css,但是有没有更好的方法来做到这一点?

0 投票
0 回答
70 浏览

angular - LitElement 组件在 Angular 上无法正常工作

我已经下载了一个名为 Astrouxds ( https://www.astrouxds.com/ )的自定义框架(基于 LitElement),我想在 Angular 上使用它的 rux-tabs 组件(我已经使用了它的其他一些组件,像 rux-status 等),但我无法让 rux-tabs 组件工作。

在此处输入图像描述

这是我用来显示标签的 HTML。

我还将相关的 .js 导入到项目中

在此处输入图像描述

我如何在 Angular 上使用这个组件?

0 投票
1 回答
82 浏览

html - 如何获取内部内容作为变量而不在 LitElements 中渲染

我正在像这样使用我的发光元素

我有我的 lit 元素的渲染方法:

这是完美的工作。现在,我希望将 lit 元素类中的内部内容(即“MyHeading”)作为一个值(不渲染)。有什么方法可以获取该 innerHTML 或作为文本?

注意:我的用例可以是设置渲染内容的另一个属性,例如

是否有可能获得内部内容作为价值?

0 投票
2 回答
263 浏览

javascript - 点亮元素对象属性未定义

我有一个获取项目(对象)列表的反应组件。当我将它传递给孩子时 - 这是一个点燃的元素。它以未定义的形式返回。

我已确保数据正在返回。还尝试对一组对象进行硬编码。仍然没有运气。

TypeError: Cannot read property 'name' of undefined

我似乎无法弄清楚为什么它按定义显示。当我从对象传递单个值时,它可以工作,但是当整个对象传递给子对象时,它是未定义的。

React js 父组件:

儿童 - 点亮元素

0 投票
0 回答
38 浏览

html - 如何设置影子根兄弟的样式?

这不是重复的。我已经尝试过现有的解决方案,但不适用于我的示例。

我有一个创建卡片列表的父组件。悬停时,我想将所有兄弟姐妹都向右移动。

但是,因为这些兄弟姐妹中的每一个都是影子根,所以似乎不会影响它。

在此处输入图像描述

这是我尝试过的。

0 投票
1 回答
88 浏览

vaadin - 我想使用 vaadin-upload 调用文件上传 API

我正在尝试使用“vaadin-upload”实现文件上传功能。我有一个使用 Spring boot 实现的本地构建的文件上传服务器,我想使用它的 API 来上传文件。我想使用这个 API 上传从“vaadin-upload”输入的文件。

API规范是这样的。

  • [网址] http://localhost:8080/uploadFile
  • [标题] 内容类型:multipart/form-data
  • [requestparam] 文件:多部分文件

vaadin-upload ”的 API 参考并没有告诉我如何执行 API。我不知道如何运行 API。请告诉我。

索引.html

文件上传.ts

文件控制器.java

0 投票
1 回答
131 浏览

vaadin - LitElement:如何在 vaadin 叠加层中填充插槽

我正在按照本教程创建我的组件。在我的用例中,我需要将 Java 元素添加到 vaadin-overlay 内的插槽中。

我想存在某种时间问题,因为当我尝试将组件添加到该插槽时,它没有显示出来。

或者这在覆盖范围内是不可能的?

2021 年 8 月 31 日更新:采样器 中现在有一个代码示例供您测试和查看

2021 年 9 月 9 日更新: 我现在已将整个组件完全重写为 litelement 并更新了 sampler。据我所知,它正在工作,但是......仍然有点慢。

0 投票
0 回答
154 浏览

typescript - 如何将 SCSS 样式表添加到 Lit Web 组件?

我正在使用lit.dev构建一个 Web 组件。对于我的组件,我想导入一个 SCSS 样式表并按以下方式使用它:

5.51.1我正在使用 Webpack和 TS设置这个项目。

这是我的webpack.config.js

我需要 SASS,因为我从第三方库(Bootstrap)导入了很多 mixins 和变量。根据文档,使用外部样式表的唯一方法是通过<link>标签嵌入它,他们不推荐这样做。但是,由于我使用的是捆绑程序,我想知道是否有任何可用的解决方法(可能是这种情况,但我是 Webpack 新手)。谢谢!