${typeof item}: ${item}
`
+ );
+ }
+}
\ No newline at end of file
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/custom-attribute-converter/project.json b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/custom-attribute-converter/project.json
new file mode 100644
index 000000000..9c791c2a3
--- /dev/null
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/custom-attribute-converter/project.json
@@ -0,0 +1,8 @@
+{
+ "extends": "/samples/v3-base.json",
+ "files": {
+ "my-element.ts": {},
+ "index.html": {}
+ },
+ "previewHeight": "200px"
+}
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/data-up/game-player.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/data-up/game-player.ts
new file mode 100644
index 000000000..fdfdab6a8
--- /dev/null
+++ b/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${this.playerOneScore} - ${this.playerTwoScore}
+Player 1
+Player 2
+Hello, world!
`; + } +} \ No newline at end of file diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/define/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/define/index.html new file mode 100644 index 000000000..c53974764 --- /dev/null +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/define/index.html @@ -0,0 +1,3 @@ + + +
+
+ `;
+ }
+
+ #onSlotchange() {
+ // get the array of assigned elements and pick the first one
+ const firstInput = this.inputs[0];
+
+ if (firstInput !== this.#lastInput) {
+ this.#clearListeners();
+ }
+
+ if (!firstInput) {
+ return;
+ }
+
+ this.#lastInput = firstInput;
+
+ this.#attachListeners(firstInput);
+ }
+
+ #attachListeners(input: HTMLInputElement) {
+ input.addEventListener('focus', this.#onInputFocus);
+ input.addEventListener('blur', this.#onInputBlur);
+ }
+
+ #onInputFocus = () => {
+ this.inputFocused = true;
+ // get the array of assigned elements and pick the first one
+ const input = this.inputs[0];
+
+ input?.animate?.([
+ { 'transform': 'scale(1)', easing: 'ease-out' },
+ { 'transform': 'scale(2)', easing: 'ease-in' },
+ { 'transform': 'scale(1)' }
+ ],
+ 1000);
+ };
+
+ #onInputBlur = () => {
+ this.inputFocused = false;
+ const input = this.inputs[0];
+
+ input?.animate?.([
+ { 'transform': 'scale(1)', easing: 'ease-out' },
+ { 'transform': 'scale(.75)', easing: 'ease-in' },
+ { 'transform': 'scale(1)' }
+ ],
+ 1000);
+ };
+
+ #clearListeners() {
+ if (this.#lastInput) {
+ this.#lastInput.removeEventListener('focus', this.#onInputFocus);
+ this.#lastInput.removeEventListener('blur', this.#onInputBlur);
+ }
+
+ this.#lastInput = null;
+ }
+
+ static styles = css`/* playground-fold */
+ canvas {
+ border: 1px solid black;
+ }
+
+ label {
+ display: block;
+ margin-block-start: 1em;
+ }
+ /* playground-fold-end */`;
+}
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-qae/project.json b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-qae/project.json
new file mode 100644
index 000000000..5d8939af1
--- /dev/null
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-qae/project.json
@@ -0,0 +1,8 @@
+{
+ "extends": "/samples/v3-base.json",
+ "files": {
+ "my-pretty-input.ts": {},
+ "index.html": {}
+ },
+ "previewHeight": "230px"
+}
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-query-async/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-query-async/index.html
new file mode 100644
index 000000000..57a0c9aca
--- /dev/null
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-query-async/index.html
@@ -0,0 +1,3 @@
+
+
+
+
+
+
+
+ `;
+ }
+
+ onClick() {
+ this.inputValue = '';
+ this.inputEl.focus();
+ }
+}
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/event-listeners/project.json b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/event-listeners/project.json
new file mode 100644
index 000000000..9936a8af2
--- /dev/null
+++ b/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"
+}
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/export-part/another-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/export-part/another-element.ts
new file mode 100644
index 000000000..05456dd5d
--- /dev/null
+++ b/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`
+ ${this.inputValue}
+ Part 1
+ Part 2
+ `;
+ }
+}
\ No newline at end of file
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/export-part/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/export-part/index.html
new file mode 100644
index 000000000..09a583b4e
--- /dev/null
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/export-part/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+ Renders to:
+
+
+ ${this.htmlText}
+
+
+
+
+
+
+ `;
+ }
+
+ updated(changed: PropertyValuesSomething in this component was focused
` : ''} + ${this.clickedOutside ? html`Something was clicked OUTSIDE this component
` : ''} + `; + } + + connectedCallback(): void { + super.connectedCallback(); + + // Only want to do this in the browser since the server doesn't have the + // concept of events or document. + if (!isServer) { + document.addEventListener('click', this.onDocumentClick); + this.addEventListener('focusin', this.onFocusin); + this.addEventListener('focusout', this.onFocusout); + } + } + + disconnectedCallback() { + super.disconnectedCallback(); + + if (!isServer) { + // clean up to prevent memory leaks + document.removeEventListener('click', this.onDocumentClick); + // Garbage should also take care of removing these, but it's good practice + this.removeEventListener('focusin', this.onFocusin); + this.removeEventListener('focusout', this.onFocusout); + } + } + + // Should be an arrow function and not a class method to ensure `this` is + // bound correctly. + private onFocusin = () => { + this.focusedWithin = true; + }; + + private onFocusout = () => { + this.focusedWithin = false; + }; + + private onDocumentClick = (e: MouseEvent) => { + const path = e.composedPath(); + this.clickedOutside = !path.includes(this); + }; +} \ No newline at end of file diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/host-global-listeners/project.json b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/host-global-listeners/project.json new file mode 100644 index 000000000..875a71aaf --- /dev/null +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/host-global-listeners/project.json @@ -0,0 +1,8 @@ +{ + "extends": "/samples/v3-base.json", + "files": { + "my-element.ts": {}, + "index.html": {} + }, + "previewHeight": "120px" +} diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/import-attributes/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/import-attributes/index.html new file mode 100644 index 000000000..57a0c9aca --- /dev/null +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/import-attributes/index.html @@ -0,0 +1,3 @@ + + +
+ This should be red!
+
+ `;
+ }
+}
+
+customElements.define('my-element', MyElement);
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/import-attributes/project.json b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/import-attributes/project.json
new file mode 100644
index 000000000..f9ed532bd
--- /dev/null
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/import-attributes/project.json
@@ -0,0 +1,9 @@
+{
+ "extends": "/samples/v3-base.json",
+ "files": {
+ "my-element.js": {},
+ "styles.css": {},
+ "index.html": {}
+ },
+ "previewHeight": "100px"
+}
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/import-attributes/styles.css b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/import-attributes/styles.css
new file mode 100644
index 000000000..538fa56f4
--- /dev/null
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/import-attributes/styles.css
@@ -0,0 +1,3 @@
+div {
+ color: red;
+}
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/import/another-component.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/import/another-component.ts
new file mode 100644
index 000000000..375269012
--- /dev/null
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/import/another-component.ts
@@ -0,0 +1,9 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+@customElement('another-component')
+export class AnotherComponent extends LitElement {
+ render() {
+ return html`(I'm another component.)`;
+ }
+}
\ No newline at end of file
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/import/hello-world.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/import/hello-world.ts
new file mode 100644
index 000000000..de5f2dccf
--- /dev/null
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/import/hello-world.ts
@@ -0,0 +1,10 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import './another-component.js'
+
+@customElement('hello-world')
+export class HelloWorld extends LitElement {
+ render() {
+ return html`Hello, world!
+
+
+
\ No newline at end of file
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/inheriting-custom-props/my-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/inheriting-custom-props/my-element.ts
new file mode 100644
index 000000000..f6ed8d2d6
--- /dev/null
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/inheriting-custom-props/my-element.ts
@@ -0,0 +1,17 @@
+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: var(--sys-color-on-background, blue);
+ border: 1px solid var(--sys-color-outline, black);
+ padding: var(--comp-my-element-padding, 4px);
+ margin-block: var(--comp-my-element-margin, 4px);
+ }
+ `;
+ render() {
+ return html`This is in a shadow root!
`; + } +} \ No newline at end of file diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/inheriting-custom-props/project.json b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/inheriting-custom-props/project.json new file mode 100644 index 000000000..875a71aaf --- /dev/null +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/inheriting-custom-props/project.json @@ -0,0 +1,8 @@ +{ + "extends": "/samples/v3-base.json", + "files": { + "my-element.ts": {}, + "index.html": {} + }, + "previewHeight": "120px" +} diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/pass-data-down/id-card.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/pass-data-down/id-card.ts new file mode 100644 index 000000000..b7a427e95 --- /dev/null +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/pass-data-down/id-card.ts @@ -0,0 +1,20 @@ +import { html, LitElement } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; + +@customElement('id-card') +export class IdCard extends LitElement { + @property() name = ''; + @property({ type: Number }) age = 0; + @property({ type: Boolean }) programmer = false; + + render() { + return html` +${this.name}
+Age: ${this.age}
+ + `; + } +} \ No newline at end of file diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/pass-data-down/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/pass-data-down/index.html new file mode 100644 index 000000000..d5f0f24d5 --- /dev/null +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/pass-data-down/index.html @@ -0,0 +1,3 @@ + + +${this.name}
+Age: ${this.age}
+ + + `; + } +} \ No newline at end of file diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reactive-properties/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reactive-properties/index.html new file mode 100644 index 000000000..d5f0f24d5 --- /dev/null +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reactive-properties/index.html @@ -0,0 +1,3 @@ + + +
+ ${min ? `${min}:${sec}.${hun}` : `${sec}.${hun}`}
+
+
+ ${this._isPlaying ?
+ html`` :
+ html``
+ }
+
+
+ `;
+ }
+
+ start() {
+ this._isPlaying = true;
+ this.lastTick = Date.now();
+ this._tick();
+ }
+
+ pause() {
+ this._isPlaying = false;
+ }
+
+ reset() {
+ this._duration = 0;
+ }
+
+ private _tick() {
+ if (this._isPlaying) {
+ const now = Date.now();
+ this._duration += Math.max(0, now - this.lastTick);
+ this.lastTick = now;
+ requestAnimationFrame(() => this._tick());
+ }
+ }
+
+ connectedCallback() {
+ super.connectedCallback();
+ this.reset();
+ }
+}
+/* playground-fold */
+function pad(pad: unknown, val: number) {
+ return pad ? String(val).padStart(2, '0') : val;
+}
+/* playground-fold-end */
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reactive-state/project.json b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reactive-state/project.json
new file mode 100644
index 000000000..816404c3d
--- /dev/null
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reactive-state/project.json
@@ -0,0 +1,8 @@
+{
+ "extends": "/samples/v3-base.json",
+ "files": {
+ "my-element.ts": {},
+ "index.html": {}
+ },
+ "previewHeight": "100px"
+}
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/render-lists/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/render-lists/index.html
new file mode 100644
index 000000000..57a0c9aca
--- /dev/null
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/render-lists/index.html
@@ -0,0 +1,3 @@
+
+
+A list of names that include the letter "e" (rendering an Array)
+-
+ ${this.names
+ .filter((name) => name.match(/e/i))
+ .map((name) => html`
- ${name} `)} +
My unique fruits (rendering a Set)
+-
+ ${map(this.items, (item) => html`
- ${item} `)} +
Things to do today:
+ + +-
+ ${repeat(
+ this.tasks,
+ (task) => task.id,
+ (task) => html`
+
- + + + ` + )} +
+
+
+
+
+
+ I'm also a p, but I'm not blue.
\ No newline at end of file diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/scope-styles/my-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/scope-styles/my-element.ts new file mode 100644 index 000000000..65dae1c97 --- /dev/null +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/scope-styles/my-element.ts @@ -0,0 +1,15 @@ +import { html, LitElement, css } from 'lit'; +import { customElement } from 'lit/decorators.js'; + +@customElement('my-element') +export class MyElement extends LitElement { + render() { + return html`I'm blue
`; + } + + static styles = css` + p { + color: blue; + } + `; +} \ No newline at end of file diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/scope-styles/project.json b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/scope-styles/project.json new file mode 100644 index 000000000..816404c3d --- /dev/null +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/scope-styles/project.json @@ -0,0 +1,8 @@ +{ + "extends": "/samples/v3-base.json", + "files": { + "my-element.ts": {}, + "index.html": {} + }, + "previewHeight": "100px" +} diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/shadow-root-options/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/shadow-root-options/index.html new file mode 100644 index 000000000..57a0c9aca --- /dev/null +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/shadow-root-options/index.html @@ -0,0 +1,3 @@ + + +
+ Calling focus on this element will focus the first focusable element in
+ its shadow root thanks to delegatesFocus: true. Just try
+ clicking on this text and see how the input is focused instead.
+
Title
+Subtitle
++ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus soluta atque + blanditiis maxime ex veritatis accusantium, ea sequi deleniti expedita + recusandae totam obcaecati ipsum dicta cum et. Consequuntur, autem + consectetur. +
+
+
+ `;
+ }
+
+ static styles = css`
+ /* playground-fold */
+ :host {
+ display: flex;
+ width: 400px;
+ border: 1px solid black;
+ border-radius: 1em;
+ overflow: hidden;
+ font-family: sans-serif;
+ }
+
+ slot::slotted(*) {
+ margin: 0;
+ }
+
+ #vertical, #content {
+ display: flex;
+ flex-direction: column;
+ }
+
+ #content {
+ padding: 1em;
+ }
+
+ #image {
+ aspect-ratio: 16/9;
+ object-fit: cover;
+ object-position: center center;
+ overflow: hidden;
+ }
+
+ [name="title"]::slotted(*) {
+ font-size: 1.5em;
+ font-weight: bold;
+ margin-block-end: 0.5em;
+ }
+
+ [name="subtitle"]::slotted(*) {
+ font-size: 1em;
+ color: gray;
+ margin-block-end: 1em;
+ }
+ /* playground-fold-end */
+ `;
+}
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/shadow-slotting/project.json b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/shadow-slotting/project.json
new file mode 100644
index 000000000..554ec45e5
--- /dev/null
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/shadow-slotting/project.json
@@ -0,0 +1,8 @@
+{
+ "extends": "/samples/v3-base.json",
+ "files": {
+ "my-card.ts": {},
+ "index.html": {}
+ },
+ "previewHeight": "480px"
+}
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/share-styles-import/another-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/share-styles-import/another-element.ts
new file mode 100644
index 000000000..8da15f22c
--- /dev/null
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/share-styles-import/another-element.ts
@@ -0,0 +1,14 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import {sharedStyles} from './shared-styles.js';
+
+@customElement('another-element')
+export class AnotherElement extends LitElement {
+ static styles = sharedStyles
+
+ render() {
+ return html`
+ This
+
+
+
+ <code> element shares styles with the <my-element> element.
+ `;
+ }
+}
\ No newline at end of file
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/share-styles-import/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/share-styles-import/index.html
new file mode 100644
index 000000000..239e0f7ef
--- /dev/null
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/share-styles-import/index.html
@@ -0,0 +1,5 @@
+
+
+
+<code> element shares styles with the <another-element> element.
+ I am overriding the <code> element in this <p> tag.
The count is ${count.get()}
+ + `; + } + + #onClick() { + count.set(count.get() + 1); + } +} diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signal-watcher/project.json b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signal-watcher/project.json new file mode 100644 index 000000000..b9827ff53 --- /dev/null +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signal-watcher/project.json @@ -0,0 +1,8 @@ +{ + "extends": "/samples/v3-base.json", + "files": { + "my-element.ts": {}, + "index.html": {} + }, + "previewHeight": "90px" +} diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-computed/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-computed/index.html new file mode 100644 index 000000000..57a0c9aca --- /dev/null +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-computed/index.html @@ -0,0 +1,3 @@ + + ++ The count is ${watch(count)}. Double the count is + ${watch(this.#doubleCount)} +
+ + `; + } + + #onClick() { + count.set(count.get() + 1); + } +} + diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-computed/project.json b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-computed/project.json new file mode 100644 index 000000000..b9827ff53 --- /dev/null +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-computed/project.json @@ -0,0 +1,8 @@ +{ + "extends": "/samples/v3-base.json", + "files": { + "my-element.ts": {}, + "index.html": {} + }, + "previewHeight": "90px" +} diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-effect/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-effect/index.html new file mode 100644 index 000000000..57a0c9aca --- /dev/null +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-effect/index.html @@ -0,0 +1,3 @@ + + ++ The count is: ${count.get()} + +
++ Try changing this reactive property: ${this.reactiveProp} + +
+ `; + } + + #onClick() { + count.set(count.get() + 1); + } +} diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-effect/project.json b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-effect/project.json new file mode 100644 index 000000000..b9827ff53 --- /dev/null +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-effect/project.json @@ -0,0 +1,8 @@ +{ + "extends": "/samples/v3-base.json", + "files": { + "my-element.ts": {}, + "index.html": {} + }, + "previewHeight": "90px" +} diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-html-tag/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-html-tag/index.html new file mode 100644 index 000000000..57a0c9aca --- /dev/null +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-html-tag/index.html @@ -0,0 +1,3 @@ + + +The count is ${count}
+ + `; + } + + #onClick() { + count.set(count.get() + 1); + } +} diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-html-tag/project.json b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-html-tag/project.json new file mode 100644 index 000000000..b9827ff53 --- /dev/null +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-html-tag/project.json @@ -0,0 +1,8 @@ +{ + "extends": "/samples/v3-base.json", + "files": { + "my-element.ts": {}, + "index.html": {} + }, + "previewHeight": "90px" +} diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-share/game-player.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-share/game-player.ts new file mode 100644 index 000000000..25d76e11e --- /dev/null +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-share/game-player.ts @@ -0,0 +1,23 @@ +import { html, LitElement } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; +import { playerOneScore, playerTwoScore } from './game-state.js'; + +export type ScoreEvent = CustomEvent${playerOneScore} - ${playerTwoScore}
+Player 1
+Player 2
+The count is ${watch(count)}
+ + `; + } + + #onClick() { + count.set(count.get() + 1); + } +} + diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-watch-directive/project.json b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-watch-directive/project.json new file mode 100644 index 000000000..b9827ff53 --- /dev/null +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-watch-directive/project.json @@ -0,0 +1,8 @@ +{ + "extends": "/samples/v3-base.json", + "files": { + "my-element.ts": {}, + "index.html": {} + }, + "previewHeight": "90px" +} diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/styling-slotted/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/styling-slotted/index.html new file mode 100644 index 000000000..758ab401d --- /dev/null +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/styling-slotted/index.html @@ -0,0 +1,20 @@ + + + +
+ This is a direct child and should have a solid border styled with
+ ;
+ },
+ () => [this.pokemonId]
+ );
+
+
+ render() {
+ return html`
+ ${this.#renderControls()}
+ ${
+ this.#pokemonTask.render({
+ initial: () => html`"` attribute.
+
+Shadow Parts can pierce individual shadow roots allowing you to set arbitrary styles on a given node using the `::part()` pseudo-element.
+
+{% playground-ide "articles/lit-cheat-sheet/css-shadow-parts", true %}
+
+**Related Documentation & Topics:**
+
+- [How to style your Lit elements](https://www.youtube.com/watch?v=Xt7blcyuw5s) (video)
+- [CSS Shadow Parts](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_shadow_parts) (external)
+- [`::part`](https://developer.mozilla.org/en-US/docs/Web/CSS/::part) (external)
+
+### Exporting a CSS Shadow Part
+
+CSS Shadow part names can only apply to the targeted element. You need to use `exportparts` to expose a shadow part in nested shadow roots.
+
+You can export multiple parts by separating them with a comma (`,`).
+
+You can also rename parts with a colon (`:`).
+
+{% playground-ide "articles/lit-cheat-sheet/export-part", true %}
+
+**Related Documentation & Topics:**
+
+- [`exportparts`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts) (external)
+- [How to style your Lit elements](https://www.youtube.com/watch?v=Xt7blcyuw5s) (video)
+- [CSS Shadow Parts](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_shadow_parts) (external)
+- [`::part`](https://developer.mozilla.org/en-US/docs/Web/CSS/::part) (external)
+
+### Importing Styles as a String
+
+In some rare cases, you may receive trusted styles as a string and may need to
+apply them to a component. You can do this with native, constructable
+stylesheets.
+
+{% playground-ide "articles/lit-cheat-sheet/constructable-stylesheets", true %}
+
+{% aside "negative" %}
+
+Be careful when using constructable stylesheets as it can open your application
+to privacy and security vulnerabilities.
+
+Only use constructable stylesheets with trusted sources and strings.
+
+{% endaside %}
+
+**Related Documentation & Topics:**
+
+- [Constructable Stylesheets](https://web.dev/articles/constructable-stylesheets) (external)
+- [`CSSResultOrNative`](/docs/api/styles/#CSSResultOrNative)
+
+### Importing CSS Files into Components
+
+In some cases, you may want to import styles in the form of a CSS files rather
+than a Lit CSSResult or a string. Currently there
+
+{% aside "warn" %}
+
+This is a new feature recently added to some browsers.
+
+Please check [browser compatibility on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import/with#browser_compatibility).
+
+Due to the newness of this feature, the following example uses JavaScript and
+may not work in all in certain browsers.
+
+{% endaside %}
+
+{% playground-ide "articles/lit-cheat-sheet/import-attributes", true %}
+
+{% aside "positive" %}
+
+Some better-supported alternatives to this approach may include:
+
+- A build tool plugin that transforms your CSS imports into Lit `CSSResult`
+ similar to
+ [`rollup-plugin-lit-css`](https://www.npmjs.com/package/rollup-plugin-lit-css)
+- Using a bundler tool to transform your CSS imports into strings and then using
+ Constructable Stylesheets
+- Using a `` in your template, but this will
+ cause FOUC.
+
+{% endaside %}
+
+**Related Documentation & Topics:**
+
+- [Import Attributes](https://v8.dev/features/import-attributes) (external)
+- [Import Attributes Browser Compatiblity Table](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import/with#browser_compatibility) (external)
+- [Proposal Import Attributes](https://github.com/tc39/proposal-import-attributes) (external)
+- [Import JSON, CSS and more with import attributes](https://fullystacked.net/import-attributes/) (external)
+- [Using CSS Module Scripts to import stylesheets](https://web.dev/articles/constructable-stylesheets) (external)
+ - **NOTE:** The syntax of the import assertions proposal in this article was
+ deprecated in favor of import attribtues which uses `with` rather than
+ `assert`.
+- Build Tools
+ - [`rollup-plugin-lit-css`](https://www.npmjs.com/package/rollup-plugin-lit-css)
+ - [`esbuild-plugin-lit-css`](https://www.npmjs.com/package/esbuild-plugin-lit-css)
+ - [`lit-css-loader`](https://www.npmjs.com/package/lit-css-loader)
+ - [`vite-plugin-lit-css`](https://www.npmjs.com/package/vite-plugin-lit-css)
+
+## Shadow DOM
+
+### What does Shadow DOM do?
+
+- Scopes styles to the shadow root
+- Scopes the DOM to the shadow root
+ - Can't be targeted by querySelector calls from outside the shadow root
+- Enables slotting content with the `` element
+- Exposes an API for CSS with CSS Custom Properties and CSS Shadow Parts
+
+**Related Documentation & Topics:**
+
+- [DOM Encapsulation](/docs/components/rendering/#dom-encapsulation)
+- [Working with Shadow DOM](/docs/components/shadow-dom/)
+- [How to style your Lit elements](https://www.youtube.com/watch?v=Xt7blcyuw5s) (video)
+
+### Turn off Shadow DOM
+
+You can turn off the Shadow DOM by overriding the `createRenderRoot()` method and setting the render root to the element itself.
+
+{% playground-ide "articles/lit-cheat-sheet/turn-off-shadow-dom", true %}
+
+{% aside "warn" %}
+
+By turning off shadow DOM you lose the benefits of encapsulation, DOM scoping, and `` elements.
+
+Since the Shadow root no longer exists, Lit will no longer handle the `static styles` property for you. You must decide how to handle your styles.
+
+{% endaside %}
+
+**Related Documentation & Topics:**
+
+- [Implementing `createRenderRoot()`](/docs/components/shadow-dom/#implementing-createrenderroot)
+
+### Slotting Components Into Another Component's Shadow DOM
+
+You can slot a component into another component's shadow DOM by using the
+`` element. If you're familiar with React, this is similar to
+`props.children`.
+
+{% playground-ide "articles/lit-cheat-sheet/shadow-slotting", true %}
+
+**Related Documentation & Topics:**
+
+- [Slots](/docs/components/shadow-dom/#slots)
+- [Working With Shadow DOM](/docs/components/shadow-dom/)
+- [How to style your Lit elements](https://www.youtube.com/watch?v=Xt7blcyuw5s) (video)
+- [How to Build a Carousel in Lit](https://www.youtube.com/watch?v=2RftvylEtrE) (video)
+- [Build an Animated Carousel Tutorial](/tutorials/carousel)
+
+### Styling a Slotted Component
+
+Slotted components use the browser's native Shadow DOM projection features. In
+order to keep strong, performant, and encapsulated styles, the browser vendors
+have placed restrictions on styling slotted content.
+
+You can style directly-slotted elements with the `::slotted()` pseudo-selector.
+If you would like to style children of slotted content, you should use CSS
+Custom Properties.
+
+{% playground-ide "articles/lit-cheat-sheet/styling-slotted", true %}
+
+**Related Documentation & Topics:**
+
+- [Styling the Component's Children](/docs/components/styles/#slotted)
+- [Build an animated carousel element tutorial](/tutorials/carousel)
+- [How to style your Lit elements](https://www.youtube.com/watch?v=Xt7blcyuw5s) (video)
+- [How to build a Carousel in Lit](https://www.youtube.com/watch?v=2RftvylEtrE&t) (video)
+
+### Turning on `delegatesFocus` and other shadow root options
+
+You can set shadow root options passed to `Element.attachShadow()` by overriding the static `shadowRootOptions` member.
+
+{% playground-ide "articles/lit-cheat-sheet/shadow-root-options", true %}
+
+**Related Documentation & Topics:**
+
+- [Setting `shadowRootOptions`](/docs/components/shadow-dom/#setting-shadowrootoptions)
+- [`Element.prototype.attachShadow():options`](https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow#options) (external)
+- [`delegatesFocus`](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus) (external)
+
+## Properties and State
+
+### Reactive Properties
+
+Reactive properties are properties within a component that automatically trigger
+a re-render when they change. These properties can be set externally, from
+outside the component's boundary.
+
+They also handle attributes by accepting them and converting them into
+corresponding properties.
+
+You can define a reactive property with the ` element which allows you to project content from
+outside the shadow root into the shadow root. You can access slotted content
+using the ` - MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) (external)
+
+## Signals
+
+Signals are data structures for managing observable state. They either store a
+value or compute a value based on other signals. The Lit project tries to
+conform to the
+[Signals standard proposal](https://github.com/tc39/proposal-signals) via the
+[`@lit-labs/signals` package](https://www.npmjs.com/package/@lit-labs/signals)
+in order to provide a cross-framework standard for reactive state management
+solution.
+
+### Common Signal Setup (SignalWatcher)
+
+The most common way to use signals in Lit is to use the `SignalWatcher` mixin.
+When an accessed signal value changes, `SignalWatcher` will trigger the Lit
+element update lifecycle. This includes signals read in `shouldUpdate()`,
+`willUpdate()`, `update()`, `render()`, `updated()`, `firstUpdated()`, and
+reactive controller's `hostUpdate()` and `hostUpdated()`.
+
+{% playground-ide "articles/lit-cheat-sheet/signal-watcher", true %}
+
+**Related Documentation & Topics:**
+
+- [Signals docs](/docs/data/signals/)
+- [Lit lifecycle](/docs/components/lifecycle/)
+- [`@lit-labs/signals` npm package](https://www.npmjs.com/package/@lit-labs/signals) (external)
+- [Signals standards proposal](https://github.com/tc39/proposal-signals) (external)
+
+### Pinpoint Signal Updates (watch directive)
+
+The `watch()` directive allows you to pinpoint exactly where a signal should
+update the DOM without re-triggering the lit-html re-render. What this means is
+that using the `watch()` directive will not trigger the `render()` unless it
+triggers the change of a traditional Lit Reactive Property.
+
+{% playground-ide "articles/lit-cheat-sheet/signals-watch-directive", true %}
+
+{% aside "warn" "no-header" %}
+
+This may be a helpful way to optimize performance in your Lit components, but
+*always measure for your use case*.
+
+{% endaside %}
+
+**Related Documentation & Topics:**
+
+- [The `watch()` directive](https://www.npmjs.com/package/@lit-labs/signals#watch-directive) (external)
+- [Reactive Properties](#reactive-properties)
+- [Signals docs](/docs/data/signals/)
+- [Lit lifecycle](/docs/components/lifecycle/)
+- [`@lit-labs/signals` npm package](https://www.npmjs.com/package/@lit-labs/signals) (external)
+- [Signals standards proposal](https://github.com/tc39/proposal-signals) (external)
+
+### Signals HTML Template Tag
+
+The `@lit-labs/signals` package also provides an `html` template tag that can
+be used in place of Lit's default `html` tag and automatically wraps any signals
+in the template with a `watch()` directive.
+
+{% playground-ide "articles/lit-cheat-sheet/signals-html-tag", true %}
+
+**Related Documentation & Topics:**
+
+- [The `html` tag and `withWatch()`](https://www.npmjs.com/package/@lit-labs/signals#html-tag-and-withwatch) (external)
+- [the `SignalWatcher()` mixin](#common-signal-setup-(signalwatcher))
+- [The `watch()` directive](#pinpoint-signal-updates-(watch-directive))
+
+### Make Signal Values from Other Signals (computed)
+
+Sometimes you need to derive a value from other signals. You can do this with
+a `computed()` signal.
+
+{% playground-ide "articles/lit-cheat-sheet/signals-computed", true %}
+
+**Related Documentation & Topics:**
+
+- [Signals docs](/docs/data/signals/)
+- [`@lit-labs/signals` npm package](https://www.npmjs.com/package/@lit-labs/signals) (external)
+
+### Reacting to Signal Changes (effects)
+
+The `@lit-labs/signals` package currently does not provide any signal-specific
+effects, but signal changes used in `render()` or the Lit lifecycle will trigger
+the Lit lifecycle like any other Reactive Property. You can trigger effects in
+the Lit lifecycle by using signals in the same way you would use Reactive
+Properties.
+
+{% playground-ide "articles/lit-cheat-sheet/signals-effect", true %}
+
+{% aside "warn" %}
+
+Effects implemented in this way are not compatible with the `watch()` directive.
+
+Because we're calling `State.prototype.get()` in the Lit lifecycle, the
+`SignalWatcher` mixin will counteract the pinpoint update behavior of that the
+`watch()` directive and trigger a full re-render.
+
+{% endaside %}
+
+{% aside "info" "no-header" %}
+
+To create a signal effect outside a Lit component, the signal-polyfill package
+provides a
+[simple, example implementation](https://github.com/proposal-signals/signal-polyfill?tab=readme-ov-file#creating-a-simple-effect)
+of an `effect()` compatible with Lit's signal implementation.
+
+{% endaside %}
+
+**Related Documentation & Topics:**
+
+- [Signals docs](/docs/data/signals/)
+- [`@lit-labs/signals` npm package](https://www.npmjs.com/package/@lit-labs/signals) (external)
+- [The `changedProperties` map](/docs/components/lifecycle/#changed-properties)
+- [signal-polyfill – Creating a simple effect](https://github.com/proposal-signals/signal-polyfill?tab=readme-ov-file#creating-a-simple-effect) (external)
+
+### Sharing Global, Reactive Data Across Components
+
+If your component needs to share a global state with another component and you
+do not need your component to be compatible with Lit's declarative event
+listener syntax, you can use a shared signal to share state across components.
+
+Here is the scoreboard example from the
+[Dispatch Events Up](#dispatch-events-up) section, but using shared signals.
+
+{% playground-ide "articles/lit-cheat-sheet/signals-share", true %}
+
+**Related Documentation & Topics:**
+
+- [Signals docs](/docs/data/signals/)
+- [`@lit-labs/signals` npm package](https://www.npmjs.com/package/@lit-labs/signals) (external)
+- [Data Flow and State Management](#data-flow-and-state-management)
diff --git a/packages/lit-dev-content/site/css/articles.css b/packages/lit-dev-content/site/css/articles.css
index 125fcd0ff..6ece73108 100644
--- a/packages/lit-dev-content/site/css/articles.css
+++ b/packages/lit-dev-content/site/css/articles.css
@@ -9,6 +9,13 @@ article {
padding-block-start: 0;
}
+/*
+ this is not visible in articles, but the scrollbar is on FF.
+*/
+#docsNavWrapper {
+ overflow-y: auto;
+}
+
/* ------------------------------------
* Header Section
* ------------------------------------ */
diff --git a/packages/lit-dev-content/site/css/docs.css b/packages/lit-dev-content/site/css/docs.css
index e72209812..dc94c35bc 100644
--- a/packages/lit-dev-content/site/css/docs.css
+++ b/packages/lit-dev-content/site/css/docs.css
@@ -137,11 +137,11 @@ litdev-example[filename] {
}
body[code-language-preference="ts"] litdev-example {
- --litdev-example-editor-height: calc(var(--litdev-example-editor-lines-ts) * 22px + 22px);
+ --litdev-example-editor-height: calc(var(--litdev-example-editor-lines-ts) * 22.4px + 22px);
}
body[code-language-preference="js"] litdev-example {
- --litdev-example-editor-height: calc(var(--litdev-example-editor-lines-js) * 22px + 22px);
+ --litdev-example-editor-height: calc(var(--litdev-example-editor-lines-js) * 22.4px + 22px);
}
litdev-example {
diff --git a/packages/lit-dev-content/site/docs/v3/templates/expressions.md b/packages/lit-dev-content/site/docs/v3/templates/expressions.md
index 474b918dc..5896b1b7b 100644
--- a/packages/lit-dev-content/site/docs/v3/templates/expressions.md
+++ b/packages/lit-dev-content/site/docs/v3/templates/expressions.md
@@ -245,7 +245,7 @@ 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
literal 0
HcmV?d00001
diff --git a/packages/lit-dev-content/site/images/articles/lit_cheat_sheet_2x.jpg b/packages/lit-dev-content/site/images/articles/lit_cheat_sheet_2x.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..e8d88d89d8cb1a532a77b69f745744de23d4951a
GIT binary patch
literal 21484
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
Z`#@o{LzZ3L2v82CeMVp7sk+7W{{d(&h;IM@
literal 0
HcmV?d00001
diff --git a/packages/lit-dev-content/src/components/litdev-example.ts b/packages/lit-dev-content/src/components/litdev-example.ts
index 705d58556..6dbc2d222 100644
--- a/packages/lit-dev-content/src/components/litdev-example.ts
+++ b/packages/lit-dev-content/src/components/litdev-example.ts
@@ -5,7 +5,7 @@
*/
import {LitElement, html, css, nothing} from 'lit';
-import {property} from 'lit/decorators.js';
+import {property, state} from 'lit/decorators.js';
import {styleMap} from 'lit/directives/style-map.js';
import {ifDefined} from 'lit/directives/if-defined.js';
import {
@@ -110,6 +110,23 @@ export class LitDevExample extends LitElement {
@property()
project?: string;
+ /**
+ * Whether to load the project on intersection with the viewport.
+ */
+ @property({type: Boolean})
+ lazy = false;
+
+ /**
+ * Whether or not to load the project. Setting Lazy to true will re-initialize
+ * this value to `false`. We would want to do this so that we do not load the
+ * large TS worker file until the user has scrolled to the example. This is
+ * something we would want to do if we want to have the server cache the
+ * worker. Otherwise every example on the page would load the worker at the
+ * same time and none of them would be cached.
+ */
+ @state()
+ private loadProject = true;
+
/**
* Name of file in project to display.
* If no file is provided, we show the tab-bar with all project files.
@@ -143,6 +160,12 @@ export class LitDevExample extends LitElement {
this.requestUpdate();
};
+ willUpdate() {
+ if (!this.hasUpdated) {
+ this.loadProject = !this.lazy;
+ }
+ }
+
render() {
if (!this.project) {
return nothing;
@@ -162,17 +185,23 @@ export class LitDevExample extends LitElement {
mode === 'ts' ? this.filename : this.filename?.replace(/.ts$/, '.js');
return html`
-
-
+ ${this.loadProject
+ ? // We need to conditionally render this because playground-project
+ // will load its serviceworker on firstUpdated
+ html`
+ `
+ : nothing}
::slotted(*).
+
+
+ This is a child of a direct child and cannot be styled directly with
+
+
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/styling-slotted/my-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/styling-slotted/my-element.ts
new file mode 100644
index 000000000..35cf74f90
--- /dev/null
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/styling-slotted/my-element.ts
@@ -0,0 +1,17 @@
+import { html, LitElement, css } from 'lit';
+import { customElement} from 'lit/decorators.js';
+
+@customElement('my-element')
+export class MyElement extends LitElement {
+ static styles = css`
+ ::slotted(*) {
+ border: 1px solid black;
+ padding: 1em;
+ --my-element-child-border: 1px dashed red;
+ }
+ `;
+
+ render() {
+ return html`::slotted(*). Therefore my-element should
+ style known CSS custom properties which should be applied in the light DOM.
+ Enter a pokemon ID and click "Fetch"
`, + pending: () => html`Loading ID ${this.pokemonId}...
`, + complete: (pokemon) => html` +${pokemon.name}
+Height: ${pokemon.height}
+Weight: ${pokemon.weight}
+Types: ${pokemon.types.map(({type}) => type.name).join(', ')}
+ + `, + error: (error) => html`Error fetching ID ${this.pokemonId}: ${error}
`, + }) + } + `; + } + + #updateId() { + /* playground-fold */ + this.pokemonId = Number(this.input.value); + } + + #renderControls() { + return html` +
+
+
+
+
+ `;
+ }
+
+ #onKeypress(event: KeyboardEvent) {
+ if (event.key === 'Enter') {
+ this.#updateId();
+ }
+ /* playground-fold-end */
+ }
+}
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/task/poke-types.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/task/poke-types.ts
new file mode 100644
index 000000000..dd315b6d7
--- /dev/null
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/task/poke-types.ts
@@ -0,0 +1,10 @@
+export interface PokedexEntry {
+ name: string;
+ cries: {
+ latest: string;
+ legacy: string;
+ }
+ height: number;
+ weight: number;
+ types: {type: {name: string}}[];
+}
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/task/project.json b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/task/project.json
new file mode 100644
index 000000000..6915ef2dc
--- /dev/null
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/task/project.json
@@ -0,0 +1,9 @@
+{
+ "extends": "/samples/v3-base.json",
+ "files": {
+ "poke-dex.ts": {},
+ "poke-types.ts": {},
+ "index.html": {}
+ },
+ "previewHeight": "300px"
+}
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/turn-off-shadow-dom/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/turn-off-shadow-dom/index.html
new file mode 100644
index 000000000..fb0358064
--- /dev/null
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/turn-off-shadow-dom/index.html
@@ -0,0 +1,7 @@
+
+
+
+
+This is not rendered in a shadow root
+Styles from index.html will leak in and static styles do not apply
+ Here is the output of a trusted rendering library:
+ ${unsafeHTML(renderLibrary())}
+
+ `;
+ }
+}
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/unsafe-html/project.json b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/unsafe-html/project.json
new file mode 100644
index 000000000..08e888cee
--- /dev/null
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/unsafe-html/project.json
@@ -0,0 +1,9 @@
+{
+ "extends": "/samples/v3-base.json",
+ "files": {
+ "my-element.ts": {},
+ "trusted-rendering-library.ts": {},
+ "index.html": {}
+ },
+ "previewHeight": "100px"
+}
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/unsafe-html/trusted-rendering-library.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/unsafe-html/trusted-rendering-library.ts
new file mode 100644
index 000000000..3847d74c2
--- /dev/null
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/unsafe-html/trusted-rendering-library.ts
@@ -0,0 +1,16 @@
+export function renderLibrary() {
+ return `
+ Often times, external libraries that you trust will return HTML strings that
+ you may need to render.
+
+`;
+}
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/unsafe-static/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/unsafe-static/index.html
new file mode 100644
index 000000000..052104094
--- /dev/null
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/unsafe-static/index.html
@@ -0,0 +1,3 @@
+
+
+Hello static!
+ ` + } + + + `; + } + + /* playground-fold */ + #toggleActive(e: InputEvent) { + this.active = (e.target as HTMLInputElement).checked + } + + + constructor() { + super(); + (MyButton.styles as any).replaceSync(getPluginStyles()); + } + /* playground-fold-end */ + + static styles = new CSSStyleSheet(); +} diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/unsafe-static/project.json b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/unsafe-static/project.json new file mode 100644 index 000000000..08695bb70 --- /dev/null +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/unsafe-static/project.json @@ -0,0 +1,9 @@ +{ + "extends": "/samples/v3-base.json", + "files": { + "my-button.ts": {}, + "trusted-rendering-library.ts": {}, + "index.html": {} + }, + "previewHeight": "150px" +} diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/unsafe-static/trusted-rendering-library.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/unsafe-static/trusted-rendering-library.ts new file mode 100644 index 000000000..b27503d69 --- /dev/null +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/unsafe-static/trusted-rendering-library.ts @@ -0,0 +1,59 @@ +export function getTagName() { + return 'div'; +} + +export function getActiveAttribute() { + return 'fancy-button--active'; +} + +export function getClasses() { + return 'fancy-button'; +} + +export function getPluginStyles() { + return ` + .fancy-button { + position: relative; + display: inline-flex; + background-color: lightblue; + border: 1px solid blue; + border-radius: 4px; + padding: 8px; + cursor: pointer; + outline: none; + justify-content: center; + align-items: center; + } + + .fancy-button:hover { + background-color: lightgreen; + } + + .fancy-button::before { + position: absolute; + inset: -5px; + } + + .fancy-button:focus::before { + content: ''; + border: 2px solid green; + } + + .fancy-button:focus { + background-color: green; + } + + .fancy-button:active { + background-color: lightcoral; + } + + .fancy-button[fancy-button--active]::before { + content: ''; + border: 2px solid lightcoral; + } + + .fancy-button > * { + margin: 0; + } +`; +} diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/update-complete/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/update-complete/index.html new file mode 100644 index 000000000..57a0c9aca --- /dev/null +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/update-complete/index.html @@ -0,0 +1,3 @@ + + +${this.sizeInfo}
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ `;
+ }
+
+ static styles = css`
+ #text {
+ max-width: 100%;
+ border: 1px solid black;
+ }
+ `;
+}
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/update-complete/project.json b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/update-complete/project.json
new file mode 100644
index 000000000..00842cd85
--- /dev/null
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/update-complete/project.json
@@ -0,0 +1,8 @@
+{
+ "extends": "/samples/v3-base.json",
+ "files": {
+ "my-element.ts": {},
+ "index.html": {}
+ },
+ "previewHeight": "300px"
+}
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/virtualizer/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/virtualizer/index.html
new file mode 100644
index 000000000..57a0c9aca
--- /dev/null
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/virtualizer/index.html
@@ -0,0 +1,3 @@
+
+
+-
+
+
- ${i.text} `}> +
@customElementcustomElements.define@customElementcustomElements.define@property decoratorstatic properties = { propertyName: {...}} code block and initializing them in the constructor()@state decoratorstatic properties = { propertyName: {state: true, ...}} code block and setting the state: true flag in the property's info. You can initialize them in the constructor()@property() instead of
+@state()static properties = {propName: {state: false}}@queryAssignedElements decoratorHTMLSlotElement.assignedElements() methodThis text may be hidden.
`;
### Removing an attribute { #removing-attribute }
-Sometimes you want to set an attribute only under certain conditions, and otherwise remove the attribute. For common "boolean attributes" like `disabled` and `hidden` where you want to set the attribute to an empty string for a truthy value and remove it otherwise, use a [boolean attribute](#boolean-attribute-expressions). Sometimes, however, you might require a different condition for adding or removing an attribute.
+Sometimes you want to set an attribute only under certain conditions, and otherwise remove the attribute. For common "boolean attributes" like `disabled` and `hidden` where you want to set the attribute to an empty string for a truthy value and remove it otherwise, use a [boolean attribute](#boolean-attribute-expressions). Sometimes, however, you might require a different condition for adding or removing an attribute.
For example, consider:
@@ -570,6 +570,7 @@ class MyButton extends LitElement {
// These strings MUST be trusted, otherwise this is an XSS vulnerability
const tag = getTagName();
const activeAttribute = getActiveAttribute();
+ // html should be imported from `lit/static-html.js`
return html`
<${unsafeStatic(tag)} ${unsafeStatic(activeAttribute)}=${this.active}>
${this.caption}
@@ -595,6 +596,7 @@ class MyButton extends LitElement { // These strings MUST be trusted, otherwise this is an XSS vulnerability const tag = getTagName(); const activeAttribute = getActiveAttribute(); + // html should be imported from `lit/static-html.js` return html` <${unsafeStatic(tag)} ${unsafeStatic(activeAttribute)}=${this.active}>${this.caption}
diff --git a/packages/lit-dev-content/site/images/articles/lit_cheat_sheet.jpg b/packages/lit-dev-content/site/images/articles/lit_cheat_sheet.jpg new file mode 100644 index 0000000000000000000000000000000000000000..432687ec13cd1f33401027cba900a4e1f89a9497 GIT binary patch literal 12249 zcmc(F2{;s7+we$58>*+Y4P$9%3}c-!p(v7s%2E?!48}GXV??r~&?ePmEA)!&YpG#~ zWT{ADEM-W9Y$IjK{@+v2)BC>P|32UMUjO&~|L;=nIp;q2cJA$*GvUXM9$K?<%Sr?S zvBp4O*A#(R;*CHEI0`R^k@q%_BjC>pcYRAb0
${showTabBar
? html`
- 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%0A=|VPR{3?w6&Yjfn-(f}d
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