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

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

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

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

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

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

我知道我可以lit-html使用<script type="module">say 中的标签导入index.html，但我无法访问html或render从单独的 JS 脚本（例如index.js）。这目前可能吗？

我决定通过以下方式尝试 lit-html：

我多次（从各种来源）听说 lit-html 的大小只有 2 或 3KB，但仅导入html和渲染导出导致我的 webpack 增长超过 13KB。这比预期的要大得多。

此外，最终的 dist 包中嵌入了 7 次：

这有点过分了。

我认为 webpack 4 应该会自动删除评论。我怎样才能使它与我的所有其他代码紧密地最小化（其中注释被自动删除并且所有内容都被放在一行中）？

如果它太侵入性，我可以不用 lit-html。

我们正在使用 Lit Element，我们的组件文件变得相当大，因为我们必须在 .js 文件中编写样式和 html。有没有办法将它们拆分为单独的文件，然后将它们导入到我们的组件中？这样做的最佳方法是什么？HTML 和 CSS 尤其使我们的工作流程变得困难，因为我们的文件变得过于臃肿。

更新：Supersharp 的建议帮助我将 CSS 和 html 模板分开，但我在将 html 模板与指定属性绑定时遇到问题。我有一个服务文件，它正在对我指定的文件发出 XML 请求，我将它们导入到我的组件文件中。这是我的组件：

这是我的 html 文件：

这是我用来制作 XMLHttpRequest 的服务文件：

我正在使用 lit html 在我的项目中创建自定义 Web 组件。我的问题是，当我尝试在 Web 组件中使用 CSS 目标选择器时，它不会被触发，但是当我在没有自定义组件的情况下执行此操作时，代码可以完美运行。有人可以解释为什么会发生这种情况以及解决这个问题的方法是什么？这是我的代码：

目标测试元素.js：

具有以下样式：

目标测试元素.css：

我在 index.html 中创建了一个链接：

index.html（带有自定义组件）：

这是有效的：

index.html（没有自定义组件）

为了

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

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

我越来越

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

我究竟做错了什么？

NB 单引号 = 反引号

更新

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

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

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

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

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

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

概括

我正在查看带有 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 和各种路由/存储组合进行一些探索，并遇到了这种奇怪的行为。我使用了 create-lit-app stackblitz。

我有一个从 store.state 对象上的数组填充的菜单。这些链接更新商店的 currentPage 属性。

导航是自侦听商店并在匹配商店的 currentPage 时设置 [active] 属性。

点击事件更新商店。这一切都很好。

在另一个元素（hello-world）中，我有一个选择框。选择框由 store.state 对象上的相同数组填充。如果选项与 currentPage 属性匹配，则设置 [selected] 属性。这也很好用。

我还放了几个 p 标签，它们显示 currentPage 的理智...或精神错乱...尚不确定。

现在，当我返回使用菜单时，状态会发生变化，并且菜单 [active] 正在工作，另一个 (hello-world) 元素中的 p 标签更新也是如此。但是，选择元素不会更新。我可以使用 select 来更新状态，但绑定到 select 似乎已经停止工作。

在谷歌搜索类似问题但仍然没有奶酪后，我尝试了 super.update() 和 this.update() 。我想知道这是否是我的丑陋反模式的功能，或者这可能是一个 RC 错误。

我希望能够从应用程序中的任何位置更新状态并更新所有订阅者。