diff --git a/content/2-templating/3-loop/lit/colors-list.js b/content/2-templating/3-loop/lit/colors-list.js
index b0efbace..dc083d57 100644
--- a/content/2-templating/3-loop/lit/colors-list.js
+++ b/content/2-templating/3-loop/lit/colors-list.js
@@ -1,5 +1,6 @@
import { LitElement, html } from "lit";
import { customElement } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
@customElement("colors-list")
export class ColorsList extends LitElement {
@@ -8,7 +9,11 @@ export class ColorsList extends LitElement {
render() {
return html`
- ${this.colors.map((color) => html`- ${color}
`)}
+ ${repeat(
+ this.colors,
+ (color) => color,
+ (color) => html`- ${color}
`
+ )}
`;
}
diff --git a/content/4-component-composition/1-props/lit/x-app.js b/content/4-component-composition/1-props/lit/x-app.js
index 5d222e4d..eed0f5b1 100644
--- a/content/4-component-composition/1-props/lit/x-app.js
+++ b/content/4-component-composition/1-props/lit/x-app.js
@@ -10,7 +10,7 @@ export class XApp extends LitElement {
name="John"
age="20"
.favouriteColors=${["green", "blue", "red"]}
- isavailable
+ isAvailable
>`;
}
}
diff --git a/content/6-form-input/4-select/lit/color-select.js b/content/6-form-input/4-select/lit/color-select.js
index 911668ab..19ee7bf2 100644
--- a/content/6-form-input/4-select/lit/color-select.js
+++ b/content/6-form-input/4-select/lit/color-select.js
@@ -1,5 +1,6 @@
import { LitElement, html } from "lit";
import { customElement, state } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat";
@customElement("color-select")
export class ColorSelect extends LitElement {
@@ -20,7 +21,9 @@ export class ColorSelect extends LitElement {
render() {
return html`