问题标签 [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 投票
2 回答
714 浏览

polymer - 如何使用 mixin 为包含在 LitElement 自定义组件中的纸卡 (Polymer 3) 设置样式

我使用 Polymer 3 中的 LitElement 创建了一个自定义元素。我在该自定义元素中包含了一个纸卡元素。我想使用已经定义的样式混合来设置该纸卡的样式,但我不能。例如,paper-card定义这个 mixin:

https://www.webcomponents.org/element/@polymer/paper-card/elements/paper-card

我尝试了几乎所有方法来在我的自定义元素中使用该 mixin,但不起作用。例如:

我还导入了 mixin polyfill 但什么也没有

我需要帮助 谢谢

0 投票
2 回答
940 浏览

javascript - 在 light DOM 中渲染一个 lit-element 以与 stripe.js 一起使用

Stripe.js 还不支持 shadow-dom。使用 Lit-elements 的createRenderRoot() (documentation) , (source) 您可以使用return this;. 但是,这仅在您createRenderRoot()在所有父元素中实现时才有效。有没有解决的办法?

这是我的 stackblitz示例。它之所以有效,是因为我调用createRenderRoot(){ return this; }了每个元素。

0 投票
4 回答
4414 浏览

typescript - 如何修复`没有'new'就不能调用类构造函数LitElement`?

我正在使用聚合物中的 lit-element 建立一个新项目,并且构建设置包括使用 parcel。我也在使用打字稿来编写我的代码。

我首先初始化 npm 并添加了所有必要的依赖项:

现在,当我运行包裹以 index.html 开始时,其中包括:

我收到一条错误消息:

根据其他人的建议,我尝试将 tsconfig 目标设置为“es2016”,但这并不能解决错误。

我的元素.ts

0 投票
1 回答
387 浏览

polymer - 将属性指定为 `type: Array` 似乎无法正确解析字符串属性值

更新:在https://github.com/Polymer/lit-element/issues/411提交了一个错误

鉴于指南中的信息,我无法为属性实现默认和自定义转换器。在当前版本(0.6.5)中,它说您可以将类型分配给Array属性,它将自动从属性的字符串值解析为 JSON,但情况似乎并非如此,如代码示例。

这是问题的说明。在控制台中,它应该报告一个包含三个元素的数组,但它返回一个包含一个元素的数组,即包含属性值的字符串。render 方法的结果也只显示了一个<p>包含单个字符串的元素。

我还尝试通过提供 a 来修改示例converter,但这似乎也没有被调用。我究竟做错了什么?

0 投票
1 回答
35 浏览

github-pages - github.io 上的文件不会更新,即使在两天后和清理缓存之后也是如此

两天前,我更新了我网站的代码https://danipani.github.io/,索引文件(index.html)已经改变,但是其他文件像https://danipani.github.io/node_modules/@ bit/danipani.projects.global.button-3d/index.js不更新。我试图删除存储库但没有运气,一切都像以前一样。

这是我的存储库:

0 投票
1 回答
1982 浏览

javascript - 何时调用 lit-element 属性“hasChanged”?

我有一个简单的发光元素,其属性具有hasChanged功能。

对于显示的结果,是否替换BOOLEANtrue或都没有关系false。两者都显示explicit

但是日志输出不同:

  • 你只得到true一行:
  • 你会得到false两行:

' false' 日志输出是我所期望的。使用 lit-element 直到 0.6.5 您也可以通过返回来获得相同的两行true

这是 lit-element 0.7.0 中引入的错误还是新行为有效?如果它是有效的,为什么没有通过true从第一个调用返回来完成第二个调用。

0 投票
1 回答
8498 浏览

polymer-3.x - lit-element 将数据从一个组件传递到另一个组件

我目前正在学习如何使用 lit-element v2.0.0-rc.2 我有两个组件 app.js 和 list-items.js。在 app.js 中,我从本地存储中收集数据并将其存储在 this.todoList 中,然后在我的 list-items.js 中调用 this.todoList 但我遇到的问题是它没有将数据作为数组传递但作为一个对象,我试图在列表项中输出这些数据,当我执行 this.todoList 的 console.log 时,我得到的都是我的 [object]

  • 标签它用标签的点渲染出来,但没有数据。我想知道是否可以帮助我理解为什么会发生这种情况。这是我的代码 app.js ''' import {LitElement, html} from 'lit-element'; 导入'./add-item'; 导入'./list-items';

    我正在寻找的结果是将存储在本地存储中的数据列在我的渲染页面上。

  • 0 投票
    1 回答
    619 浏览

    polymer-3.x - Lit-Element - 无法从对象中获取项目 ID

    我正在学习 lit-element 并遇到了一个小问题我正在尝试设置从列表中删除项目的能力,但是当我使用控制台测试它时,我无法获取我的项目的 id 它是未定义的。日志。我有三个组件 add-item.js 将项目添加到工作正常的列表中。app.js 是处理页面自动刷新以及页面主渲染的主要组件,这是我为 addItem 和 removeItem 设置事件侦听器的地方。然后我有 todo-item 组件,这是我试图获取删除功能的 ID 的对象。我对我在这里做错了什么感到茫然,并希望有人可以看看并指出我正确的方向,这是迄今为止的代码。

    我正在寻找该项目的 ID,以便我可以将其从列表中删除,例如,如果我有 5 个项目,一、二、三、四、五,然后单击按钮以删除应该删除的第三个项目并且列表更新了剩余的项目..现在它正在删除这些项目,但它是列表中的最后一个,这是我不希望发生的。

    期待在这方面的一些帮助,以便我可以推进项目谢谢。

    0 投票
    3 回答
    422 浏览

    javascript - 如何在 Polymer/lit-element 项目中使用箭头功能

    我正在学习 Polymer/lit-element 并尝试构建一个非常简单的演示项目。我正在尝试在类中使用 es6 箭头函数(getButtonStyle 函数),但它返回了这个错误

    SyntaxError:此实验性语法需要启用解析器插件:'classProperties'

    如何在 lit-element 项目中使用箭头功能?我错过了什么?谢谢!

    我尝试在 .babelrc 中安装一些 babel 扩展包和设置插件,但没有成功(当然,因为它没有使用 babel)。也尝试谷歌它,但没有看到任何人有同样的问题。

    任何想法将不胜感激。谢谢你。

    0 投票
    1 回答
    314 浏览

    npm - 如何发布 litElement

    我们目前正在尝试创建一些可以在不同项目之间共享的 Web 元素(Angular/React/Jquery...)

    litElement 似乎是该任务的理想人选。然而,我们遇到了这个问题:

    我们如何使我们正在开发的组件的更改/更新可供几十个消费者使用(如果他们愿意的话)。我听说 Polymer 有某种 repo,比如 WebComponents.org。我们已经在我们的项目中使用 NPM

    那么 litElement 可以发布到哪里以便于版本/更新管理?