${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 @@ + + +Count: ${this.count}
+Double count: ${this.doubleCount}
+ + `; + } + + #increment() { + this.count++; + } +} diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/derived-state/project.json b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/derived-state/project.json new file mode 100644 index 000000000..9c791c2a3 --- /dev/null +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/derived-state/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/dom-qae/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-qae/index.html new file mode 100644 index 000000000..e44dfda1c --- /dev/null +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-qae/index.html @@ -0,0 +1,5 @@ + + +
+
+ `;
+ }
+
+ #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 @@
+
+
+
+
+
+
+
+ `;
+ }
+
+ onInput(e: Event) {
+ this.inputValue = (e.target as HTMLInputElement).value;
+ }
+
+ 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: PropertyValuesClick either inside or outside this component with a box border
+Something was clicked INSIDE this component
` : ''} + ${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); + } + } + + disconnectedCallback() { + super.disconnectedCallback(); + + if (!isServer) { + // clean up to prevent memory leaks + document.removeEventListener('click', this.onDocumentClick); + } + } + + // Should be an arrow function and not a class method to ensure `this` is + // bound correctly. + private onDocumentClick = (e: MouseEvent) => { + const path = e.composedPath(); + this.clickedOutside = !path.includes(this); + }; + + static styles = css`/* playground-fold */ + + :host { + display: inline-flex; + border: 1px solid black; + } + /* playground-fold-end */`; +} \ No newline at end of file diff --git a/packages/lit-dev-content/samples/docs/components/events/host/project.json b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/global-listeners/project.json similarity index 71% rename from packages/lit-dev-content/samples/docs/components/events/host/project.json rename to packages/lit-dev-content/samples/articles/lit-cheat-sheet/global-listeners/project.json index b4ce9dfb5..875a71aaf 100644 --- a/packages/lit-dev-content/samples/docs/components/events/host/project.json +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/global-listeners/project.json @@ -1,5 +1,5 @@ { - "extends": "/samples/base.json", + "extends": "/samples/v3-base.json", "files": { "my-element.ts": {}, "index.html": {} diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/host-listeners/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/host-listeners/index.html new file mode 100644 index 000000000..57a0c9aca --- /dev/null +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/host-listeners/index.html @@ -0,0 +1,3 @@ + + +Something in this component was focused
` : ''} + `; + } + + constructor() { + super(); + + // Only want to do this in the browser since the server doesn't have the + // concept of events or document. + if (!isServer) { + this.addEventListener('focusin', this.#onFocusin); + this.addEventListener('focusout', this.#onFocusout); + } + } + + #onFocusin() { + this.focusedWithin = true; + } + + #onFocusout() { + this.focusedWithin = false; + } +} \ No newline at end of file diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/host-listeners/project.json b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/host-listeners/project.json new file mode 100644 index 000000000..875a71aaf --- /dev/null +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/host-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..8e2671b95
--- /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/docs/components/style/theming/project.json b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reactive-state/project.json
similarity index 71%
rename from packages/lit-dev-content/samples/docs/components/style/theming/project.json
rename to packages/lit-dev-content/samples/articles/lit-cheat-sheet/reactive-state/project.json
index 85df3b2be..816404c3d 100644
--- a/packages/lit-dev-content/samples/docs/components/style/theming/project.json
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reactive-state/project.json
@@ -1,5 +1,5 @@
{
- "extends": "/samples/base.json",
+ "extends": "/samples/v3-base.json",
"files": {
"my-element.ts": {},
"index.html": {}
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reconcile-update/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reconcile-update/index.html
new file mode 100644
index 000000000..57a0c9aca
--- /dev/null
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reconcile-update/index.html
@@ -0,0 +1,3 @@
+
+
+
+ The string saved in localstorage is: ${this.savedString}
+
+ ${this.#renderSavedStringControls()}
+ `;
+ }
+
+ #renderSavedStringControls() {
+ /* playground-fold */
+ return html`
+ {
+ this.savedString = (e.target as HTMLInputElement).value;
+ }}
+ />
+ `;
+ /* playground-fold-end */
+
+ }
+}
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reconcile-update/project.json b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reconcile-update/project.json
new file mode 100644
index 000000000..9c791c2a3
--- /dev/null
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reconcile-update/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/reconcile-updated/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reconcile-updated/index.html
new file mode 100644
index 000000000..57a0c9aca
--- /dev/null
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reconcile-updated/index.html
@@ -0,0 +1,3 @@
+
+
+This is just a page with a DIV
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reconcile-updated/project.json b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reconcile-updated/project.json
new file mode 100644
index 000000000..85e2d051a
--- /dev/null
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reconcile-updated/project.json
@@ -0,0 +1,9 @@
+{
+ "extends": "/samples/v3-base.json",
+ "files": {
+ "my-element.ts": {},
+ "my-second-page.html": {},
+ "index.html": {}
+ },
+ "previewHeight": "200px"
+}
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reconcile-willupdate/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reconcile-willupdate/index.html
new file mode 100644
index 000000000..57a0c9aca
--- /dev/null
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reconcile-willupdate/index.html
@@ -0,0 +1,3 @@
+
+
+
+ value of a: ${this.a}
+
+
+ value of double a: ${this.doubleA}
+
+ ${this.#renderAControls()}
+ `;
+ }
+
+ #renderAControls() {
+ /* playground-fold */
+ return html`
+ {
+ this.a = (e.target as HTMLInputElement).valueAsNumber;
+ }} />
+ {
+ this.doubleA = (e.target as HTMLInputElement).valueAsNumber;
+ }} />
+ `;
+ /* playground-fold-end */
+
+ }
+}
diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reconcile-willupdate/project.json b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reconcile-willupdate/project.json
new file mode 100644
index 000000000..9c791c2a3
--- /dev/null
+++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reconcile-willupdate/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/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 {
+ overflow: hidden;
+ max-height: 300px;
+ }
+
+ [name="image"]::slotted(*) {
+ aspect-ratio: 16/9;
+ height: 100%;
+ width: 100%;
+ object-fit: cover;
+ object-position: center center;
+ }
+
+ [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..fff768518 --- /dev/null +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signal-watcher/project.json @@ -0,0 +1,8 @@ +{ + "extends": "/samples/articles/lit-cheat-sheet/with-logger.json", + "files": { + "my-element.ts": {}, + "index.html": {} + }, + "previewHeight": "200px" +} 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..8585fa6eb --- /dev/null +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-computed/index.html @@ -0,0 +1,5 @@ + + + ++ 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..fe463ddfa --- /dev/null +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-computed/project.json @@ -0,0 +1,8 @@ +{ + "extends": "/samples/articles/lit-cheat-sheet/with-logger.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..838c8e61e --- /dev/null +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-effect/index.html @@ -0,0 +1,5 @@ + + + ++ 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..fff768518 --- /dev/null +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-effect/project.json @@ -0,0 +1,8 @@ +{ + "extends": "/samples/articles/lit-cheat-sheet/with-logger.json", + "files": { + "my-element.ts": {}, + "index.html": {} + }, + "previewHeight": "200px" +} 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..8585fa6eb --- /dev/null +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-html-tag/index.html @@ -0,0 +1,5 @@ + + + +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..fe463ddfa --- /dev/null +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-html-tag/project.json @@ -0,0 +1,8 @@ +{ + "extends": "/samples/articles/lit-cheat-sheet/with-logger.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..fe463ddfa --- /dev/null +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/signals-watch-directive/project.json @@ -0,0 +1,8 @@ +{ + "extends": "/samples/articles/lit-cheat-sheet/with-logger.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`([]);\n\nconst oldLog = window.console.log\nwindow.console.log = (...values: unknown[]) => {\n log.set([...log.get(), values]);\n oldLog(...values)\n};\n\nconst globalStyles = new CSSStyleSheet();\n\nglobalStyles.replaceSync(`body {\n display: flex;\n}\n \nbody > * {\n flex: 1\n}`)\n\ndocument.adoptedStyleSheets.push(globalStyles);\n\n@customElement('visual-logger')\nexport class MyElement extends SignalWatcher(LitElement) {\n render() {\n return html`\n
-
-
+ 
+
+ => {
+ // Artificial delay for demo purposes
+ await new Promise((r) => setTimeout(r, 1000));
+ const response = await fetch(`https://registry.npmjs.org/${pkgName}`, {
+ signal,
+ });
+ if (response.status === 200) {
+ return response.json();
+ } else {
+ throw response.text();
+ }
+};
diff --git a/packages/lit-dev-content/samples/examples/async-task/project.json b/packages/lit-dev-content/samples/examples/async-task/project.json
index cacc82429..32f544374 100644
--- a/packages/lit-dev-content/samples/examples/async-task/project.json
+++ b/packages/lit-dev-content/samples/examples/async-task/project.json
@@ -1,13 +1,11 @@
{
"extends": "/samples/base.json",
- "hide": true,
- "title": "Async Task / NPM Info element",
+ "title": "Async Tasks",
"description": "Shows an example of an async Task controller. This one fetches npm package info and renders based on the state of the fetch.",
- "section": "Specific Solutions",
+ "section": "Managing Data",
"files": {
- "index.js": {},
- "npm-info.js": {},
- "task.js": {},
+ "npm-info.ts": {},
+ "npm.ts": {},
"index.html": {}
}
}
diff --git a/packages/lit-dev-content/samples/examples/async-task/task.js b/packages/lit-dev-content/samples/examples/async-task/task.js
deleted file mode 100644
index 63fcd4ac9..000000000
--- a/packages/lit-dev-content/samples/examples/async-task/task.js
+++ /dev/null
@@ -1,138 +0,0 @@
-import { UpdatingElement } from 'lit-element';
-
-/**
- * Computes a value asynchronously and caches it, making it avaiable
- * synchronously.
- *
- * CachedTask notifies an UpdatingElement implementation when its value has
- * changed.
- */
-export class Task {
- _host;
- _compute;
- _getDeps;
- _deps;
-
- _state; // undefined | 'pending' | 'complete' | 'error'
- _value;
- _error;
-
- constructor(host, compute, getDeps) {
- this._host = host;
- this._compute = compute;
- this._getDeps = getDeps;
- }
-
- /**
- * Calls one of the given render functions based on the state of the Task
- *
- * Example
- *
- * task.render({
- * complete: (v) => html`value: ${v}`,
- * error: (e) => html`error: ${e}`,
- * pending: (v) => html`Loading...`,
- * initial: (v) => html`not started`,
- * })
- */
- render(renderFunctions) {
- this._maybeCompute();
- if (this._state === 'complete') {
- return renderFunctions.complete && renderFunctions.complete(this._value);
- }
- if (this._state === 'error') {
- return renderFunctions.error && renderFunctions.error(this._error);
- }
- if (this._state === 'pending') {
- return renderFunctions.pending && renderFunctions.pending();
- }
- return renderFunctions.initial && renderFunctions.initial();
- }
-
- /**
- * Gets the current value of the task, or undefined if the task is computing.
- *
- * Triggers computation of the task if it hasn't been computed before, or if
- * the dependencies have changed.
- */
- get value() {
- this._maybeCompute();
- return this._state = 'complete' ? this._value : undefined;
- }
-
- _maybeCompute() {
- // By default, compute the first time
- let doCompute = this._state === undefined;
-
- // If a getDeps function was provided, call it and check if the dependencies
- // have changed. If so, recompute.
- if (this._getDeps !== undefined) {
- const oldDeps = this._deps;
- const newDeps = this._getDeps();
- this._deps = newDeps;
-
- // Check that we have new or old deps
- if (oldDeps !== undefined || newDeps !== undefined) {
- // If new or old deps are missing, or the array length is different
- // reomcpute
- if (oldDeps === undefined || newDeps === undefined ||
- oldDeps.length !== newDeps.length) {
- doCompute = true;
- } else {
- // Check each dependency using strict equality
- for (let i = 0; i < newDeps.length; i++) {
- if (oldDeps[i] !== newDeps[i]) {
- doCompute = true;
- break;
- }
- }
- }
- }
- }
- if (doCompute) {
- this._computeValue();
- }
- }
-
- async _computeValue() {
- // Make sure we're not returning stale values while computing.
- // TODO: are there times when we _do_ want to return the stale value?
- // Should that be an option?
- this._state = 'pending';
- this._value = undefined;
- this._error = undefined;
-
- // Fire an event so ancestor elements know there's pending work
- let resolve;
- let reject;
- const pendingPromise = new Promise((res, rej) => {
- resolve = res;
- reject = rej;
- })
- // https://github.com/justinfagnani/pending-state-protocol
- const pendingEvent = new CustomEvent('pending-state', {
- composed: true,
- bubbles: true,
- detail: {promise: pendingPromise}
- });
- this._host.dispatchEvent(pendingEvent);
-
- try {
- this._value = await this._compute(...(this._deps || []));
- this._state = 'complete';
- resolve(this._value);
- } catch (e) {
- if (e instanceof InitialStateError) {
- this._state = 'initial';
- resolve();
- }
- this._error = e;
- this._state = 'error';
- reject(e);
- }
- // Make the host re-render
- this._host.requestUpdate();
- }
-}
-
-export class InitialStateError extends Error {}
diff --git a/packages/lit-dev-content/samples/examples/context-basics/elements.js b/packages/lit-dev-content/samples/examples/context-basics/elements.js
new file mode 100644
index 000000000..d7a1eb91e
--- /dev/null
+++ b/packages/lit-dev-content/samples/examples/context-basics/elements.js
@@ -0,0 +1,63 @@
+import {html, LitElement} from 'lit';
+import {ContextProvider, ContextConsumer, createContext} from '@lit/context';
+
+import {providerStyles} from './styles.js';
+
+const contextKey = Symbol('contextKey');
+
+// Context object, which acts like a key for the context.
+// The context object acts as a key. A consumer will only receive
+// values from a provider if their contexts match. A Symbol ensures
+// that this context will be unique.
+const context = createContext(contextKey);
+
+export class ProviderEl extends LitElement {
+ static styles = providerStyles;
+
+ static properties = {
+ data: {},
+ };
+
+ constructor() {
+ super();
+ this._provider = new ContextProvider(this, {context});
+ this.data = 'Initial';
+ }
+
+ /**
+ * `data` will be provided to any consumer that is in the DOM tree below it.
+ */
+ set data(value) {
+ this._data = value;
+ this._provider.setValue(value);
+ }
+
+ get data() {
+ return this._data;
+ }
+
+ render() {
+ return html`
+ Provider's data:
+ Consumer data:
`;
+ }
+}
+customElements.define('consumer-el', ConsumerEl);
diff --git a/packages/lit-dev-content/samples/examples/context-basics/elements.ts b/packages/lit-dev-content/samples/examples/context-basics/elements.ts
new file mode 100644
index 000000000..1c7d56811
--- /dev/null
+++ b/packages/lit-dev-content/samples/examples/context-basics/elements.ts
@@ -0,0 +1,55 @@
+import {html, LitElement} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import {provide, consume, createContext} from '@lit/context';
+
+import {providerStyles} from './styles.js';
+
+const contextKey = Symbol('contextKey');
+// The values that will be provided and consumed in this demo will
+// be strings.
+type ContextValue = string;
+// Context object, which acts like a key for the context.
+// The context object acts as a key. A consumer will only receive
+// values from a provider if their contexts match. A Symbol ensures
+// that this context will be unique.
+const context = createContext(contextKey);
+
+@customElement('provider-el')
+export class ProviderEl extends LitElement {
+ static styles = providerStyles;
+
+ /**
+ * `data` will be provided to any consumer that is in the DOM tree below it.
+ */
+ @provide({context})
+ @property()
+ data = 'Initial';
+
+ render() {
+ return html`
+ Provider's data:
+ Consumer data:
`;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'provider-el': ProviderEl;
+ 'consumer-el': ConsumerEl;
+ }
+}
diff --git a/packages/lit-dev-content/samples/examples/context-basics/index.html b/packages/lit-dev-content/samples/examples/context-basics/index.html
new file mode 100644
index 000000000..f67442dfe
--- /dev/null
+++ b/packages/lit-dev-content/samples/examples/context-basics/index.html
@@ -0,0 +1,34 @@
+
+
+
+
+
+ +
+
+
+ +
+
+
+ +(Symbol('level'));
diff --git a/packages/lit-dev-content/samples/examples/context-consume-provide/my-app.ts b/packages/lit-dev-content/samples/examples/context-consume-provide/my-app.ts
new file mode 100644
index 000000000..d140bdcd7
--- /dev/null
+++ b/packages/lit-dev-content/samples/examples/context-consume-provide/my-app.ts
@@ -0,0 +1,72 @@
+import {html, LitElement} from 'lit';
+import {customElement} from 'lit/decorators.js';
+import './my-section.js';
+import './my-heading.js';
+
+@customElement('my-app')
+export class MyApp extends LitElement {
+ render() {
+ // serves as both context provider and consumer. It provides a
+ // level value that is 1 greater than what's provided to it. This allows
+ // nested to provide a different value based on its depth.
+
+ // adjusts what heading tag to use and the color based on the
+ // level context.
+ return html`
+
+ Heading level 1
+
+ Heading level 2
+
+
+ Heading level 2
+
+ Heading level 3
+
+
+ Heading level 3
+
+ Heading level 4
+
+
+
+
+ Heading level 2
+
+ Heading level 3
+
+ Heading level 4
+
+
+ Heading level 4
+
+
+
+
+
+ Heading level 1
+
+ Heading level 2
+
+ Heading level 3
+
+ Heading level 4
+
+ Heading level 5
+
+
+
+
+
+ Heading level 2
+
+ Heading level 3
+
+ Heading level 4
+
+
+
+
+ `;
+ }
+}
diff --git a/packages/lit-dev-content/samples/examples/context-consume-provide/my-heading.js b/packages/lit-dev-content/samples/examples/context-consume-provide/my-heading.js
new file mode 100644
index 000000000..7558e4521
--- /dev/null
+++ b/packages/lit-dev-content/samples/examples/context-consume-provide/my-heading.js
@@ -0,0 +1,28 @@
+import {LitElement} from 'lit';
+import {html, literal, unsafeStatic} from 'lit/static-html.js';
+import {styleMap} from 'lit/directives/style-map.js';
+import {ContextConsumer} from '@lit/context';
+import {levelContext} from './level-context.js';
+
+export class MyHeading extends LitElement {
+ _levelContext = new ContextConsumer(this, {context: levelContext});
+
+ get _tag() {
+ const level = this._levelContext.value?.level;
+ if (typeof level === 'number' && level >= 0 && level <= 5) {
+ return unsafeStatic(`h${level + 1}`);
+ } else {
+ return literal`p`;
+ }
+ }
+
+ render() {
+ return html`
+ <${this._tag}
+ style=${styleMap({color: this._levelContext.value?.color})}
+ >
+ ((r) => setTimeout(() => r(), 1000));
- return json.title;
+ await new Promise((r) => setTimeout(() => r(), 2000));
+ return 'Lorem Ipsum';
}
@customElement('my-element')
diff --git a/packages/lit-dev-content/samples/examples/motion-carousel/project.json b/packages/lit-dev-content/samples/examples/motion-carousel/project.json
index c1df7558d..8e50e4e78 100644
--- a/packages/lit-dev-content/samples/examples/motion-carousel/project.json
+++ b/packages/lit-dev-content/samples/examples/motion-carousel/project.json
@@ -2,13 +2,13 @@
"extends": "/samples/base.json",
"title": "Carousel Transitions",
"description": "Animated carousel.",
- "section": "Motion",
+ "section": "@lit-labs/motion",
"files": {
"motion-carousel.ts": {},
"styles.ts": {},
"index.html": {},
"package.json": {
- "content": "{\n \"dependencies\": {\n \"lit\": \"^2.0.0\",\n \"@lit-labs/motion\": \"^1.0.1\", }\n}",
+ "content": "{\n \"dependencies\": {\n \"lit\": \"^3.0.0\",\n \"@lit-labs/motion\": \"^1.0.3\"\n }\n}",
"hidden": true
}
},
diff --git a/packages/lit-dev-content/samples/examples/motion-grid/project.json b/packages/lit-dev-content/samples/examples/motion-grid/project.json
index 329db5ddd..4cde841c0 100644
--- a/packages/lit-dev-content/samples/examples/motion-grid/project.json
+++ b/packages/lit-dev-content/samples/examples/motion-grid/project.json
@@ -2,13 +2,13 @@
"extends": "/samples/base.json",
"title": "Grid Layout Transitions",
"description": "Animate css grid layouts.",
- "section": "Motion",
+ "section": "@lit-labs/motion",
"files": {
"motion-grid.ts": {},
"styles.ts": {},
"index.html": {},
"package.json": {
- "content": "{\n \"dependencies\": {\n \"lit\": \"^2.0.0\",\n \"@lit-labs/motion\": \"^1.0.1\", }\n}",
+ "content": "{\n \"dependencies\": {\n \"lit\": \"^3.0.0\",\n \"@lit-labs/motion\": \"^1.0.3\"\n }\n}",
"hidden": true
}
},
diff --git a/packages/lit-dev-content/samples/examples/motion-hero/project.json b/packages/lit-dev-content/samples/examples/motion-hero/project.json
index 99a81f551..2c85f0df7 100644
--- a/packages/lit-dev-content/samples/examples/motion-hero/project.json
+++ b/packages/lit-dev-content/samples/examples/motion-hero/project.json
@@ -2,14 +2,14 @@
"extends": "/samples/base.json",
"title": "List/Detail Hero Transition",
"description": "Hero animation.",
- "section": "Motion",
+ "section": "@lit-labs/motion",
"files": {
"motion-hero.ts": {},
"styles.ts": {},
"support.ts": {},
"index.html": {},
"package.json": {
- "content": "{\n \"dependencies\": {\n \"lit\": \"^2.0.0\",\n \"@lit-labs/motion\": \"^1.0.1\", }\n}",
+ "content": "{\n \"dependencies\": {\n \"lit\": \"^3.0.0\",\n \"@lit-labs/motion\": \"^1.0.3\"\n }\n}",
"hidden": true
}
},
diff --git a/packages/lit-dev-content/samples/examples/motion-in-out/project.json b/packages/lit-dev-content/samples/examples/motion-in-out/project.json
index 0805b2a0e..2ebf4f1f2 100644
--- a/packages/lit-dev-content/samples/examples/motion-in-out/project.json
+++ b/packages/lit-dev-content/samples/examples/motion-in-out/project.json
@@ -2,13 +2,13 @@
"extends": "/samples/base.json",
"title": "Lit Logo Animation",
"description": "Animate elements when they go in and out of the page.",
- "section": "Motion",
+ "section": "@lit-labs/motion",
"files": {
"motion-lit.ts": {},
"styles.ts": {},
"index.html": {},
"package.json": {
- "content": "{\n \"dependencies\": {\n \"lit\": \"^2.0.0\",\n \"@lit-labs/motion\": \"^1.0.1\", }\n}",
+ "content": "{\n \"dependencies\": {\n \"lit\": \"^3.0.0\",\n \"@lit-labs/motion\": \"^1.0.3\"\n }\n}",
"hidden": true
}
},
diff --git a/packages/lit-dev-content/samples/examples/motion-list/project.json b/packages/lit-dev-content/samples/examples/motion-list/project.json
index ee7a3ac48..0bfe9ef92 100644
--- a/packages/lit-dev-content/samples/examples/motion-list/project.json
+++ b/packages/lit-dev-content/samples/examples/motion-list/project.json
@@ -2,13 +2,13 @@
"extends": "/samples/base.json",
"title": "List Item Animation",
"description": "Animate list items.",
- "section": "Motion",
+ "section": "@lit-labs/motion",
"files": {
"motion-list.ts": {},
"styles.ts": {},
"index.html": {},
"package.json": {
- "content": "{\n \"dependencies\": {\n \"lit\": \"^2.0.0\",\n \"@lit-labs/motion\": \"^1.0.1\", }\n}",
+ "content": "{\n \"dependencies\": {\n \"lit\": \"^3.0.0\",\n \"@lit-labs/motion\": \"^1.0.3\"\n }\n}",
"hidden": true
}
},
diff --git a/packages/lit-dev-content/samples/examples/motion-simple/project.json b/packages/lit-dev-content/samples/examples/motion-simple/project.json
index 252ddf18b..1d078e5f7 100644
--- a/packages/lit-dev-content/samples/examples/motion-simple/project.json
+++ b/packages/lit-dev-content/samples/examples/motion-simple/project.json
@@ -2,12 +2,12 @@
"extends": "/samples/base.json",
"title": "Sliding Circle",
"description": "Simple `animate()` directive example.",
- "section": "Motion",
+ "section": "@lit-labs/motion",
"files": {
"motion-slide.ts": {},
"index.html": {},
"package.json": {
- "content": "{\n \"dependencies\": {\n \"lit\": \"^2.0.0\",\n \"@lit-labs/motion\": \"^1.0.1\", }\n}",
+ "content": "{\n \"dependencies\": {\n \"lit\": \"^3.0.0\",\n \"@lit-labs/motion\": \"^1.0.3\"\n }\n}",
"hidden": true
}
},
diff --git a/packages/lit-dev-content/samples/examples/motion-todos/project.json b/packages/lit-dev-content/samples/examples/motion-todos/project.json
index 39edbe52c..a690bc422 100644
--- a/packages/lit-dev-content/samples/examples/motion-todos/project.json
+++ b/packages/lit-dev-content/samples/examples/motion-todos/project.json
@@ -2,13 +2,13 @@
"extends": "/samples/base.json",
"title": "Todos List Transitions",
"description": "Animated list of todos.",
- "section": "Motion",
+ "section": "@lit-labs/motion",
"files": {
"motion-todos.ts": {},
"styles.ts": {},
"index.html": {},
"package.json": {
- "content": "{\n \"dependencies\": {\n \"lit\": \"^2.0.0\",\n \"@lit-labs/motion\": \"^1.0.1\",\n \"@material/mwc-textfield\": \"^0.25.1\",\n \"@material/mwc-checkbox\": \"^0.25.1\",\n \"@material/mwc-button\": \"^0.25.1\",\n \"@material/mwc-formfield\": \"^0.25.1\" }\n}",
+ "content": "{\n \"dependencies\": {\n \"lit\": \"^3.0.0\",\n \"@lit-labs/motion\": \"^1.0.1\",\n \"@material/mwc-textfield\": \"^0.25.1\",\n \"@material/mwc-checkbox\": \"^0.25.1\",\n \"@material/mwc-button\": \"^0.25.1\",\n \"@material/mwc-formfield\": \"^0.25.1\"\n }\n}",
"hidden": true
}
},
diff --git a/packages/lit-dev-content/samples/examples/properties-basic/index.html b/packages/lit-dev-content/samples/examples/properties-basic/index.html
index 23b95c071..fbb36214c 100644
--- a/packages/lit-dev-content/samples/examples/properties-basic/index.html
+++ b/packages/lit-dev-content/samples/examples/properties-basic/index.html
@@ -4,7 +4,7 @@
diff --git a/packages/lit-dev-content/samples/examples/properties-custom-converter/index.html b/packages/lit-dev-content/samples/examples/properties-custom-converter/index.html
index 11cb69ae8..75d23e9ec 100644
--- a/packages/lit-dev-content/samples/examples/properties-custom-converter/index.html
+++ b/packages/lit-dev-content/samples/examples/properties-custom-converter/index.html
@@ -11,6 +11,6 @@
-
::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} `}> +
\n Log:\n
\n ${log.get().toReversed().map(val => html`
\n `;\n }\n \n static styles = css`\n #log {\n display: block;\n max-height: 100dvh;\n }\n \n p {\n margin: 0;\n font-family: monospace;\n }\n `;\n}"
+ }
+ }
+}
\ No newline at end of file
diff --git a/packages/lit-dev-content/samples/base.json b/packages/lit-dev-content/samples/base.json
index 331942d1f..451951172 100644
--- a/packages/lit-dev-content/samples/base.json
+++ b/packages/lit-dev-content/samples/base.json
@@ -1,8 +1,3 @@
{
- "files": {
- "package.json": {
- "content": "{\n \"dependencies\": {\n \"lit\": \"^2.0.0\",\n \"@lit/reactive-element\": \"^1.0.0\",\n \"lit-element\": \"^3.0.0\",\n \"lit-html\": \"^2.0.0\"\n }\n}",
- "hidden": true
- }
- }
+ "extends": "/samples/v3-base.json"
}
diff --git a/packages/lit-dev-content/samples/examples/async-task/index.html b/packages/lit-dev-content/samples/examples/async-task/index.html
index c23eb4db4..8099c92be 100644
--- a/packages/lit-dev-content/samples/examples/async-task/index.html
+++ b/packages/lit-dev-content/samples/examples/async-task/index.html
@@ -1,7 +1,9 @@
-
-
-
-
+
+
+
+
- \n ${log.get().toReversed().map(val => html`
${val.join(' ')}
`)}\n${this.package}
- ${npmLogo} -
- ${this._fetchNpmInfoTask.render({
- complete: (pkg) => html`
-
- `;
- }
-}
-customElements.define('npm-info', NpmInfoElement);
-
-const getPackageUrl = (name) => `https://cors-anywhere.herokuapp.com/registry.npmjs.org/${name}`;
-
-const npmLogo = html`
-
-`;
diff --git a/packages/lit-dev-content/samples/examples/async-task/npm-info.ts b/packages/lit-dev-content/samples/examples/async-task/npm-info.ts
new file mode 100644
index 000000000..5175f0b5f
--- /dev/null
+++ b/packages/lit-dev-content/samples/examples/async-task/npm-info.ts
@@ -0,0 +1,98 @@
+import {LitElement, css, html} from 'lit';
+import {customElement, state} from 'lit/decorators.js';
+import {map} from 'lit/directives/map.js';
+import {Task, initialState} from '@lit/task';
+import {fetchPackageInfo} from './npm.js';
+
+@customElement('npm-info')
+export class NpmInfo extends LitElement {
+ @state()
+ private _packageName = 'lit';
+
+ /*
+ * This is the async Task that fetches data from npm.
+ *
+ * The current state of the task is rendered below with
+ * `this._npmInfoTask.render()`.
+ */
+ private _npmInfoTask = new Task(this, {
+ task: async ([pkgName], {signal}) => {
+ if (pkgName === undefined || pkgName === '') {
+ // This puts the task back into the INITIAL state
+ return initialState;
+ }
+ return await fetchPackageInfo(pkgName, signal);
+ },
+ args: () => [this._packageName],
+ });
+
+ render() {
+ return html`
+
+ ${pkg.description}
-dist-tags:
--
- ${Array.from(Object.entries(pkg['dist-tags'])).map(
- ([tag, version]) => html`
${tag}: ${version}`)}
-
${this._packageName}
+
+
+ ${this._npmInfoTask.render({
+ initial: () =>
+ html`
+ Enter a package name to display its npm info
+ `,
+ pending: () =>
+ html`Loading npm info for
+ `;
+ }
+
+ private _onChange(e: Event) {
+ this._packageName = (e.target as HTMLInputElement).value;
+ }
+
+ static styles = css`
+ :host {
+ display: block;
+ min-width: 300px;
+ border-radius: 5px;
+ border: solid 1px #aaa;
+ padding: 20px;
+ }
+ header {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ }
+ #logo {
+ height: 38px;
+ width: auto;
+ }
+ .initial {
+ font-style: italic;
+ }
+ .error {
+ color: red;
+ }
+ `;
+}
diff --git a/packages/lit-dev-content/samples/examples/async-task/npm.ts b/packages/lit-dev-content/samples/examples/async-task/npm.ts
new file mode 100644
index 000000000..dc8311a73
--- /dev/null
+++ b/packages/lit-dev-content/samples/examples/async-task/npm.ts
@@ -0,0 +1,20 @@
+export interface NpmPackage {
+ description: string;
+ ['dist-tags']: {[tag: string]: string};
+}
+
+export const fetchPackageInfo = async (
+ pkgName: string,
+ signal: AbortSignal
+): Promise${this._packageName}`,
+ complete: (pkg) => html`
+ ${pkg.description}
+dist-tags:
+-
+ ${map(
+ Object.entries(pkg['dist-tags']),
+ ([tag, version]) => html`
${tag}: ${version}`
+ )}
+
Provider's data: ${this.data}
+ Consumer data: ${this.providedData}
`;
+ }
+}
+customElements.define('consumer-el', ConsumerEl);
diff --git a/packages/lit-dev-content/samples/examples/context-basics/elements.ts b/packages/lit-dev-content/samples/examples/context-basics/elements.ts
new file mode 100644
index 000000000..1c7d56811
--- /dev/null
+++ b/packages/lit-dev-content/samples/examples/context-basics/elements.ts
@@ -0,0 +1,55 @@
+import {html, LitElement} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import {provide, consume, createContext} from '@lit/context';
+
+import {providerStyles} from './styles.js';
+
+const contextKey = Symbol('contextKey');
+// The values that will be provided and consumed in this demo will
+// be strings.
+type ContextValue = string;
+// Context object, which acts like a key for the context.
+// The context object acts as a key. A consumer will only receive
+// values from a provider if their contexts match. A Symbol ensures
+// that this context will be unique.
+const context = createContextProvider's data: ${this.data}
+ Consumer data: ${this.providedData}
`;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'provider-el': ProviderEl;
+ 'consumer-el': ConsumerEl;
+ }
+}
diff --git a/packages/lit-dev-content/samples/examples/context-basics/index.html b/packages/lit-dev-content/samples/examples/context-basics/index.html
new file mode 100644
index 000000000..f67442dfe
--- /dev/null
+++ b/packages/lit-dev-content/samples/examples/context-basics/index.html
@@ -0,0 +1,34 @@
+
+
+
+
+Basic Context Example
+
+ The <consumer-el> receives its data from
+ <provider-el> without property drilling.
+
+ +
+ +
+ +
+ Checkout our + Context documentation! +
diff --git a/packages/lit-dev-content/samples/examples/context-basics/project.json b/packages/lit-dev-content/samples/examples/context-basics/project.json new file mode 100644 index 000000000..3ac2f3c54 --- /dev/null +++ b/packages/lit-dev-content/samples/examples/context-basics/project.json @@ -0,0 +1,11 @@ +{ + "extends": "/samples/base.json", + "title": "Context Basics", + "description": "Share data from a provider element with Context.", + "section": "Managing Data", + "files": { + "elements.ts": {}, + "index.html": {}, + "styles.ts": {} + } +} diff --git a/packages/lit-dev-content/samples/examples/context-basics/styles.ts b/packages/lit-dev-content/samples/examples/context-basics/styles.ts new file mode 100644 index 000000000..98447a387 --- /dev/null +++ b/packages/lit-dev-content/samples/examples/context-basics/styles.ts @@ -0,0 +1,18 @@ +import {css} from 'lit'; +export const providerStyles = css` + slot { + display: block; + border: dashed 4px #dadada; + padding: 0px 10px; + } + + :host { + display: block; + border: solid 4px #adadad; + padding: 2px; + } + + h3 { + margin-top: 0; + } +`; diff --git a/packages/lit-dev-content/samples/examples/context-consume-provide/index.html b/packages/lit-dev-content/samples/examples/context-consume-provide/index.html new file mode 100644 index 000000000..cd3e926c5 --- /dev/null +++ b/packages/lit-dev-content/samples/examples/context-consume-provide/index.html @@ -0,0 +1,15 @@ + + ++ Example inspired by: + https://react.dev/learn/passing-data-deeply-with-context +
+-