问题标签 [lit-element]

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 回答
5833 浏览

javascript - 使用什么框架来构建 Web 组件:lit-element vs stencil vs SkateJS?

我想开始利用http://webcomponents.me W3C 标准,现在所有主要的 Web 浏览器都支持该标准。

我研究了互联网,到目前为止,我发现了以下框架:

  1. Stencil - 由离子创建。所有 ionic 组件都使用此框架/编译器来构建原生支持的 Web 组件。

  2. lit-element - 由 Google 创建,是 Polymer 框架的一部分。

  3. SkateJS - 不知道这背后的原因,但它是前 3 大流行的 Web 组件框架。

有人可以给我建议或意见哪个框架最好?

0 投票
2 回答
601 浏览

lit-element - LitElement - 如果在 LitElement 渲染方法中的表达式,如何使用 javascript 创建 dom-if 重新标记行为?

我们在 LitElement 中使用“if”表达式在 render 方法中选择性地渲染内容,并且希望在每次“if”表达式重新评估(更改)时重新创建子 DOM。这类似于 dom-if 元素用于支持聚合物 3 中的“重新印章”属性的东西。

真的很感激这里的任何指示吗?

谢谢, 维沙尔

0 投票
1 回答
1431 浏览

javascript - Lit-Element 绑定到 svg 图像。TypeError:无法读取 null 的属性“拆分”

我一直在尝试将一个简单的 url(字符串)绑定到 svg 元素内的图像标签。
但我收到以下错误:TypeError: Cannot read property 'split' of null浏览器中没有显示图片。

图像和绑定工作正常,在普通<img>标签内或在<image/>元素中硬编码时没有错误。

SVG 示例:

解决方法示例:

在阅读了这个问题的评论中指出的 github 上的讨论后,我更新了我的答案:

在此处输入图像描述

0 投票
1 回答
1550 浏览

unit-testing - 在 firstUpdated 中对 LitElement 事件进行单元测试

我有一个简单的混合:

我想测试是否my-event被解雇。这是我的测试:

这按预期工作,但我不确定这setTimeout(() => el.firstUpdated());条线。不应该firstUpdated在之后调用await fixture吗?我只是在关注open-wc 的测试指南

0 投票
1 回答
278 浏览

javascript - noUIslider 在 Web 组件聚合物 3(litelement)中不起作用

我想知道如何在像 Polymer 3/LitElement 这样的 web 组件中实现 noUiSlider,我尝试了下面的代码,它得到了一个错误,nouislider.create is not function并且服务器以non-JavaScript MIME type of "text/css".

0 投票
1 回答
424 浏览

polymer - 聚合物构建后未找到 lit-element.js

我目前遇到的问题可能很简单,但我无法解决。

我有一个使用最新版本的 lit-element (2.0.1) 的聚合物应用程序。

不幸的是,在运行npm run build:static(后面是polymer build)并使用:(npm run serve:static 后面正在执行:)提供服务之后polymer serve --port 5000 build/es5-bundled

lit-element.js 不可用。

如果我列出项目 node_module 中的文件,我有:

lit-element.js 似乎在那里,在构建之后,如果我查看构建的 node_module 它不会被复制。

你知道为什么会这样吗?先感谢您。祝你有美好的一天!

以下是一些额外信息: package.json 的依赖部分

聚合物.json

0 投票
1 回答
408 浏览

javascript - 如何在 litelement 组件中显示对象

我想知道如何在 lit-element 组件中显示两个不同的对象值

预期输出
在渲染 html 中显示两个不同的对象值。

0 投票
1 回答
681 浏览

javascript - 单选按钮未在 litelement 组件中显示所选值

我是 litelement 的新手,我有一个 lit-element 组件,其中渲染时的单选单击事件函数未定义。我想在渲染方法中显示选定的单选按钮值以及相应的提供程序 ID。

预期结果,在渲染 html 中显示单选按钮选择的值

0 投票
3 回答
3421 浏览

bootstrap-4 - 您如何将 Bootstrap 与 Lit-Element 一起使用?

我想在 Bootstrap 中使用 Lit-Element。

目前我只是按照这里的建议导入了外部依赖项:https ://lit-element.polymer-project.org/guide/styles#external-stylesheet

有没有更好的方法来导入这些第 3 方依赖项?

这是我的组件:

我将不胜感激有关如何清理此代码以及如何与多个组件共享此代码的任何建议。

0 投票
2 回答
1344 浏览

localization - 使用 lit-element/lit-html 进行国际化/本地化的最佳实践

感谢您的阅读。

我是聚合物/点燃元素,点燃 html 的新手。我已经开始使用 PWA 入门套件。令我惊讶的是,它不使用聚合物元素,而是使用发光元素。

我试图从https://polymer-library.polymer-project.org/3.0/docs/apps/localize应用默认的 app-localize-behaviour 。

没有成功。

将 mixinBehaviors 与 PageViewElement 一起使用似乎会中断。

最终出现以下类型的错误:

我同时看到有几个图书馆开始蓬勃发展,例如:

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

或者:

https://github.com/hamedasemi/lit-element-i18n

所以,我必须承认我现在迷失了,我应该怎么做才能使用 lit-element 和 lit-html 进行国际化或本地化。

有没有推荐的库,我错过了官方推荐的方式是什么的帖子吗?

提前谢谢你,祝你有美好的一天。