[article] Create a lit cheat sheet

Author: e111077

package-lock.json

@@ -180,14 +180,15 @@
     "rollup-plugin-minify-html-literals": "^1.2.6",
     "rollup-plugin-summary": "^1.2.3",
     "rollup-plugin-terser": "^7.0.2",
+    "signal-utils": "^0.21.1",
     "slugify": "^1.3.6"
   },
   "dependencies": {
     "@lit-labs/context": "^0.4.1",
     "@lit-labs/motion": "^1.0.1",
     "@lit-labs/react": "^1.0.8",
-    "@lit-labs/task": "^3.0.2",
     "@lit-labs/signals": "^0.1.1",
+    "@lit-labs/task": "^3.0.2",
     "@lit/context": "^1.1.0",
     "@lit/localize": "^0.10.0",
     "@lit/react": "^1.0.0 || 1.0.0-pre.0",

packages/lit-dev-content/package.json

@@ -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/index.html

@@ -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/my-element.ts

@@ -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/add-styles/project.json

@@ -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/bind-tag-name/index.html

@@ -0,0 +1,30 @@
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { html as staticHTML, StaticValue } from 'lit/static-html.js';
+
+@customElement('input-or-textfield')
+export class MyElement extends LitElement {
+  // attribute is false because this is a value that can't be serialized to an
+  // HTML attribute
+  @property({ attribute: false }) tagLiteral: StaticValue|null = null;
+  @property() value = '';
+
+  render() {
+    return html`
+      ${
+        staticHTML`
+          <${this.tagLiteral}
+            @input=${this.#onInput}
+            .value=${this.value}></${this.tagLiteral}>
+        `
+      }
+      <div>
+        The value of the input is: ${this.value}
+      </div>
+    `;
+  }
+
+  #onInput(e: InputEvent) {
+    this.value = (e.target as (HTMLInputElement | HTMLTextAreaElement)).value;
+  }
+}

packages/lit-dev-content/samples/articles/lit-cheat-sheet/bind-tag-name/input-or-textfield.ts

@@ -0,0 +1,50 @@
+import { css, html, LitElement } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { literal } from 'lit/static-html.js';
+import './input-or-textfield.js';
+
+@customElement('my-element')
+export class MyElement extends LitElement {
+  @state() tagLiteral = literal`input`;
+  render() {
+    return html`
+      <!-- /* playground-fold */ -->
+      <fieldset>
+        <legend>Choose a tag to render:</legend>
+        <div>
+          <label>
+            <input
+                type="radio"
+                name="selection"
+                @change=${this.#onChange}
+                value="input"
+                checked>
+            input
+          </label>
+        </div>
+        <div>
+          <label>
+            <input
+                type="radio"
+                name="selection"
+                @change=${this.#onChange}
+                value="textarea">
+            textarea
+          </label>
+        </div>
+      </fieldset>
+      <!-- /* playground-fold-end */ -->
+      <input-or-textfield
+          value="this is the default value"
+          .tagLiteral=${this.tagLiteral}>
+      </input-or-textfield>
+    `;
+  }
+
+  #onChange(e: InputEvent) {
+    const target = e.target as HTMLInputElement;
+    this.tagLiteral = target.value === 'input' ? literal`input` : literal`textarea`;
+  }
+
+  static styles = css`/* playground-fold */:host { font-family: sans-serif; } :host > * { margin-block: .5em; }/* playground-fold-end */`;
+}

packages/lit-dev-content/samples/articles/lit-cheat-sheet/bind-tag-name/my-element.ts

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

packages/lit-dev-content/samples/articles/lit-cheat-sheet/bind-tag-name/project.json

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