概括

我正在查看带有 Shadow DOM 和 customElements 的 TODO MVC 示例，在litRender.js中，函数中有一个奇怪的代码invalidate()：'await 0'。我想知道这段代码的目的是什么。

背景

我在谷歌上进行了一些搜索，但找不到类似的案例。我对 javascript 和 Webpack 非常陌生，所以我不知道如何调试应用程序（我尝试使用 --devtool 选项重新捆绑它，但出现错误）。

作者的解释是（抱歉翻译）：

litRender.js可以在下面找到src/libs并帮助渲染此应用程序的每个组件。每个组件都litRender使用class SomeComponent extends LitRender (HTMLElement). 如果内容更新了多次，则时间代码旨在通过不每次渲染来帮助提高性能，它会收集渲染时间。在扩展它的组件上调用 this.invalidate 将保留对组件中定义的渲染函数的调用。

正如上面作者提到的，invalidate()shadow DOM是用来渲染的。下面是作者的使用方法。

主要问题

我想知道 'await 0' 的litRender.js真正作用是什么。

我开始尝试 lit-html 和 lit-elements，玩弄它，现在我遇到了无法找到如何在线发布此类代码的问题。从来没有在在线平台上使用过 Node-js 包，只使用了它的一些代码。通常我构建普通的 php/html 模板，但我想试试这个。

在本地构建一些有效的测试用例。但是到处搜索以了解如何将这种代码在线发布到互联网上。我正在使用具有许多选项（例如 SSH）的共享主机，例如但无法找到如何使其正常工作，它不能像在我的服务器上运行 npm install 一样简单，对吗？

[Writing Templates] 下的主要文档提供了以下用于绑定事件处理程序的示例lit-html。

html`<button @click=${(e) => console.log('clicked')}>Click Me</button>`

添加这个带有默认值render和html函数导入并调用渲染的简单页面，但是似乎没有渲染按钮。如果删除@click事件绑定，则呈现按钮。一定有我遗漏的东西或库中的严重错误。

版本：0.10.2

以下链接与事件处理程序绑定的工作方式有关lit-html：

• https://polymer.github.io/lit-html/guide/writing-templates.html
• https://github.com/Polymer/lit-html/issues/399
• https://github.com/Polymer/lit-html/issues/145
• https://github.com/Polymer/lit-html/issues/273
• https://github.com/Polymer/lit-html/issues/146

我正在尝试在点亮元素中使用 mdc 组件（例如 mdc-textfield）。看起来我必须将 css 和 js 文件导入到元素中。

我很不确定如何将 css 导入到 lit-element 中。

顺便说一句，我在没有任何预处理器或编译器的情况下使用polymer serve。

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

//father component
render(){
    return html`
        ${repeat(movements, movement => movement.id, (movement, index)=> html`
            <movement
            .id=${movement.id} .description=${movement.description} .amount=${movement.amount} .balance=${movement.balance}>
            </movement>
            <hr>
        `)}
    `    
}

//child component
render(){
    return html`
        <dt>${this.id}</dt>
        <dl>${this.description}</dl>
        <dl>${this.amount}</dl>
        <dl>${this.balance}</dl>
    `;
}

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

//child component
render(){
    return html`
    <dd>
        <slot name="id"></slot>
        <slot name="description"></slot>
        <slot name="amount"></slot>
        <slot name="balance"></slot>
    </dd>
    `;
}

//father component
render(){
    return html`
        ${repeat(movements, movement=>movement.id, (movement, index)=>html`
            <movement>
                <dt slot="id"> ${movement.id} </dt> …

感谢您的阅读。

我是Polymer / lit-element，lit-html的新手。我已经开始使用PWA入门套件。令我惊讶的是，它不使用聚合物元素，而是使用了亮元素。

我尝试从https://polymer-library.polymer-project.org/3.0/docs/apps/localize应用默认的app-localize-behaviour 。

没有成功。

将MixinBehaviors与PageViewElement一起使用似乎已中断。

mixinBehaviors([AppLocalizeBehavior], PageViewElement) 

最终遇到以下类型的错误：

TypeError: this.constructor._classProperties is undefined

我看到同时有几个图书馆开始蓬勃发展，例如：

https://github.com/andreasbm/lit-translate

要么：

https://github.com/hamedasemi/lit-element-i18n

因此，我必须承认我现在迷路了，该如何使用lit-element和lit-html进行国际化或本地化。

有没有推荐的图书馆，我错过了有关官方推荐方式的帖子吗？

在此先感谢您，祝您度过愉快的一天。

我在使用 Material-Web-Component 构建自定义 Lit-Element 组件时确实遇到了问题。即使我确实给了他们必要的 sass/css 类，它们也会堆叠在一起。

我确实想使用顶栏和可扩展抽屉。但内容似乎总是呈现在左上角：/

问题： https: //i.stack.imgur.com/RzVg1.jpg

谁能帮我？:/

应用程序：

import { css, customElement, html, LitElement, property, unsafeCSS } from 'lit-element';
import { router } from '@fhms-wi/router';

const componentCSS = require('./app.component.scss');

@customElement('app-root')
class AppComponent extends LitElement {
  static styles = css`${unsafeCSS(componentCSS)}`;

  @property()
  title = 'Ticket-System';

  @property()
  headerItems = [
    { title: 'Anmelden', icon: 'sign-in', routePath: 'users/sign-in' },
    { title: 'Konto erstellen', icon: 'sign-up', routePath: 'users/sign-up' }
  ];

  @property()
  drawerItems = [
    { title: 'Tickets', icon: 'tickets', routePath: …

来自反应背景，我想知道 lit-element 中的 state 和 setState 等效项在哪里，我在 lit-element 文档中找不到任何有用的内容。是私有财产吗？或者requestUpdate？

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

// that #ref pseudo-attribute is fictional
html`<div><input #ref={inputRef}/></div>`

谢谢。

<example name="One"></example>
<example name="Two"></example>
<example name="Three"></example>

接下来的渲染看起来像这样：

<example name="Four"></example>
<example name="Three"></example>

LitElement 将删除最后一个元素并使用新属性更新前两个元素。

如何更改此设置，以便 LitElement 删除除第一个位置之外的所有元素name="three"，并在第一个位置创建一个新元素name="Four"？

使用 React，这可以通过给它们一个关键属性来完成。我想使用 LitElement 达到相同的结果。

<example key="1" name="One"></example>
<example key="2" name="Two"></example>
<example key="3" name="Three"></example>