问题标签 [lit-element]

我正在尝试在我的 React 项目中使用 lit-element 组件，我想将回调函数从 React 传递给 lit-element 组件，但没有运气。

我尝试了几种不同的方法，例如更改属性类型，并将函数作为字符串传递，但它们都不起作用。

点燃元素组件代码：

反应侧代码：

我在组件的渲染部分放了一个断点，我可以看到“bar”值被正确传递，但是“clickHandler”的值是未定义的。

有没有人知道如何将函数从 React 传递给 lit-element？

谢谢！

我正在玩 LitElement，尝试制作一些简单的自定义元素。

这是我的 app.js：

这是我制作的表格：

但是，当我按“提交”时，只发送来自just_input输入的数据，而不是来自我的自定义输入：

为什么我的自定义输入值没有被提交？

我有一个 lit-element, inner-element，插入另一个 lit-element, outer-element。为了灵活性，可以使用 CSSouter-element设置宽度和高度。inner-element需要知道它的inner-element宽度和高度来确定如何绘制它的 SVG 内容。

如何inner-element跨浏览器可靠地学习自己的宽度和高度？

我在这里有一个活生生的例子： https ://stackblitz.com/edit/7pkfkx-j9rnx9

我正在updated()根据这个非常有用的信息来获取宽度/高度： https ://github.com/Polymer/lit-element/issues/507#issuecomment-459546838

在 Chrome 中，该示例运行良好 - SVG 显示“宽度 = 150 高度 = 100”。但在 Edge 中，我得到“宽度 = 300 高度 = 303.8”。请注意，即使在 Edge 中，inner-element最终也具有正确的宽度和高度 (150x100)，它似乎只是在updated()被调用后才到达那里。

假设我有这个 HTML：

inner-element并且outer-element是从 LitElement 扩展而来的自定义元素。

是否有规定的顺序将定义这些元素的文件包含到我的脚本中？

例如
A。

与
B。

我注意到包含的顺序决定了元素的呈现顺序。也就是说， A 导致render()在内部被调用，然后在外部被调用。而 B 导致render()在外部被调用，然后在内部被调用。

此处提供了一个现场示例，您可以在其中切换顺序并在控制台中查看结果。

我的（天真的）直觉是渲染顺序将由 HTML 页面的结构决定。相反，它似乎是由 Javascript 包含的顺序决定的。这让我想知道：被认为是正确的订单吗？

我们有一个新的基于 Lit 元素的项目，我们正在考虑自动化一些事情，比如动态导入。我们已经通过实现两个主要部分来做到这一点：

• 一个观察者脚本检查对 ui 组件的更改（在本地服务时）并将其写入新文件component-tag: () => import('path')
• 一个标签检查器，它在所有组件阴影 DOM 中添加一个突变观察，以观察是否添加了新标签并动态（如果尚未）导入其类定义（从观察者脚本生成的对象中获取）

现在主要的问题是：

1. 你觉得这个功能怎么样？
2. 这会有多高的效率？（现在app很小，性能还不错）
3. 如果考虑大量 DOM 更改，性能会下降。如何防止这种情况？一个好的过滤可能吗？
4. 有没有人尝试过这种方法？在生产？

谢谢

我正在为我的应用程序使用@polymer/lit-element。最近我这样做npm install 了导致以下错误

当我检查我的 node_modules 时，lit-element 文件夹已从@polymer 文件夹中删除。有什么方法可以找回我的@polymer/lit-element？（除了我必须将整个应用程序迁移到听起来很乏味的 lit-element 之外）

我试图在 Polymer 中实现 jsGrid，但被困在需要将目标网格 DOM 元素获取到jsGrid()函数的地方。无法$("#jsGrid")在聚合物中产生等效物。

我已经使用该import命令在聚合物组件文件本身中导入了所有必需的源文件。

// 渲染函数

// 渲染网格方法

当我使用$("#jsGrid"). 这可能是因为当我替换 为 或替换时，jsGrid()方法无法获取具有所需属性的 DOM 元素$("#jsGrid")this.shadowRoot.querySelector("#jsGrid")document.getElementById("jsGrid")

提前致谢！

我正在使用 Web 组件（特别是lit-element），并且我想在几个不同的组件中共享一个通用样式表。我想要实现的是在我的 JS 组件中导入已编译的 CSS 文件时获取它的 url，以便我可以将它作为外部样式表添加到标记中。

组件.js

所以我希望styleUrl成为已编译 css 的 url。

目前我的 webpack 配置看起来像下面的 Webpack 配置

我正在尝试将 Lit-Element 与由 SVG 元素包裹的单个插槽一起使用。

但似乎<slot>位于<svg>不接受渲染给定的 SVG 元素。

什么在自定义组件中不起作用：

这是一个示例：https ://stackblitz.com/edit/wy6bhj?file=index.html

知道为什么吗？有什么选择吗？

2019-02-18 评论

Justin Fagnani 建议使用 a<foreignObject>将 HTML（即插槽）与 SVG 混合。不幸的是，这不起作用，因为在插槽中它仍然是 SVG 元素。

2019-02-19 更新

使用在函数内部表达的 JavaScript render()，我试图this.children在模板中迭代和添加子项。现在，使用检查器，它在 DOM 中正确显示，但 SVG 元素没有呈现任何内容。我迷路了，不明白为什么没有渲染圆圈。

https://stackblitz.com/edit/wy6bhj-hne7wl?file=my-element.js

2019-02-19 UPADTE2

我终于明白，我不可能按照最初想要的方式做到这一点。我选择按原样传递 SVG 容器。

那么<my-element>用途

计算事物。瞧！

侦听 Lit 元素中隐藏属性更改的正确方法是什么？

例如这样的元素：

<my-element ?hidden="${this.activeTab != 1}"></my-element>

我试图定义updated(changedProperties)，但这不会触发隐藏的更改。

请注意问题的背景：
我在此元素中使用传单，似乎_onResize()在更改可见性后我必须调用传单容器元素。