+
+ `;
+}
+/* playground-fold */
+
+private toggleSort() {
+ this.sort *= -1;
+ this.employees = [...this.employees.sort((a, b) =>
+ this.sort * (a.familyName.localeCompare(b.familyName) ||
+ a.givenName.localeCompare(b.givenName)))];
+}
+
+}
+/* playground-fold-end */
diff --git a/packages/lit-dev-content/samples/v3-docs/templates/lists-repeat/project.json b/packages/lit-dev-content/samples/v3-docs/templates/lists-repeat/project.json
new file mode 100644
index 000000000..c35f00366
--- /dev/null
+++ b/packages/lit-dev-content/samples/v3-docs/templates/lists-repeat/project.json
@@ -0,0 +1,11 @@
+{
+ "extends": "/samples/v3-base.json",
+ "title": "repeat directive",
+ "description": "Demo exploring use of the repeat directive.",
+ "section": "Directives",
+ "files": {
+ "my-element.ts": {},
+ "index.html": {}
+ },
+ "previewHeight": "130px"
+}
diff --git a/packages/lit-dev-content/samples/v3-docs/what-is-lit/icons.ts b/packages/lit-dev-content/samples/v3-docs/what-is-lit/icons.ts
new file mode 100644
index 000000000..2d149f146
--- /dev/null
+++ b/packages/lit-dev-content/samples/v3-docs/what-is-lit/icons.ts
@@ -0,0 +1,5 @@
+import {html} from 'lit';
+
+export const replay = html``;
+export const pause = html``;
+export const play = html``;
diff --git a/packages/lit-dev-content/samples/v3-docs/what-is-lit/index.html b/packages/lit-dev-content/samples/v3-docs/what-is-lit/index.html
new file mode 100644
index 000000000..00c26fcf6
--- /dev/null
+++ b/packages/lit-dev-content/samples/v3-docs/what-is-lit/index.html
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/lit-dev-content/samples/v3-docs/what-is-lit/my-timer.ts b/packages/lit-dev-content/samples/v3-docs/what-is-lit/my-timer.ts
new file mode 100644
index 000000000..058f1f7d6
--- /dev/null
+++ b/packages/lit-dev-content/samples/v3-docs/what-is-lit/my-timer.ts
@@ -0,0 +1,81 @@
+import {LitElement, html, css} from 'lit';
+import {customElement, property, state} from 'lit/decorators.js';
+/* playground-fold */
+import {play, pause, replay} from './icons.js';
+/* playground-fold-end */
+
+@customElement("my-timer")
+export class MyTimer extends LitElement {
+ static styles = css`/* playground-fold */
+
+ :host {
+ display: inline-block;
+ min-width: 4em;
+ text-align: center;
+ padding: 0.2em;
+ margin: 0.2em 0.1em;
+ }
+ footer {
+ user-select: none;
+ font-size: 0.6em;
+ }
+ /* playground-fold-end */`;
+
+ @property() duration = 60;
+ @state() private end: number | null = null;
+ @state() private remaining = 0;
+
+ render() {
+ const {remaining, running} = this;
+ const min = Math.floor(remaining / 60000);
+ const sec = pad(min, Math.floor(remaining / 1000 % 60));
+ const hun = pad(true, Math.floor(remaining % 1000 / 10));
+ return html`
+ ${min ? `${min}:${sec}` : `${sec}.${hun}`}
+
+ `;
+ }
+ /* playground-fold */
+
+ start() {
+ this.end = Date.now() + this.remaining;
+ this.tick();
+ }
+
+ pause() {
+ this.end = null;
+ }
+
+ reset() {
+ const running = this.running;
+ this.remaining = this.duration * 1000;
+ this.end = running ? Date.now() + this.remaining : null;
+ }
+
+ tick() {
+ if (this.running) {
+ this.remaining = Math.max(0, this.end! - Date.now());
+ requestAnimationFrame(() => this.tick());
+ }
+ }
+
+ get running() {
+ return this.end && this.remaining;
+ }
+
+ connectedCallback() {
+ super.connectedCallback();
+ this.reset();
+ }/* playground-fold-end */
+
+}
+/* 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/v3-docs/what-is-lit/project.json b/packages/lit-dev-content/samples/v3-docs/what-is-lit/project.json
new file mode 100644
index 000000000..7744524ef
--- /dev/null
+++ b/packages/lit-dev-content/samples/v3-docs/what-is-lit/project.json
@@ -0,0 +1,9 @@
+{
+ "extends": "/samples/v3-base.json",
+ "files": {
+ "my-timer.ts": {},
+ "index.html": {},
+ "icons.ts": {}
+ },
+ "previewHeight": "125px"
+}
diff --git a/packages/lit-dev-content/site/docs/v2/components/events.md b/packages/lit-dev-content/site/docs/v2/components/events.md
index 974bc39cc..e824bd51c 100644
--- a/packages/lit-dev-content/site/docs/v2/components/events.md
+++ b/packages/lit-dev-content/site/docs/v2/components/events.md
@@ -23,7 +23,7 @@ In addition to the standard `addEventListener` API, Lit introduces a declarative
You can use `@` expressions in your template to add event listeners to elements in your component's template. Declarative event listeners are added when the template is rendered.
-{% playground-example "docs/components/events/child/" "my-element.ts" %}
+{% playground-example "v2-docs/components/events/child/" "my-element.ts" %}
#### Customizing event listener options {#event-options-decorator}
@@ -75,7 +75,7 @@ However, events fired from the component's shadow DOM are retargeted when heard
Retargeting can interfere with event delegation, and to avoid it, event listeners can be added to the component's shadow root itself. Since the `shadowRoot` is not available in the `constructor`, event listeners can be added in the `createRenderRoot` method as follows. Please note that it's important to make sure to return the shadow root from the `createRenderRoot` method.
-{% playground-example "docs/components/events/host/" "my-element.ts" %}
+{% playground-example "v2-docs/components/events/host/" "my-element.ts" %}
### Adding event listeners to other elements
@@ -108,7 +108,7 @@ Using event delegation can reduce the number of event listeners used and therefo
Bubbling events can be heard on any ancestor element in the DOM. You can take advantage of this by adding a single event listener on an ancestor component to be notified of a bubbling event dispatched by any of its descendants in the DOM. Use the event's `target` property to take specific action based on the element that dispatched the event.
-{% playground-example "docs/components/events/delegation/" "my-element.ts" %}
+{% playground-example "v2-docs/components/events/delegation/" "my-element.ts" %}
#### Asynchronously adding event listeners { #async-events }
@@ -166,7 +166,7 @@ See the [documentation for `this` on MDN](https://developer.mozilla.org/en-US/do
When listening to events on repeated items, it's often convenient to use [event delegation](#event-delegation) if the event bubbles. When an event does not bubble, a listener can be added on the repeated elements. Here's an example of both methods:
-{% playground-example "docs/components/events/list/" "my-element.ts" %}
+{% playground-example "v2-docs/components/events/list/" "my-element.ts" %}
## Dispatching events { #dispatching-events }
@@ -195,13 +195,13 @@ Similarly, a menu component should dispatch an event when the user selects a men
This typically means that a component should dispatch an event in response to another event to which it is listening.
-{% playground-ide "docs/components/events/dispatch/" "my-dispatcher.ts" %}
+{% playground-ide "v2-docs/components/events/dispatch/" "my-dispatcher.ts" %}
### Dispatching events after an element updates
Often, an event should be fired only after an element updates and renders. This might be necessary if an event is intended to communicate a change in rendered state based on user interaction. In this case, the component's `updateComplete` Promise can be awaited after changing state, but before dispatching the event.
-{% playground-ide "docs/components/events/update/" "my-dispatcher.ts" %}
+{% playground-ide "v2-docs/components/events/update/" "my-dispatcher.ts" %}
### Using standard or custom events { #standard-custom-events }
@@ -295,4 +295,4 @@ Another way to communicate between the dispatcher and listener is via the `preve
Both of these techniques are used in the following example:
-{% playground-ide "docs/components/events/comm/" "my-listener.ts" %}
+{% playground-ide "v2-docs/components/events/comm/" "my-listener.ts" %}
diff --git a/packages/lit-dev-content/site/docs/v2/components/overview.md b/packages/lit-dev-content/site/docs/v2/components/overview.md
index 9cb1de6ba..6bfa6b491 100644
--- a/packages/lit-dev-content/site/docs/v2/components/overview.md
+++ b/packages/lit-dev-content/site/docs/v2/components/overview.md
@@ -25,4 +25,4 @@ Creating a Lit component involves a number of concepts:
Here's a sample component:
-{% playground-example "docs/components/overview/simple-greeting" "simple-greeting.ts" %}
+{% playground-example "v2-docs/components/overview/simple-greeting" "simple-greeting.ts" %}
diff --git a/packages/lit-dev-content/site/docs/v2/components/rendering.md b/packages/lit-dev-content/site/docs/v2/components/rendering.md
index a192c596f..e15ff68a9 100644
--- a/packages/lit-dev-content/site/docs/v2/components/rendering.md
+++ b/packages/lit-dev-content/site/docs/v2/components/rendering.md
@@ -13,7 +13,7 @@ Add a template to your component to define what it should render. Templates can
To define a template for a Lit component, add a `render()` method:
-{% playground-example "docs/templates/define" "my-element.ts" %}
+{% playground-example "v2-docs/templates/define" "my-element.ts" %}
Write your template in HTML inside a JavaScript [tagged template literal](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates) using Lit's [`html`](/docs/v2/api/templates/#html) tag function.
@@ -52,7 +52,7 @@ For more information, see [Reactive properties](/docs/v2/components/properties/)
You can compose Lit templates from other templates. The following example composes a template for a component called `` from smaller templates for the page's header, footer, and main content:
-{% playground-example "docs/templates/compose" "my-page.ts" %}
+{% playground-example "v2-docs/templates/compose" "my-page.ts" %}
In this example, the individual templates are defined as instance methods, so a subclass could extend this component and override one or more templates.
@@ -64,7 +64,7 @@ Move example to composition section, add xref.
You can also compose templates by importing other elements and using them in your template:
-{% playground-ide "docs/templates/composeimports" %}
+{% playground-ide "v2-docs/templates/composeimports" %}
## When templates render
diff --git a/packages/lit-dev-content/site/docs/v2/components/shadow-dom.md b/packages/lit-dev-content/site/docs/v2/components/shadow-dom.md
index 770e06f35..c185ca4cf 100644
--- a/packages/lit-dev-content/site/docs/v2/components/shadow-dom.md
+++ b/packages/lit-dev-content/site/docs/v2/components/shadow-dom.md
@@ -144,7 +144,7 @@ To render children, your template needs to include one or more [`` element
To render an element's children, create a `` for them in the element's template. The children aren't _moved_ in the DOM tree, but they're rendered _as if_ they were children of the ``. For example:
-{% playground-ide "docs/components/shadowdom/slots/" %}
+{% playground-ide "v2-docs/components/shadowdom/slots/" %}
### Using named slots
@@ -158,7 +158,7 @@ To assign a child to a specific slot, ensure that the child's `slot` attribute m
For example, `
...
` will only be placed in ``.
-{% playground-ide "docs/components/shadowdom/namedslots/" %}
+{% playground-ide "v2-docs/components/shadowdom/namedslots/" %}
### Specifying slot fallback content {#fallback}
@@ -294,4 +294,4 @@ For example, to render the template into the main DOM tree as your element's chi
-{% playground-ide "docs/components/shadowdom/renderroot/" %}
+{% playground-ide "v2-docs/components/shadowdom/renderroot/" %}
diff --git a/packages/lit-dev-content/site/docs/v2/components/styles.md b/packages/lit-dev-content/site/docs/v2/components/styles.md
index 94f2315ce..045530ef5 100644
--- a/packages/lit-dev-content/site/docs/v2/components/styles.md
+++ b/packages/lit-dev-content/site/docs/v2/components/styles.md
@@ -17,7 +17,7 @@ Shadow DOM provides strong encapsulation for styling. If Lit did not use Shadow
You define scoped styles in the static `styles` class field using the tagged template literal `css` function. Defining styles this way results in the most optimal performance:
-{% playground-example "docs/components/style/basic" "my-element.ts" %}
+{% playground-example "v2-docs/components/style/basic" "my-element.ts" %}
The styles you add to your component are _scoped_ using shadow DOM. For a quick overview, see [Shadow DOM](#shadow-dom).
@@ -76,7 +76,7 @@ static styles = css`
Using an array of tagged template literals, a component can inherit the styles from a superclass, and add its own styles:
-{% playground-ide "docs/components/style/superstyles" %}
+{% playground-ide "v2-docs/components/style/superstyles" %}
You can also use `super.styles` to reference the superclass's styles property in JavaScript. If you're using TypeScript, we recommend avoiding `super.styles` since the compiler doesn't always convert it correctly. Explicitly referencing the superclass, as shown in the example, avoids this issue.
@@ -161,7 +161,7 @@ To create default styles for the host element, use the `:host` CSS pseudo-class
* `:host` selects the host element.
* :host(selector) selects the host element, but only if the host element matches _selector_.
-{% playground-example "docs/components/style/host" "my-element.ts" %}
+{% playground-example "v2-docs/components/style/host" "my-element.ts" %}
Note that the host element can be affected by styles from outside the shadow tree, as well, so you should consider the styles you set in `:host` and `:host()` rules as _default styles_ that can be overridden by the user. For example:
@@ -183,7 +183,7 @@ Use the `::slotted()` CSS pseudo-element to select children that are included in
* `::slotted(p)` matches slotted paragraphs.
* `p ::slotted(*)` matches slotted elements where the `` is a descendant of a paragraph element.
-{% playground-example "docs/components/style/slottedselector" "my-element.ts" %}
+{% playground-example "v2-docs/components/style/slottedselector" "my-element.ts" %}
Note that **only direct slotted children** can be styled with `::slotted()`.
@@ -310,7 +310,7 @@ To use `styleMap` and/or `classMap`:
2. Use `classMap` and/or `styleMap` in your element template:
-{% playground-example "docs/components/style/maps" "my-element.ts" %}
+{% playground-example "v2-docs/components/style/maps" "my-element.ts" %}
See [classMap](/docs/v2/templates/directives/#classmap) and [styleMap](/docs/v2/templates/directives/#stylemap) for more information.
@@ -318,7 +318,7 @@ See [classMap](/docs/v2/templates/directives/#classmap) and [styleMap](/docs/v2/
By using [CSS inheritance](#inheritance) and [CSS variables and custom properties](#customprops) together, it's easy to create themable elements. By applying css selectors to customize CSS custom properties, tree-based and per-instance theming is straightforward to apply. Here's an example:
-{% playground-example "docs/components/style/theming" "my-element.ts" %}
+{% playground-example "v2-docs/components/style/theming" "my-element.ts" %}
### CSS inheritance {#inheritance}
diff --git a/packages/lit-dev-content/site/docs/v2/composition/component-composition.md b/packages/lit-dev-content/site/docs/v2/composition/component-composition.md
index 3bb03ab82..0e926ae7c 100644
--- a/packages/lit-dev-content/site/docs/v2/composition/component-composition.md
+++ b/packages/lit-dev-content/site/docs/v2/composition/component-composition.md
@@ -83,7 +83,7 @@ A simple way to implement the mediator pattern is by having the owning component
In the following example, the mediator element listens for events from the input and button elements in its shadow DOM. It controls the enabled state of the button so the user can only click **Submit** when there's text in the input.
-{% playground-example "docs/composition/mediator-pattern" "mediator-element.ts" %}
+{% playground-example "v2-docs/composition/mediator-pattern" "mediator-element.ts" %}
Other mediator patterns include flux/Redux-style patterns where a store mediates changes and updates components via subscriptions. Having components directly subscribe to changes can help avoid needing every parent to pass along all data required by its children.
diff --git a/packages/lit-dev-content/site/docs/v2/composition/controllers.md b/packages/lit-dev-content/site/docs/v2/composition/controllers.md
index 571d38b55..9ccab7d21 100644
--- a/packages/lit-dev-content/site/docs/v2/composition/controllers.md
+++ b/packages/lit-dev-content/site/docs/v2/composition/controllers.md
@@ -21,7 +21,7 @@ You can use controllers to implement features that require their own state and a
Reactive controllers allow you to build components by composing smaller pieces that aren't themselves components. They can be thought of as reusable, partial component definitions, with their own identity and state.
-{% playground-ide "docs/controllers/overview" "clock-controller.ts" %}
+{% playground-ide "v2-docs/controllers/overview" "clock-controller.ts" %}
Reactive controllers are similar in many ways to class mixins. The main difference is that they have their own identity and don't add to the component's prototype, which helps contain their APIs and lets you use multiple controller instances per host component. See [Controllers and mixins](/docs/v2/composition/overview/#controllers-and-mixins) for more details.
@@ -272,7 +272,7 @@ Reactive controllers can be used to connect to external inputs. For example, key
This example shows how a controller can perform setup and cleanup work when its host is connected and disconnected, and request an update when an input changes:
-{% playground-ide "docs/controllers/mouse" "my-element.ts" %}
+{% playground-ide "v2-docs/controllers/mouse" "my-element.ts" %}
### Asynchronous tasks
@@ -284,7 +284,7 @@ Controllers are a great way to bundle task execution and state to make it easy t
You can use `Task` to create a custom controller with an API tailored for your specific task. Here we wrap `Task` in a `NamesController` that can fetch one of a specified list of names from a demo REST API. `NameController` exposes a `kind` property as an input, and a `render()` method that can render one of four templates depending on the task state. The task logic, and how it updates the host, are abstracted from the host component.
-{% playground-ide "docs/controllers/names" %}
+{% playground-ide "v2-docs/controllers/names" %}
{% todo %}
diff --git a/packages/lit-dev-content/site/docs/v2/composition/mixins.md b/packages/lit-dev-content/site/docs/v2/composition/mixins.md
index 74be8dacc..8dfd0ca65 100644
--- a/packages/lit-dev-content/site/docs/v2/composition/mixins.md
+++ b/packages/lit-dev-content/site/docs/v2/composition/mixins.md
@@ -127,7 +127,7 @@ The mixin in the example below adds a `highlight` reactive property to the
element and a `renderHighlight()` method that the user can call to wrap some
content. The wrapped content is styled yellow when the `highlight` property/attribute is set.
-{% playground-ide "docs/mixins/highlightable/" "highlightable.ts" %}
+{% playground-ide "v2-docs/mixins/highlightable/" "highlightable.ts" %}
Note in the example above, the user of the mixin is expected to call the
`renderHighlight()` method from their `render()` method, as well as take care to add
diff --git a/packages/lit-dev-content/site/docs/v2/index.md b/packages/lit-dev-content/site/docs/v2/index.md
index 7873c22fb..ce94cab5c 100644
--- a/packages/lit-dev-content/site/docs/v2/index.md
+++ b/packages/lit-dev-content/site/docs/v2/index.md
@@ -37,7 +37,7 @@ Each Lit component is a self-contained unit of UI, assembled from smaller buildi
Here’s a small but non-trivial component (a countdown timer) that illustrates what Lit code looks like and highlights several key features:
-{% playground-ide "docs/what-is-lit/" %}
+{% playground-ide "v2-docs/what-is-lit/" %}
Some things to note:
diff --git a/packages/lit-dev-content/site/docs/v2/internal/demos.md b/packages/lit-dev-content/site/docs/v2/internal/demos.md
index 612ac10b4..44e8079e9 100644
--- a/packages/lit-dev-content/site/docs/v2/internal/demos.md
+++ b/packages/lit-dev-content/site/docs/v2/internal/demos.md
@@ -32,10 +32,10 @@ Additional `project.json` config options:
- `previewHeight`: Height of the preview in pixels (default `120px`).
```
-{% raw %}{% playground-example "docs/templates/define" "my-element.ts" %}{% endraw %}
+{% raw %}{% playground-example "v2-docs/templates/define" "my-element.ts" %}{% endraw %}
```
-{% playground-example "docs/templates/define" "my-element.ts" %}
+{% playground-example "v2-docs/templates/define" "my-element.ts" %}
## Full IDE
@@ -45,10 +45,10 @@ Arguments:
1. (Required) Path of the project dir from `samples/PATH/project.json`.
```
-{% raw %}{% playground-ide "docs/templates/define" %}{% endraw %}
+{% raw %}{% playground-ide "v2-docs/templates/define" %}{% endraw %}
```
-{% playground-ide "docs/templates/define" %}
+{% playground-ide "v2-docs/templates/define" %}
## Package versions
@@ -57,6 +57,6 @@ configuration that resolve imports to `lit-next`:
```json
{
- "extends": "/samples/base.json",
+ "extends": "/samples/v2-base.json",
}
```
\ No newline at end of file
diff --git a/packages/lit-dev-content/site/docs/v2/internal/styles.md b/packages/lit-dev-content/site/docs/v2/internal/styles.md
index 900f8775e..36582b804 100644
--- a/packages/lit-dev-content/site/docs/v2/internal/styles.md
+++ b/packages/lit-dev-content/site/docs/v2/internal/styles.md
@@ -146,8 +146,8 @@ customElements.define('my-element', MyElement);
## Interactive code snippet
-{% playground-example "docs/templates/define" "my-element.ts" %}
+{% playground-example "v2-docs/templates/define" "my-element.ts" %}
## Full IDE
-{% playground-ide "docs/templates/define" %}
+{% playground-ide "v2-docs/templates/define" %}
diff --git a/packages/lit-dev-content/site/docs/v2/localization/runtime-mode.md b/packages/lit-dev-content/site/docs/v2/localization/runtime-mode.md
index 071ba0e55..f29ea22b5 100644
--- a/packages/lit-dev-content/site/docs/v2/localization/runtime-mode.md
+++ b/packages/lit-dev-content/site/docs/v2/localization/runtime-mode.md
@@ -30,7 +30,7 @@ export const templates = {
The following example demonstrates an application built with Lit Localize
runtime mode:
-{% playground-example "docs/libraries/localization/runtime" "x-greeter.ts" %}
+{% playground-example "v2-docs/libraries/localization/runtime" "x-greeter.ts" %}
The Lit GitHub repo includes full working examples
([JavaScript](https://github.com/lit/lit/tree/main/packages/localize/examples/runtime-js),
diff --git a/packages/lit-dev-content/site/docs/v2/templates/expressions.md b/packages/lit-dev-content/site/docs/v2/templates/expressions.md
index cc293e924..4346efc0d 100644
--- a/packages/lit-dev-content/site/docs/v2/templates/expressions.md
+++ b/packages/lit-dev-content/site/docs/v2/templates/expressions.md
@@ -118,7 +118,7 @@ html``
This basic example shows a variety of different kinds of expressions.
-{% playground-example "docs/templates/expressions" "my-element.ts" %}
+{% playground-example "v2-docs/templates/expressions" "my-element.ts" %}
The following sections describe each kind of expression in more detail. For more information about the structure of templates, see [Well-formed HTML](#well-formed-html) and [Valid expression locations](#expression-locations).
diff --git a/packages/lit-dev-content/site/docs/v2/templates/lists.md b/packages/lit-dev-content/site/docs/v2/templates/lists.md
index 9c2673b9d..35fa8194d 100644
--- a/packages/lit-dev-content/site/docs/v2/templates/lists.md
+++ b/packages/lit-dev-content/site/docs/v2/templates/lists.md
@@ -17,7 +17,7 @@ Lit also provides a `repeat` directive to build certain kinds of dynamic lists m
When an expression in the child position in returns an array or iterable, Lit renders all of the items in the array:
-{% playground-example "docs/templates/lists-arrays/" "my-element.ts" %}
+{% playground-example "v2-docs/templates/lists-arrays/" "my-element.ts" %}
In most cases, you'll want to transform the array items into a more useful form.
@@ -25,7 +25,7 @@ In most cases, you'll want to transform the array items into a more useful form.
To render lists, you can use `map` to transform a list of data into a list of templates:
-{% playground-example "docs/templates/lists-map/" "my-element.ts" %}
+{% playground-example "v2-docs/templates/lists-map/" "my-element.ts" %}
Note that this expression returns an array of `TemplateResult` objects. Lit will render an array or iterable of sub-templates and other values.
@@ -68,7 +68,7 @@ Where:
For example:
-{% playground-example "docs/templates/lists-repeat/" "my-element.ts" %}
+{% playground-example "v2-docs/templates/lists-repeat/" "my-element.ts" %}
If you re-sort the `employees` array, the `repeat` directive reorders the existing DOM nodes.
diff --git a/packages/lit-dev-content/site/docs/v3/components/events.md b/packages/lit-dev-content/site/docs/v3/components/events.md
index 2aeba606c..48ae773a4 100644
--- a/packages/lit-dev-content/site/docs/v3/components/events.md
+++ b/packages/lit-dev-content/site/docs/v3/components/events.md
@@ -23,7 +23,7 @@ In addition to the standard `addEventListener` API, Lit introduces a declarative
You can use `@` expressions in your template to add event listeners to elements in your component's template. Declarative event listeners are added when the template is rendered.
-{% playground-example "docs/components/events/child/" "my-element.ts" %}
+{% playground-example "v3-docs/components/events/child/" "my-element.ts" %}
#### Customizing event listener options {#event-options-decorator}
@@ -75,7 +75,7 @@ However, events fired from the component's shadow DOM are retargeted when heard
Retargeting can interfere with event delegation, and to avoid it, event listeners can be added to the component's shadow root itself. Since the `shadowRoot` is not available in the `constructor`, event listeners can be added in the `createRenderRoot` method as follows. Please note that it's important to make sure to return the shadow root from the `createRenderRoot` method.
-{% playground-example "docs/components/events/host/" "my-element.ts" %}
+{% playground-example "v3-docs/components/events/host/" "my-element.ts" %}
### Adding event listeners to other elements
@@ -108,7 +108,7 @@ Using event delegation can reduce the number of event listeners used and therefo
Bubbling events can be heard on any ancestor element in the DOM. You can take advantage of this by adding a single event listener on an ancestor component to be notified of a bubbling event dispatched by any of its descendants in the DOM. Use the event's `target` property to take specific action based on the element that dispatched the event.
-{% playground-example "docs/components/events/delegation/" "my-element.ts" %}
+{% playground-example "v3-docs/components/events/delegation/" "my-element.ts" %}
#### Asynchronously adding event listeners { #async-events }
@@ -166,7 +166,7 @@ See the [documentation for `this` on MDN](https://developer.mozilla.org/en-US/do
When listening to events on repeated items, it's often convenient to use [event delegation](#event-delegation) if the event bubbles. When an event does not bubble, a listener can be added on the repeated elements. Here's an example of both methods:
-{% playground-example "docs/components/events/list/" "my-element.ts" %}
+{% playground-example "v3-docs/components/events/list/" "my-element.ts" %}
## Dispatching events { #dispatching-events }
@@ -195,13 +195,13 @@ Similarly, a menu component should dispatch an event when the user selects a men
This typically means that a component should dispatch an event in response to another event to which it is listening.
-{% playground-ide "docs/components/events/dispatch/" "my-dispatcher.ts" %}
+{% playground-ide "v3-docs/components/events/dispatch/" "my-dispatcher.ts" %}
### Dispatching events after an element updates
Often, an event should be fired only after an element updates and renders. This might be necessary if an event is intended to communicate a change in rendered state based on user interaction. In this case, the component's `updateComplete` Promise can be awaited after changing state, but before dispatching the event.
-{% playground-ide "docs/components/events/update/" "my-dispatcher.ts" %}
+{% playground-ide "v3-docs/components/events/update/" "my-dispatcher.ts" %}
### Using standard or custom events { #standard-custom-events }
@@ -295,4 +295,4 @@ Another way to communicate between the dispatcher and listener is via the `preve
Both of these techniques are used in the following example:
-{% playground-ide "docs/components/events/comm/" "my-listener.ts" %}
+{% playground-ide "v3-docs/components/events/comm/" "my-listener.ts" %}
diff --git a/packages/lit-dev-content/site/docs/v3/components/overview.md b/packages/lit-dev-content/site/docs/v3/components/overview.md
index a83aefb49..c365610e2 100644
--- a/packages/lit-dev-content/site/docs/v3/components/overview.md
+++ b/packages/lit-dev-content/site/docs/v3/components/overview.md
@@ -25,4 +25,4 @@ Creating a Lit component involves a number of concepts:
Here's a sample component:
-{% playground-example "docs/components/overview/simple-greeting" "simple-greeting.ts" %}
+{% playground-example "v3-docs/components/overview/simple-greeting" "simple-greeting.ts" %}
diff --git a/packages/lit-dev-content/site/docs/v3/components/rendering.md b/packages/lit-dev-content/site/docs/v3/components/rendering.md
index c6ef8c55f..3f4addd91 100644
--- a/packages/lit-dev-content/site/docs/v3/components/rendering.md
+++ b/packages/lit-dev-content/site/docs/v3/components/rendering.md
@@ -13,7 +13,7 @@ Add a template to your component to define what it should render. Templates can
To define a template for a Lit component, add a `render()` method:
-{% playground-example "docs/templates/define" "my-element.ts" %}
+{% playground-example "v3-docs/templates/define" "my-element.ts" %}
Write your template in HTML inside a JavaScript [tagged template literal](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates) using Lit's [`html`](/docs/v3/api/templates/#html) tag function.
@@ -52,7 +52,7 @@ For more information, see [Reactive properties](/docs/v3/components/properties/)
You can compose Lit templates from other templates. The following example composes a template for a component called `` from smaller templates for the page's header, footer, and main content:
-{% playground-example "docs/templates/compose" "my-page.ts" %}
+{% playground-example "v3-docs/templates/compose" "my-page.ts" %}
In this example, the individual templates are defined as instance methods, so a subclass could extend this component and override one or more templates.
@@ -64,7 +64,7 @@ Move example to composition section, add xref.
You can also compose templates by importing other elements and using them in your template:
-{% playground-ide "docs/templates/composeimports" %}
+{% playground-ide "v3-docs/templates/composeimports" %}
## When templates render
diff --git a/packages/lit-dev-content/site/docs/v3/components/shadow-dom.md b/packages/lit-dev-content/site/docs/v3/components/shadow-dom.md
index 1b05ecab1..cf36a093f 100644
--- a/packages/lit-dev-content/site/docs/v3/components/shadow-dom.md
+++ b/packages/lit-dev-content/site/docs/v3/components/shadow-dom.md
@@ -144,7 +144,7 @@ To render children, your template needs to include one or more [`` element
To render an element's children, create a `` for them in the element's template. The children aren't _moved_ in the DOM tree, but they're rendered _as if_ they were children of the ``. For example:
-{% playground-ide "docs/components/shadowdom/slots/" %}
+{% playground-ide "v3-docs/components/shadowdom/slots/" %}
### Using named slots
@@ -158,7 +158,7 @@ To assign a child to a specific slot, ensure that the child's `slot` attribute m
For example, `
...
` will only be placed in ``.
-{% playground-ide "docs/components/shadowdom/namedslots/" %}
+{% playground-ide "v3-docs/components/shadowdom/namedslots/" %}
### Specifying slot fallback content {#fallback}
@@ -294,4 +294,4 @@ For example, to render the template into the main DOM tree as your element's chi
-{% playground-ide "docs/components/shadowdom/renderroot/" %}
+{% playground-ide "v3-docs/components/shadowdom/renderroot/" %}
diff --git a/packages/lit-dev-content/site/docs/v3/components/styles.md b/packages/lit-dev-content/site/docs/v3/components/styles.md
index e1cbf6a2e..aab79cc30 100644
--- a/packages/lit-dev-content/site/docs/v3/components/styles.md
+++ b/packages/lit-dev-content/site/docs/v3/components/styles.md
@@ -17,7 +17,7 @@ Shadow DOM provides strong encapsulation for styling. If Lit did not use Shadow
You define scoped styles in the static `styles` class field using the tagged template literal `css` function. Defining styles this way results in the most optimal performance:
-{% playground-example "docs/components/style/basic" "my-element.ts" %}
+{% playground-example "v3-docs/components/style/basic" "my-element.ts" %}
The styles you add to your component are _scoped_ using shadow DOM. For a quick overview, see [Shadow DOM](#shadow-dom).
@@ -76,7 +76,7 @@ static styles = css`
Using an array of tagged template literals, a component can inherit the styles from a superclass, and add its own styles:
-{% playground-ide "docs/components/style/superstyles" %}
+{% playground-ide "v3-docs/components/style/superstyles" %}
You can also use `super.styles` to reference the superclass's styles property in JavaScript. If you're using TypeScript, we recommend avoiding `super.styles` since the compiler doesn't always convert it correctly. Explicitly referencing the superclass, as shown in the example, avoids this issue.
@@ -161,7 +161,7 @@ To create default styles for the host element, use the `:host` CSS pseudo-class
* `:host` selects the host element.
* :host(selector) selects the host element, but only if the host element matches _selector_.
-{% playground-example "docs/components/style/host" "my-element.ts" %}
+{% playground-example "v3-docs/components/style/host" "my-element.ts" %}
Note that the host element can be affected by styles from outside the shadow tree, as well, so you should consider the styles you set in `:host` and `:host()` rules as _default styles_ that can be overridden by the user. For example:
@@ -183,7 +183,7 @@ Use the `::slotted()` CSS pseudo-element to select children that are included in
* `::slotted(p)` matches slotted paragraphs.
* `p ::slotted(*)` matches slotted elements where the `` is a descendant of a paragraph element.
-{% playground-example "docs/components/style/slottedselector" "my-element.ts" %}
+{% playground-example "v3-docs/components/style/slottedselector" "my-element.ts" %}
Note that **only direct slotted children** can be styled with `::slotted()`.
@@ -310,7 +310,7 @@ To use `styleMap` and/or `classMap`:
2. Use `classMap` and/or `styleMap` in your element template:
-{% playground-example "docs/components/style/maps" "my-element.ts" %}
+{% playground-example "v3-docs/components/style/maps" "my-element.ts" %}
See [classMap](/docs/v3/templates/directives/#classmap) and [styleMap](/docs/v3/templates/directives/#stylemap) for more information.
@@ -318,7 +318,7 @@ See [classMap](/docs/v3/templates/directives/#classmap) and [styleMap](/docs/v3/
By using [CSS inheritance](#inheritance) and [CSS variables and custom properties](#customprops) together, it's easy to create themable elements. By applying css selectors to customize CSS custom properties, tree-based and per-instance theming is straightforward to apply. Here's an example:
-{% playground-example "docs/components/style/theming" "my-element.ts" %}
+{% playground-example "v3-docs/components/style/theming" "my-element.ts" %}
### CSS inheritance {#inheritance}
diff --git a/packages/lit-dev-content/site/docs/v3/composition/component-composition.md b/packages/lit-dev-content/site/docs/v3/composition/component-composition.md
index 2c501310e..38cda5d61 100644
--- a/packages/lit-dev-content/site/docs/v3/composition/component-composition.md
+++ b/packages/lit-dev-content/site/docs/v3/composition/component-composition.md
@@ -83,7 +83,7 @@ A simple way to implement the mediator pattern is by having the owning component
In the following example, the mediator element listens for events from the input and button elements in its shadow DOM. It controls the enabled state of the button so the user can only click **Submit** when there's text in the input.
-{% playground-example "docs/composition/mediator-pattern" "mediator-element.ts" %}
+{% playground-example "v3-docs/composition/mediator-pattern" "mediator-element.ts" %}
Other mediator patterns include flux/Redux-style patterns where a store mediates changes and updates components via subscriptions. Having components directly subscribe to changes can help avoid needing every parent to pass along all data required by its children.
diff --git a/packages/lit-dev-content/site/docs/v3/composition/controllers.md b/packages/lit-dev-content/site/docs/v3/composition/controllers.md
index b91778362..7fd608050 100644
--- a/packages/lit-dev-content/site/docs/v3/composition/controllers.md
+++ b/packages/lit-dev-content/site/docs/v3/composition/controllers.md
@@ -21,7 +21,7 @@ You can use controllers to implement features that require their own state and a
Reactive controllers allow you to build components by composing smaller pieces that aren't themselves components. They can be thought of as reusable, partial component definitions, with their own identity and state.
-{% playground-ide "docs/controllers/overview" "clock-controller.ts" %}
+{% playground-ide "v3-docs/controllers/overview" "clock-controller.ts" %}
Reactive controllers are similar in many ways to class mixins. The main difference is that they have their own identity and don't add to the component's prototype, which helps contain their APIs and lets you use multiple controller instances per host component. See [Controllers and mixins](/docs/v3/composition/overview/#controllers-and-mixins) for more details.
@@ -272,7 +272,7 @@ Reactive controllers can be used to connect to external inputs. For example, key
This example shows how a controller can perform setup and cleanup work when its host is connected and disconnected, and request an update when an input changes:
-{% playground-ide "docs/controllers/mouse" "my-element.ts" %}
+{% playground-ide "v3-docs/controllers/mouse" "my-element.ts" %}
### Asynchronous tasks
@@ -284,7 +284,7 @@ Controllers are a great way to bundle task execution and state to make it easy t
You can use `Task` to create a custom controller with an API tailored for your specific task. Here we wrap `Task` in a `NamesController` that can fetch one of a specified list of names from a demo REST API. `NameController` exposes a `kind` property as an input, and a `render()` method that can render one of four templates depending on the task state. The task logic, and how it updates the host, are abstracted from the host component.
-{% playground-ide "docs/controllers/names" %}
+{% playground-ide "v3-docs/controllers/names" %}
{% todo %}
diff --git a/packages/lit-dev-content/site/docs/v3/composition/mixins.md b/packages/lit-dev-content/site/docs/v3/composition/mixins.md
index 9a0451964..a59592e55 100644
--- a/packages/lit-dev-content/site/docs/v3/composition/mixins.md
+++ b/packages/lit-dev-content/site/docs/v3/composition/mixins.md
@@ -127,7 +127,7 @@ The mixin in the example below adds a `highlight` reactive property to the
element and a `renderHighlight()` method that the user can call to wrap some
content. The wrapped content is styled yellow when the `highlight` property/attribute is set.
-{% playground-ide "docs/mixins/highlightable/" "highlightable.ts" %}
+{% playground-ide "v3-docs/mixins/highlightable/" "highlightable.ts" %}
Note in the example above, the user of the mixin is expected to call the
`renderHighlight()` method from their `render()` method, as well as take care to add
diff --git a/packages/lit-dev-content/site/docs/v3/index.md b/packages/lit-dev-content/site/docs/v3/index.md
index 0e6562384..f22271c54 100644
--- a/packages/lit-dev-content/site/docs/v3/index.md
+++ b/packages/lit-dev-content/site/docs/v3/index.md
@@ -36,7 +36,7 @@ Each Lit component is a self-contained unit of UI, assembled from smaller buildi
Here’s a small but non-trivial component (a countdown timer) that illustrates what Lit code looks like and highlights several key features:
-{% playground-ide "docs/what-is-lit/" %}
+{% playground-ide "v3-docs/what-is-lit/" %}
Some things to note:
diff --git a/packages/lit-dev-content/site/docs/v3/internal/demos.md b/packages/lit-dev-content/site/docs/v3/internal/demos.md
index 612ac10b4..55e1bb39c 100644
--- a/packages/lit-dev-content/site/docs/v3/internal/demos.md
+++ b/packages/lit-dev-content/site/docs/v3/internal/demos.md
@@ -32,10 +32,10 @@ Additional `project.json` config options:
- `previewHeight`: Height of the preview in pixels (default `120px`).
```
-{% raw %}{% playground-example "docs/templates/define" "my-element.ts" %}{% endraw %}
+{% raw %}{% playground-example "v3-docs/templates/define" "my-element.ts" %}{% endraw %}
```
-{% playground-example "docs/templates/define" "my-element.ts" %}
+{% playground-example "v3-docs/templates/define" "my-element.ts" %}
## Full IDE
@@ -45,10 +45,10 @@ Arguments:
1. (Required) Path of the project dir from `samples/PATH/project.json`.
```
-{% raw %}{% playground-ide "docs/templates/define" %}{% endraw %}
+{% raw %}{% playground-ide "v3-docs/templates/define" %}{% endraw %}
```
-{% playground-ide "docs/templates/define" %}
+{% playground-ide "v3-docs/templates/define" %}
## Package versions
@@ -57,6 +57,6 @@ configuration that resolve imports to `lit-next`:
```json
{
- "extends": "/samples/base.json",
+ "extends": "/samples/v3-base.json",
}
```
\ No newline at end of file
diff --git a/packages/lit-dev-content/site/docs/v3/internal/styles.md b/packages/lit-dev-content/site/docs/v3/internal/styles.md
index 900f8775e..2aae10691 100644
--- a/packages/lit-dev-content/site/docs/v3/internal/styles.md
+++ b/packages/lit-dev-content/site/docs/v3/internal/styles.md
@@ -146,8 +146,8 @@ customElements.define('my-element', MyElement);
## Interactive code snippet
-{% playground-example "docs/templates/define" "my-element.ts" %}
+{% playground-example "v3-docs/templates/define" "my-element.ts" %}
## Full IDE
-{% playground-ide "docs/templates/define" %}
+{% playground-ide "v3-docs/templates/define" %}
diff --git a/packages/lit-dev-content/site/docs/v3/localization/runtime-mode.md b/packages/lit-dev-content/site/docs/v3/localization/runtime-mode.md
index 30e1e2eca..63fdbcab0 100644
--- a/packages/lit-dev-content/site/docs/v3/localization/runtime-mode.md
+++ b/packages/lit-dev-content/site/docs/v3/localization/runtime-mode.md
@@ -30,7 +30,7 @@ export const templates = {
The following example demonstrates an application built with Lit Localize
runtime mode:
-{% playground-example "docs/libraries/localization/runtime" "x-greeter.ts" %}
+{% playground-example "v3-docs/libraries/localization/runtime" "x-greeter.ts" %}
The Lit GitHub repo includes full working examples
([JavaScript](https://github.com/lit/lit/tree/main/packages/localize/examples/runtime-js),
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 88de1762e..a1cb470d6 100644
--- a/packages/lit-dev-content/site/docs/v3/templates/expressions.md
+++ b/packages/lit-dev-content/site/docs/v3/templates/expressions.md
@@ -118,7 +118,7 @@ html``
This basic example shows a variety of different kinds of expressions.
-{% playground-example "docs/templates/expressions" "my-element.ts" %}
+{% playground-example "v3-docs/templates/expressions" "my-element.ts" %}
The following sections describe each kind of expression in more detail. For more information about the structure of templates, see [Well-formed HTML](#well-formed-html) and [Valid expression locations](#expression-locations).
diff --git a/packages/lit-dev-content/site/docs/v3/templates/lists.md b/packages/lit-dev-content/site/docs/v3/templates/lists.md
index 432335cf1..e25014d0f 100644
--- a/packages/lit-dev-content/site/docs/v3/templates/lists.md
+++ b/packages/lit-dev-content/site/docs/v3/templates/lists.md
@@ -17,7 +17,7 @@ Lit also provides a `repeat` directive to build certain kinds of dynamic lists m
When an expression in the child position in returns an array or iterable, Lit renders all of the items in the array:
-{% playground-example "docs/templates/lists-arrays/" "my-element.ts" %}
+{% playground-example "v3-docs/templates/lists-arrays/" "my-element.ts" %}
In most cases, you'll want to transform the array items into a more useful form.
@@ -25,7 +25,7 @@ In most cases, you'll want to transform the array items into a more useful form.
To render lists, you can use `map` to transform a list of data into a list of templates:
-{% playground-example "docs/templates/lists-map/" "my-element.ts" %}
+{% playground-example "v3-docs/templates/lists-map/" "my-element.ts" %}
Note that this expression returns an array of `TemplateResult` objects. Lit will render an array or iterable of sub-templates and other values.
@@ -68,7 +68,7 @@ Where:
For example:
-{% playground-example "docs/templates/lists-repeat/" "my-element.ts" %}
+{% playground-example "v3-docs/templates/lists-repeat/" "my-element.ts" %}
If you re-sort the `employees` array, the `repeat` directive reorders the existing DOM nodes.
diff --git a/packages/lit-dev-tests/src/playwright/components-styles.spec.ts b/packages/lit-dev-tests/src/playwright/components-styles.spec.ts
index 97c613af8..dc2c91289 100644
--- a/packages/lit-dev-tests/src/playwright/components-styles.spec.ts
+++ b/packages/lit-dev-tests/src/playwright/components-styles.spec.ts
@@ -19,7 +19,7 @@ test.describe('docs/components/styles', () => {
// Wait for the exact playground preview we want to load.
await page.waitForSelector(
- 'litdev-example[project="docs/components/style/superstyles"] playground-preview [part="preview-loading-indicator"][aria-hidden="true"]'
+ 'litdev-example[project="v2-docs/components/style/superstyles"] playground-preview [part="preview-loading-indicator"][aria-hidden="true"]'
);
// Wait for the loading bar to fade out.
await page.waitForTimeout(250);
@@ -27,7 +27,7 @@ test.describe('docs/components/styles', () => {
await expect(
await page
.locator(
- 'litdev-example[project="docs/components/style/superstyles"] playground-preview'
+ 'litdev-example[project="v2-docs/components/style/superstyles"] playground-preview'
)
.screenshot()
).toMatchSnapshot('inheritingStylesPlaygroundPreview.png');