问题标签 [lit]

lit-html 是否有任何改变，比如 React 的ref特性？例如，在以下伪代码inputRef中将是一个回调函数或一个对象{ current: ... }，其中 lit-html 可以在创建/附加输入元素时传递/设置输入元素的 HTMLElement 实例。

谢谢。

我有一个丰富的编辑器，我正在将其重写为 lit-element 自定义元素。我正在使用 Firefox（最新）进行测试。我正在尝试在自定义元素的 shadowDom 中选择内容可编辑元素（在方法中）。

在 Firefox 调试器中），this.shadowRootshadowRoot 元素看起来是正确的，但this.shadowRoot.getSelection没有定义，尽管DocumentOrShadowRoot 说shadowRoot.getSelection()是在 shadow DOM 中获取选择的正确方法。任何人都可以阐明我缺少的东西吗？

非常感谢！

我一直在学习 Polymer，这就是进来的 - 网络的未来 ( lit-element & lit-html )

我知道lit-html是用于 HTML 模板的，它采用了几种有效的技术。同时lit-element是一个轻量级的 Web 组件基类，其中包含lit-html。

问题：如果lit-element带有lit-html，我将仅将lit-element用于我的所有目的。lit-html究竟用自己的独立上下文明确地做了什么。

在开发独立的 Web 应用程序时应该选择lit-element还是lit-html ？

任何有关指导的帮助都会有很大帮助！

我想为我的项目创建一个导航组件。shell获取一个带有章节信息的 json，这些被传递给，nav-element它递归地调用自身来渲染导航树。

外壳.js

导航元素.js

问题是，configjsonPromise 作为属性传递，并且在调用时尚未解决nav-element，所以我收到错误：

Uncaught (in promise) TypeError: this.chapters is undefined

搜索所有lit-element和lit-html文档，该until指令解决了 . 中的问题shell，但没有解决nav-element. 相同的编码模式在Polymer 2（&3，尽管使用 ajax 而不是 fetch）中运行良好。有谁知道如何仅使用 lit-element 解决这个问题？

如果我有 2 个具有父子关系的 Lit 元素，例如：

调用是否connectedCallback以确定的顺序执行？

在我的测试中，看起来connectedCallback总是先调用 for parent，但我不知道我是否可以依赖这种情况。

@justin-fagnani 回答后更新

@justin-fagnani 不确定我们是否在谈论相同的内容，您写的是何时定义组件，但我的问题是关于connectedCallback的顺序。无论如何，根据您的回答，我认为如果使用 a 呈现子回调，则首先发生子回调<slot>：

点亮操场示例 1，

但是如果孩子使用 lit-html 模板呈现，则首先发生父回调：

点亮操场示例 2

我的假设正确吗？

我尝试使用 Lit 2.0 构建复合组件，但将数据作为属性传递给插槽似乎是不可能的。

如何将“扩展”属性传递给自定义元素插槽？

这是我的自定义元素：

我们有一个显示标题标题的自定义模板元素，我们希望扩展此组件以在单击按钮时也显示带有面包屑的标题标题。

示例代码：

我们只能在func2方法中返回并显示新的标头，方法是指定一个数组元素而不使用 html`` 像这样：return this.headerTemplateArray[1]但这不是我们想要做的......

错误消息：Uncaught (in promise) TypeError: Cannot read property 'split' of null at new Template (template.js:87)当我们尝试这个时：return html`${this.getTemplateResultFromProperty}`;

html`` 方法在这个方法中似乎根本不适合我们......所以我们怀疑我们使用repeat()的方式或者我们以错误的方式连接/使用 TemplateResult 可能存在问题。

有任何想法吗？

插图

我们正在尝试构建一个组件，其属性variant只能设置为"primary"or "secondary"(enum)。目前，我们只是将属性声明为字符串，但我们想知道是否有更好的方法来处理枚举？例如，我们是否应该以某种方式验证当前值是枚举的一部分？如果不是，我们应该抛出错误吗？

如果我看一下聚合物商店，我会立即被卖掉，因为我想用它作为我网上商店的开端。不仅因为它已经是一个网上商店（完整的 pwa 技术），还因为它在浏览器/移动设备上具有出色的（离线）体验，拥有适当的文档并且仍然得到维护。

但是看看聚合物主页，就会发现该项目是基于过时的聚合物版本，甚至它首先使用聚合物的事实也很奇怪：

Polymer 库处于维护模式。对于新的开发，我们推荐 Lit。

所以我的问题是，lit是否会有商店似乎依赖的丰富的 Web 组件选择？

这可能是一个愚蠢的问题，但除了在 google IO 中查看一些令人兴奋的消息之外，我跳过了聚合物

我有一个组件MyWrapper，它由左侧的流动文本和右侧的边距组成。在页边距中，有一些MarginElement组件应该与<mark>文本中的标签垂直对齐。

我想在positionMargin()渲染MyWrapper完成后运行该函数，但我知道调用relatedElement.getBoundingClientRect() margin-element本身必须被渲染。查看文档updated()似乎是最好的电话positionMargin()。然而，似乎到那<margin-element>时还没有渲染 child 。因此，getBoundingClientRect()不可用。

如何解决？