我想在插槽上没有内容时显示文本。
class List extends LitElement {
public render() {
return slot.length === 0
? html`No content is available`
: html`<slot></slot>`;
}
}
在 lit-html 中，我们有一种firstUpdated()方法可以在渲染元素后运行一次性初始化。
如果您只需要在该模板中的所有子项更新后才运行某个函数，该怎么办？如果您的模板包含本机表单元素和自定义表单元素怎么办？
现在我正在做一件可怕的事情：
firstUpdated () {
super.firstUpdated()
setTimeout(() => this.onceChildrenAreUpdated(), 100)
}
当然有更好的方法吗？我意识到这很棘手，因为对于 lit-element 来说“渲染”意味着 DOM 已经完成；这并不意味着里面的所有元素都已经完成了接下来想要做的初始化。
但仍然...
在lit/lit-html/lit-element中，标准组件是TemplateResult（通常是HTMLTemplateResult），创建如下：
function renderMe(msg) {
return html`<div>Hello ${msg}!</div>`;
}
当然，该库的强大功能和效率在于，后续调用将重用相同的<div>元素，并且仅替换更改的片段。
然而，为了测试renderMe()上面的函数，能够将返回值视为标准字符串会很有帮助，例如：
assert.equal(RENDER_AS_STRING(renderMe('kimiko')), '<div>Hello kimiko!</div>');
并在测试函数如何呈现到浏览器本身之前修复函数中的任何错误。
RENDER_AS_STRING是否有类似lit 本身或测试库中的函数？我已经搜索过，但没有找到。
我不是在谈论布尔属性，比如class在没有 CSS 类的情况下不想添加空类属性的属性。
html`<span class=${hasClass ? 'my-class' : ''}></span>`
我有一个简单的检查清单，每个项目都有一个删除按钮。当我检查第一个项目然后删除它时，列表更新，删除该项目，但选中下一个项目的复选框。下一项的属性是正确的。
这是我的代码：
import { LitElement, html } from 'lit-element';
class CheckList extends LitElement {
static get properties() {
return {
items: { type: Array },
};
}
constructor() {
super();
this.items = [
{
id: 1,
text: 'Item 1',
isDone: false,
},
{
id: 2,
text: 'Item 2',
isDone: false,
},
];
this.toggleCheck = this.toggleCheck.bind(this);
this.deleteItem = this.deleteItem.bind(this);
}
render() {
return html`
<ul>
${this.items.map(item => html`
<li>
<input
type="checkbox"
value=${item.id}
?checked=${item.isDone}
@click=${this.toggleCheck}
>
${item.text}
<button @click=${this.deleteItem}>X</button>
</li>
`)}
</ul> …在lit-element大多数情况下，通过属性和属性将数据从父组件传递到子组件会导致相同的结果。
我想知道在哪种情况下我应该使用属性，而在哪种情况下使用属性？
我的浏览器在网页中显示 JavaScript 代码，而不是我的自定义元素的预期输出。网页显示：
[object Object]
自定义元素的代码很简单：
import { LitElement } from 'https://jspm.dev/lit-element@2.3.1';
import { html } from 'https://jspm.dev/lit-html@1.2.1';
export class MyFooter extends LitElement {
createRenderRoot() {
return this;
}
render(){
return html`
foobar
`;
}
}
customElements.define('my-footer', MyFooter);
我没有使用 Node、NPM 或任何构建工具，只是从 JSPM CDN 导入 ES6 模块来加载 JavaScript。
我正在构建一个桌面应用程序，用于监视某些事物并生成有关其正在监视的内容的数据。当用户想要与数据交互时，应用程序会启动一个非常简单的网络服务器。服务器提供静态页面并具有基本的 http API 来提供数据。我使用 html 作为通用 UI，用户使用浏览器查看数据并与之交互。
我想使用 Google 的 Lit 2 将我的 html/css/js 重写为基于组件的 Web 应用程序。我喜欢纯 Web 组件的想法，但我注意到 Lit 提供了一些很棒的附加功能。毫不奇怪，大多数 Lit 文档都面向具有构建步骤的更传统的 Web 环境。我想看看是否可以让我的服务器尽可能简单并避免传统的后端工具（打字稿编译、缩小等）。我想用一系列简单的 js 文件中的 Lit 组件替换当前的静态 html/css/js。
目前，我的服务器从“公共”目录为我的页面提供服务，并具有最小的 http API：
- public/
-- js/
-- css/
-- index.html
我应该如何在没有构建步骤的系统中使用 Lit？我需要与我自己的继承自 LitElement 的 javascript 类一起提供的最小 Lit 文件集是多少？
我目前正在学习如何使用 lit-element v2.0.0-rc.2 我有两个组件 app.js 和 list-items.js。在 app.js 中，我从本地存储中收集数据并将其存储在 this.todoList 中，然后我在我的 list-items.js 中调用 this.todoList 但我遇到的问题是它没有将数据作为数组传递但作为一个对象，我试图在列表项中输出该数据，当我执行 this.todoList 的 console.log 时，我得到的所有数据是 [object] 在我的
class TodoApp extends LitElement{
static get properties(){
return{
todoList: Array
}
}
constructor(){
super();
let list = JSON.parse(localStorage.getItem('todo-list'));
this.todoList = list === null ? [] : list;
}
render(){
return html `
<h1>Hello todo App</h1>
<add-item></add-item>
<list-items todoList=${this.todoList}></list-items>
`;
}
}
customElements.define('todo-app', TodoApp)
list-items.js
import { LitElement, html …我们有一个显示标题标题的自定义模板元素，我们希望扩展此组件，以便在单击按钮时也显示带有面包屑的标题标题。
示例代码：
... private getTemplateResultFromProperty: TemplateResult[] = []; ...
//This works fine:
func1(): TemplateResult {
return html`
<custom-header-template
.data=${data}'>
</custom-header-template>`
}
//Can't return concatenated header
func2(): TemplateResult {
//repeat does not work, this returns empty strings
return html`${repeat(this.getTemplateResultFromProperty, t => t)}`;
}
我们只能在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 。
有任何想法吗？
