问题标签 [lit-element]

我正在学习如何将 Three.js 集成到 Polymer 的 Lit-Element。我当前的问题是我需要引用一个 div 元素来附加 Three 的 Renderer 元素。通常是这样完成的：

不幸的是，我无法找到如何从 constructor()/firstUpdate() 引用到渲染函数中声明的 div。你会怎么做？

这是我目前最好的结果： 渲染器元素偏离目标

这是获得此结果的代码： HTML：

Javascript：

任何建议都将受到欢迎。

我有一个问题，将一些值从父组件传递给子组件并显示该值的最佳方式是什么，因为我尝试使用属性和插槽传递值，并且两种方式都有效。属性：我有一个移动列表，并使用父组件中的repeatlit-html（和html渲染方法）来创建 n 个子组件，并为其提供属性值。

插槽：我有一个移动列表，并使用父组件中的repeatlit-html（和html渲染方法）来创建 n 个子组件，并给出在子组件中声明的插槽中的值

哪个是最好的方法？我什么时候必须使用一个和另一个？

github.com/Polymer/lit-element上的文档描述了生命周期，如果某些 lit-element的属性发生更改。但是，如果元素的 DOM 内容发生更改，我似乎找不到任何关于生命周期的文档。

所以假设我有一些嵌套的 DOM 结构，我的最外层元素应该根据 DOM 内容显示一些东西。为简单起见，下面的示例将仅显示给定类型的子元素的数量。

现在在某个时候，我的应用程序插入了一个新的嵌套元素（单击test下面的按钮）。此时我想更新显示的计数。

从我的测试来看，在这种情况下似乎render()没有再次调用，也没有updated()。

我需要监听哪个事件或者我需要实现哪个函数来识别这样的变化？

我目前唯一的解决方法是requestUpdate()在 DOM 更新后手动使用，但我认为此类更改应由 lit-element 本身处理。

我尝试在 lit-elements 中使用外部 js 文件来获取初始值，但如果我这样做了，它就不再是通过属性绑定来改变了。如果我在没有外部存储文件的情况下编写它，只需使用它。范围并在构造函数中声明它，一切正常。但作为外部文件不是...？：/

但为什么？

我有两个文件 menu.js：

和 b store.js

谢谢你的任何想法=）

我正在研究 Lit element 和 Material Design Component(MDC)。

对于 MDC，我必须像入门所说的那样使用 webpack-dev-server。

但是对于 Lit 元素，我必须使用Polyemr cli，因为 Polymer Cli 可以按名称导入库。

像这样。

所以我正在寻找可以使用 webpack 按名称导入聚合物的方法。或者我如何使用 Polymer cli 使用 MDC。

你能给我一些建议吗？

我正在使用 LitElement 创建自定义 Web 组件。我对此很陌生，并决定尝试制作图像幻灯片。我使用W3Schools 幻灯片作为参考 ，同时将其修改为 LitElement。问题是，当我尝试使用 document.getElementByClassName 时，我什么也没得到。我对这个问题很熟悉，因为我正在使用 Shadow DOM，所以我将其更改为 this.shadowRoot.getElementsByClassName。不幸的是，我被告知我要使用的不是函数。使用 LitElement 和 shadow dom 时如何按类名获取元素？如果您想查看我的组件的外观，代码如下：

我克隆了一个存储库，该存储库专注于使用 ES6 和 Polymer 3 创建待办事项应用程序。我正在尝试实现一个按钮，该按钮在单击时将包含字符串的背景颜色变为绿色。我已经尝试过这样做，但我一直未能获得预期的结果。

示例代码：

如果有人帮助我，我将永远感激不尽。我创建了两个 JSFiddle 链接，它们显示了我迄今为止所处理的代码：

链接 1：https : //jsfiddle.net/r2mxzp1c/（查看第 42-49 行）

链接 2：https ://jsfiddle.net/zt0x5u94/ （检查第 13 行和第 22-24 行）

我正在尝试使用 lit-html 创建一个使用 Google Maps API 的自定义元素。怎么可能让它一起工作？这是我到目前为止所拥有的：

地图元素.css：

地图元素.js：

输出只是带有地图 ID 的 div 的占位符，我没有收到任何错误。

这是我尝试在我的元素中使用的代码的参考： https ://developers.google.com/maps/documentation/javascript/adding-a-google-map

为了

当我在浏览器中检查输出时，而不是

选中<输入类型=复选框选中>

我越来越

检查<input type=checkbox <!--{{lit-5238200558676867}}--==$0">

我究竟做错了什么？

NB 单引号 = 反引号

更新

我已经通过创建一个元素来解决它，但我猜有一个更简单的语法

我正在尝试覆盖 lit-element 中的设置属性。我正在使用 Typescript，并且在自定义元素中使用装饰器设置值，尽管当我尝试通过在 index.html 中设置不同的属性来覆盖元素时，它不会覆盖......

当我 console.log 属性时，它只有在 lit-element 中设置的属性。

我将 mixinBehaviours、IronA11yKeysBehavior 和 GestureEventListeners 与 LitElement 一起使用。

使用普通 javascript 表示法时，该属性会覆盖，但如果可能的话，我希望尽可能保留装饰器。

我希望 index.html 中的方向可以覆盖打字稿装饰器属性...