I'm blue
Hello!
`; + } + + static styles = css` + .red { + color: red; + } + .blue { + color: blue; + } + `; +} \ No newline at end of file diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/classes/project.json b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/classes/project.json new file mode 100644 index 000000000..816404c3d --- /dev/null +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/classes/project.json @@ -0,0 +1,8 @@ +{ + "extends": "/samples/v3-base.json", + "files": { + "my-element.ts": {}, + "index.html": {} + }, + "previewHeight": "100px" +} diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/conditionals/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/conditionals/index.html new file mode 100644 index 000000000..57a0c9aca --- /dev/null +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/conditionals/index.html @@ -0,0 +1,3 @@ + + +Some text
`; + + if (this.someBoolean) { + someText = html`Some other text
`; + } + + return html` + +Some other text
` : html`Some text
`} +This is in a shadow root!
`; + } +} \ No newline at end of file diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/css-shadow-parts/project.json b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/css-shadow-parts/project.json new file mode 100644 index 000000000..875a71aaf --- /dev/null +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/css-shadow-parts/project.json @@ -0,0 +1,8 @@ +{ + "extends": "/samples/v3-base.json", + "files": { + "my-element.ts": {}, + "index.html": {} + }, + "previewHeight": "120px" +} 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 = CustomEventHello, 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 @@ + + +${this.htmlText}
+ Something 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/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!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` +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 @@ + + +A list of names that include the letter "e" (rendering an Array)
+My unique fruits (rendering a Set)
+Things to do today:
+ + +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.
+
<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.
This is not rendered in a shadow root
+Styles from index.html will leak in and static styles do not apply
${this.sizeInfo}
+@customElementcustomElements.define@customElementcustomElements.define@property() instead of @state()static properties = {propName: {state: false}}