[WIP] lit cheat sheet

packages/lit-dev-content/samples/articles/lit-cheat-sheet/add-styles/index.html

@@ -0,0 +1,3 @@
+<script type="module" src="./my-element.js"></script>
+
+<my-element></my-element>

packages/lit-dev-content/samples/articles/lit-cheat-sheet/add-styles/my-element.ts

@@ -0,0 +1,18 @@
+import { html, LitElement, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+@customElement('my-element')
+export class MyElement extends LitElement {
+  render() {
+    return html`<p>I'm blue</p><div>I'm red</div>`;
+  }
+
+  static styles = css`
+    p {
+      color: blue;
+    }
+    div {
+      color: red;
+    }
+  `;
+}

packages/lit-dev-content/samples/articles/lit-cheat-sheet/add-styles/project.json

@@ -0,0 +1,8 @@
+{
+  "extends": "/samples/v3-base.json",
+  "files": {
+    "my-element.ts": {},
+    "index.html": {}
+  },
+  "previewHeight": "100px"
+}

packages/lit-dev-content/samples/articles/lit-cheat-sheet/classes/index.html

@@ -0,0 +1,3 @@
+<script type="module" src="./my-element.js"></script>
+
+<my-element></my-element>

packages/lit-dev-content/samples/articles/lit-cheat-sheet/classes/my-element.ts

@@ -0,0 +1,29 @@
+import { html, LitElement, css } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+
+@customElement('my-element')
+export class MyElement extends LitElement {
+  @state() counter = 0
+
+  firstUpdated() {
+    setInterval(() =>  this.counter += 1 , 1000);
+  }
+
+  render() {
+    const classes = {
+      red: this.counter % 2 === 0,
+      blue: this.counter % 2 === 1
+    };
+    return html`<p class=${classMap(classes)}>Hello!</p>`;
+  }
+
+  static styles = css`
+    .red {
+      color: red;
+    }
+    .blue {
+      color: blue;
+    }
+  `;
+}

packages/lit-dev-content/samples/articles/lit-cheat-sheet/classes/project.json

@@ -0,0 +1,8 @@
+{
+  "extends": "/samples/v3-base.json",
+  "files": {
+    "my-element.ts": {},
+    "index.html": {}
+  },
+  "previewHeight": "100px"
+}

packages/lit-dev-content/samples/articles/lit-cheat-sheet/conditionals/index.html

@@ -0,0 +1,3 @@
+<script type="module" src="./my-element.js"></script>
+
+<my-element></my-element>

packages/lit-dev-content/samples/articles/lit-cheat-sheet/conditionals/my-element.ts

@@ -0,0 +1,26 @@
+import { html, LitElement } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+
+@customElement('my-element')
+export class MyElement extends LitElement {
+  @state() private someBoolean = false;
+
+  render() {
+    let someText = html`<p>Some text</p>`;
+
+    if (this.someBoolean) {
+      someText = html`<p>Some other text</p>`;
+    }
+
+    return html`
+      <button
+          @click=${() => {this.someBoolean = !this.someBoolean}}>
+        Toggle template
+      </button>
+      <div>This is an inline ternary conditional</div>
+      ${this.someBoolean ? html`<p>Some other text</p>` : html`<p>Some text</p>`}
+      <div>This is a variable conditional</div>
+      ${someText}
+    `;
+  }
+}

packages/lit-dev-content/samples/articles/lit-cheat-sheet/conditionals/project.json

@@ -0,0 +1,8 @@
+{
+  "extends": "/samples/v3-base.json",
+  "files": {
+    "my-element.ts": {},
+    "index.html": {}
+  },
+  "previewHeight": "200px"
+}

packages/lit-dev-content/samples/articles/lit-cheat-sheet/css-shadow-parts/index.html

@@ -0,0 +1,24 @@
+<script type="module" src="./my-element.js"></script>
+<style>
+  .styled my-element::part(paragraph) {
+    color: yellow;
+    border-color: white;
+    padding: 8px;
+    margin: 2px;
+  }
+
+  .styled {
+    background-color: black;
+  }
+
+  div {
+    padding: 4px;
+  }
+</style>
+
+<div class="styled">
+  <my-element></my-element>
+</div>
+<div>
+  <my-element></my-element>
+</div>

packages/lit-dev-content/samples/articles/lit-cheat-sheet/css-shadow-parts/my-element.ts

@@ -0,0 +1,18 @@
+import { html, LitElement, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+@customElement('my-element')
+export class MyElement extends LitElement {
+  static styles = css`
+    p {
+      color: blue;
+      border: 1px solid black;
+      padding: 4px;
+      margin-block: 4px;
+    }
+  `;
+
+  render() {
+    return html`<p part="paragraph">This is in a shadow root!</p>`;
+  }
+}

packages/lit-dev-content/samples/articles/lit-cheat-sheet/css-shadow-parts/project.json

@@ -0,0 +1,8 @@
+{
+  "extends": "/samples/v3-base.json",
+  "files": {
+    "my-element.ts": {},
+    "index.html": {}
+  },
+  "previewHeight": "120px"
+}

packages/lit-dev-content/samples/articles/lit-cheat-sheet/data-up/game-player.ts

@@ -0,0 +1,18 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+export type ScoreEvent = CustomEvent<number>;
+
+@customElement('game-player')
+export class GamePlayer extends LitElement {
+  render() {
+    return html`
+      <button @click=${() => this.handleScore(7)}>Touchdown!</button>
+      <button @click=${() => this.handleScore(3)}>Field goal!</button>
+    `;
+  }
+
+  handleScore(points: number) {
+    this.dispatchEvent(new CustomEvent('score', { detail: points, bubbles: true }));
+  }
+}

packages/lit-dev-content/samples/articles/lit-cheat-sheet/data-up/index.html

@@ -0,0 +1,3 @@
+<script type="module" src="./score-board.js"></script>
+
+<score-board></score-board>

packages/lit-dev-content/samples/articles/lit-cheat-sheet/data-up/project.json

@@ -0,0 +1,9 @@
+{
+  "extends": "/samples/v3-base.json",
+  "files": {
+    "score-board.ts": {},
+    "game-player.ts": {},
+    "index.html": {}
+  },
+  "previewHeight": "250px"
+}

packages/lit-dev-content/samples/articles/lit-cheat-sheet/data-up/score-board.ts

@@ -0,0 +1,20 @@
+import { html, LitElement } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import './game-player.js';
+import type {ScoreEvent} from './game-player.js';
+
+@customElement('score-board')
+export class ScoreBoard extends LitElement {
+  @state() playerOneScore = 0;
+  @state() playerTwoScore = 0;
+
+  render() {
+    return html`
+      <h1>${this.playerOneScore} - ${this.playerTwoScore}</h1>
+      <h2>Player 1</h2>
+      <game-player @score=${(e: ScoreEvent) => this.playerOneScore += e.detail}></game-player>
+      <h2>Player 2</h2>
+      <game-player @score=${(e: ScoreEvent) => this.playerTwoScore += e.detail}></game-player>
+    `;
+  }
+}

packages/lit-dev-content/samples/articles/lit-cheat-sheet/define/hello-world.ts

@@ -0,0 +1,9 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+@customElement('hello-world')
+export class HelloWorld extends LitElement {
+  render() {
+    return html`<p>Hello, world!</p>`;
+  }
+}

packages/lit-dev-content/samples/articles/lit-cheat-sheet/define/index.html

@@ -0,0 +1,3 @@
+<script type="module" src="./hello-world.js"></script>
+
+<hello-world></hello-world>

packages/lit-dev-content/samples/articles/lit-cheat-sheet/define/project.json

@@ -0,0 +1,8 @@
+{
+  "extends": "/samples/v3-base.json",
+  "files": {
+    "hello-world.ts": {},
+    "index.html": {}
+  },
+  "previewHeight": "100px"
+}

packages/lit-dev-content/samples/articles/lit-cheat-sheet/event-listeners/index.html

@@ -0,0 +1,3 @@
+<script type="module" src="./my-element.js"></script>
+
+<my-element></my-element>

packages/lit-dev-content/samples/articles/lit-cheat-sheet/event-listeners/my-element.ts

@@ -0,0 +1,47 @@
+import { html, LitElement } from 'lit';
+import { customElement, query, state } from 'lit/decorators.js';
+
+@customElement('my-element')
+export class MyElement extends LitElement {
+  @state() inputValue = '';
+  @state() hasError = false;
+  @query('input') inputEl!: HTMLInputElement;
+
+  render() {
+    return html`
+      <!-- custom events -->
+      <div
+          @number-error=${this.onNumberError}
+          @number-success=${this.onNumberSuccess}>
+        <!-- native events -->
+        <input @input=${this.onInput} .value=${this.inputValue} />
+        <button @click=${this.onClick}>Clear</button>
+        ${this.hasError ? html`<b>Only positive numbers are allowed</b>` : ''}
+        <div>${this.inputValue}</div>
+      </div>
+    `;
+  }
+
+  onInput(e: InputEvent) {
+    this.inputValue = (e.target as HTMLInputElement).value;
+    if (!this.inputValue.match(/^[0-9]+$/)) {
+      this.inputEl.dispatchEvent(new Event('number-error', {bubbles: true}));
+      return;
+    }
+
+    this.inputEl.dispatchEvent(new Event('number-success', {bubbles: true}));
+  }
+
+  onClick() {
+    this.inputValue = '';
+    this.inputEl.focus();
+  }
+
+  onNumberError() {
+    this.hasError = true;
+  }
+
+  onNumberSuccess() {
+    this.hasError = false;
+  }
+}

packages/lit-dev-content/samples/articles/lit-cheat-sheet/event-listeners/project.json

@@ -0,0 +1,8 @@
+{
+  "extends": "/samples/v3-base.json",
+  "files": {
+    "my-element.ts": {},
+    "index.html": {}
+  },
+  "previewHeight": "170px"
+}

packages/lit-dev-content/samples/articles/lit-cheat-sheet/export-part/another-element.ts

@@ -0,0 +1,12 @@
+import { html, LitElement, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+@customElement('another-element')
+export class AnotherElement extends LitElement {
+  render() {
+    return html`
+      <div part="part-1">Part 1</div>
+      <div part="part-2">Part 2</div>
+    `;
+  }
+}

packages/lit-dev-content/samples/articles/lit-cheat-sheet/export-part/index.html

@@ -0,0 +1,12 @@
+<script type="module" src="./my-element.js"></script>
+<style>
+  my-element::part(part-1) {
+    color: blue;
+  }
+
+  my-element::part(part-b) {
+    color: red;
+  }
+</style>
+
+<my-element></my-element>

packages/lit-dev-content/samples/articles/lit-cheat-sheet/export-part/my-element.ts

@@ -0,0 +1,10 @@
+import { html, LitElement, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import './another-element.js';
+
+@customElement('my-element')
+export class MyElement extends LitElement {
+  render() {
+    return html`<another-element exportparts="part-1, part-2:part-b"></another-element>`;
+  }
+}

packages/lit-dev-content/samples/articles/lit-cheat-sheet/export-part/project.json

@@ -0,0 +1,9 @@
+{
+  "extends": "/samples/v3-base.json",
+  "files": {
+    "my-element.ts": {},
+    "another-element.ts": {},
+    "index.html": {}
+  },
+  "previewHeight": "120px"
+}

packages/lit-dev-content/samples/articles/lit-cheat-sheet/expressions/index.html

@@ -0,0 +1,3 @@
+<script type="module" src="./my-element.js"></script>
+
+<my-element></my-element>