问题标签 [lit-html]

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

lit-element - 当插槽在 lit-html 中没有子节点时做一些事情

我想在插槽上没有内容时显示文本。

0 投票
1 回答
448 浏览

javascript - 创建一个从原生元素派生的元素——继承?作品?

我意识到这不是一个支持论坛;我正试图将其作为文档请求偷偷溜进去。

简短的问题:在所有方面创建与原生元素完全相同的元素的推荐方法是什么?(提供附加功能,是的,但 100% 兼容替代原生产品)

长版:

我需要扩展原生<button>元素。目标是创建一个“超级按钮”,它可以 100% 替代原生 HTML 按钮(但显然提供了消费者可以使用或不使用的额外功能)。请注意,我在这里完全不考虑样式。所以...

方式一:从Button继承

在 Polymer 中,很明显不能从原生元素继承。我认为情况仍然如此?

方式2:撰写

按照这种方式,我<button> 在 shadow DOM 中有一个,并反映了所有属性和属性(意味着对 my-button 的任何更改都会反映到buttonshadow DOM 中的元素上)。[编辑:元素不需要反映所有事件,这要归功于 shadow DOM 对事件的重新定位]

对于“方式 2”,这意味着大量的属性复制等。这可以通过 lit-element 轻松完成(所有属性的行为都是相同的,并且适用于相当长的列表)。但是……在我开始之前,我是不是进入了一个兔子洞?

我可以想到很多可能出错的事情......例如,我是否应该费心反映tabindex?form由于按钮将位于影子根中,该属性甚至会起作用吗?等等等等。

所以...有没有一种简单的方法可以复制特定 HTML 元素的 100% 功能而不必反映每个单独的属性?它会起作用吗?

0 投票
1 回答
74 浏览

javascript - 如何访问shadowroot中的值

我想知道如何访问 shadowroot 中的值,

0 投票
1 回答
122 浏览

lit-html - 在纸张输入中使用具有属性的条件

我正在使用带有paper-input聚合物 3 元素的 lit-html。我想创建一个条件,其中某些属性paper-input按条件放入 -attributes 中。

请注意,这似乎与纸张输入无关。使用简单输入会发生不同的错误

我期望根据条件设置占位符或值。

使用如下输入字段时:

DOM 是这样的: DOM 并且看起来像这样:渲染结果

我在我相信我遵循的文档中找到了这些相关规则:

我这样做并不成功。有人知道路吗?我当然可以将它们分开,但我想要一种简洁的方式。

0 投票
2 回答
4005 浏览

javascript - 自定义 litelement 选择未正确重新渲染

我用 LitElement 创建了一个自定义选择组件:

我在创建元素时传入options,selectedonChange作为属性。在第一次渲染时,一切正常。呈现所有选项,并且选择的值反映在选择中。但是,如果我更改selected它似乎不会更新所选选项。如果我使用 dev-tools 检查元素,则selected属性设置正确,但如果我开始查询元素的值,它会返回错误的值。

我尝试的一件事是id在呈现选择后通过开发工具向元素添加一个属性。如果我随后更改selectedon的属性CustomSelect,则该id属性会保留在 DOM 中,这告诉我选择没有重新渲染,这就是导致问题的原因,以及为什么它在第一次渲染时起作用。

我已经尝试在选择元素上设置valueandselectedIndex属性,但它似乎并没有以有意义的方式影响任何东西。

我到处都记录了(从 render() 和 options-map 开始)并且所有输入值都是正确的。

0 投票
1 回答
1439 浏览

javascript - 如何在litelement中将checked属性设置为radio

我想知道如何使用 litelement 将选中的设置为单选按钮。我有一个对象,并且为每个对象选项创建单选按钮。

例如,id=SG创建了两个单选按钮,如果没有选中,则将银行设置为默认选中,否则将相应的选定单选值设置为选中。

我被困在了litelement中。

0 投票
1 回答
1515 浏览

lit-element - 有没有办法让 LitHtml 属性可选?

我不是在谈论布尔属性,class如果没有 CSS 类,你不想添加一个空的类属性。

0 投票
1 回答
47 浏览

javascript - 自定义组件的问题

我正在学习 lit-element,lit-html。我要创建的组件是自定义选择组件。我在填充下拉值和选项时遇到问题。我正在寻求下一步我应该做什么的指导,看看我是否走在正确的轨道上。

我尝试执行重复函数来遍历选项数组,但它不起作用。

这是我的选择组件的代码。

这是我的 app.js 的代码

我正在寻找的结果是一个由我作为属性的数组填充的选择下拉组件。现在,我对下拉菜单一无所获,就像它甚至没有通过数组重复以提供 select 选项一样。

任何帮助都会很棒。

0 投票
1 回答
2579 浏览

javascript - LitElement not updating checkbox in list

I have a simple check list with a delete button for each item. When I check the first item and then delete it, the list updates, deleting the item, but the check box of the next item is checked. The properties of the next item are correct.

Here's my code:

https://stackblitz.com/edit/typescript-fylwxb

0 投票
1 回答
151 浏览

paper-elements - Lit-html 中纸质下拉菜单的事件监听器

我在一个 lit-html 项目中,并使用谷歌的一些材料设计元素。纸-xxx。

我正在努力从paper-dropdown-menu. 我已经实现了它,如下所示:

在渲染()

首次更新()

我不完全确定是否iron-select会是正确的事件来听,但似乎是这样的:

应用程序可以在选择选项和取消选择来源时聆听iron-selectiron-deselect事件反应:GitHub线:63

iron-select当所选项目发生变化时用于监听是否正确?我做错了什么?