diff --git a/docs/_data/try.yml b/docs/_data/try.yml
index 2b243a8e..061c0985 100644
--- a/docs/_data/try.yml
+++ b/docs/_data/try.yml
@@ -6,19 +6,15 @@ toc:
create:
title: 1. Create
url: /try/create
- import:
- title: 2. Import
- url: /try/import
properties:
- title: 3. Properties
+ title: 2. Properties
url: /try/properties
logic:
- title: 4. Logic
+ title: 3. Logic
url: /try/logic
events:
- title: 5. Events
+ title: 4. Events
url: /try/events
style:
- title: 6. Style
+ title: 5. Style
url: /try/style
-
\ No newline at end of file
diff --git a/docs/_includes/projects/try/create/after/index.html b/docs/_includes/projects/try/create/after/index.html
index a097c2fe..245442f1 100644
--- a/docs/_includes/projects/try/create/after/index.html
+++ b/docs/_includes/projects/try/create/after/index.html
@@ -1,12 +1,9 @@
-
-
+
+
- lit-element code sample
+ LitElement Example
lit-element code sample
+ LitElement Example
+ TODO: Implement my-element!
lit-element code sample
-
+ LitElement Example
-
${this.message}
-
- ${this.myArray.map(item => html`${item} `)}
-
- ${this.myBool?
- html`Render some HTML if myBool is true
`:
+ ${this.myArray.map(item => html`${item} `)}
+ ${this.myBool ?
+ html`Render some HTML if myBool is true
` :
html`Render some other HTML if myBool is false
`}
-
-
- Click
+ Click
`;
}
-
- /**
- * DONE: Implement an event handler.
- */
clickHandler(event) {
console.log(event.target);
this.myBool = !this.myBool;
diff --git a/docs/_includes/projects/try/events/before/index.html b/docs/_includes/projects/try/events/before/index.html
index 205b902b..245442f1 100644
--- a/docs/_includes/projects/try/events/before/index.html
+++ b/docs/_includes/projects/try/events/before/index.html
@@ -1,17 +1,11 @@
-
-
+
+
- lit-element code sample
-
+ LitElement Example
-
${this.message}
-
- ${this.myArray.map(item => html`${item} `)}
-
- ${this.myBool?
- html`Render some HTML if myBool is true
`:
+ ${this.myArray.map(item => html`${item} `)}
+ ${this.myBool ?
+ html`Render some HTML if myBool is true
` :
html`Render some other HTML if myBool is false
`}
-
-
- Click
+
`;
}
-
- /**
- * TODO: Implement an event handler.
- */
+ // TODO: Add an event handler
}
customElements.define('my-element', MyElement);
diff --git a/docs/_includes/projects/try/import/after/index.html b/docs/_includes/projects/try/import/after/index.html
deleted file mode 100644
index c62101cf..00000000
--- a/docs/_includes/projects/try/import/after/index.html
+++ /dev/null
@@ -1,18 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
- Hello world! From my-element
- `;
- }
-}
-customElements.define('my-element', MyElement);
diff --git a/docs/_includes/projects/try/import/before/index.html b/docs/_includes/projects/try/import/before/index.html
deleted file mode 100644
index da2cc4eb..00000000
--- a/docs/_includes/projects/try/import/before/index.html
+++ /dev/null
@@ -1,17 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/docs/_includes/projects/try/import/before/index.ts b/docs/_includes/projects/try/import/before/index.ts
deleted file mode 100644
index ceb6f80b..00000000
--- a/docs/_includes/projects/try/import/before/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-// Import my-element module
-import './my-element.js';
diff --git a/docs/_includes/projects/try/import/before/manifest.json b/docs/_includes/projects/try/import/before/manifest.json
deleted file mode 100644
index 7550d863..00000000
--- a/docs/_includes/projects/try/import/before/manifest.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
- "files": [
- "my-element.js",
- "index.html",
- "index.ts"
- ],
- "title": "lit-element code sample",
- "description": "lit-element code sample",
- "template": "typescript",
- "dependencies": {
- "lit-element": "latest",
- "@webcomponents/webcomponentsjs": "latest"
- }
-}
diff --git a/docs/_includes/projects/try/import/before/my-element.js b/docs/_includes/projects/try/import/before/my-element.js
deleted file mode 100644
index 9f435e67..00000000
--- a/docs/_includes/projects/try/import/before/my-element.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import { LitElement, html } from 'lit-element';
-
-class MyElement extends LitElement {
- render() {
- return html`
- Hello world! From my-element
- `;
- }
-}
-customElements.define('my-element', MyElement);
diff --git a/docs/_includes/projects/try/logic/after/index.html b/docs/_includes/projects/try/logic/after/index.html
index 205b902b..245442f1 100644
--- a/docs/_includes/projects/try/logic/after/index.html
+++ b/docs/_includes/projects/try/logic/after/index.html
@@ -1,17 +1,11 @@
-
-
+
+
- lit-element code sample
-
+ LitElement Example
-
${this.message}
-
-
-
- ${this.myArray.map(item => html`${item} `)}
-
-
-
- ${this.myBool?
- html`Render some HTML if myBool is true
`:
+ ${this.myArray.map(item => html`${item} `)}
+ ${this.myBool ?
+ html`Render some HTML if myBool is true
` :
html`Render some other HTML if myBool is false
`}
`;
}
diff --git a/docs/_includes/projects/try/logic/before/index.html b/docs/_includes/projects/try/logic/before/index.html
index cf412668..245442f1 100644
--- a/docs/_includes/projects/try/logic/before/index.html
+++ b/docs/_includes/projects/try/logic/before/index.html
@@ -1,16 +1,11 @@
-
-
+
+
- lit-element code sample
+ LitElement Example
-
${this.message}
-
-
`;
}
}
customElements.define('my-element', MyElement);
+
\ No newline at end of file
diff --git a/docs/_includes/projects/try/properties/after/index.html b/docs/_includes/projects/try/properties/after/index.html
index cf412668..245442f1 100644
--- a/docs/_includes/projects/try/properties/after/index.html
+++ b/docs/_includes/projects/try/properties/after/index.html
@@ -1,16 +1,11 @@
-
-
+
+
- lit-element code sample
+ LitElement Example
-
${this.message}
diff --git a/docs/_includes/projects/try/properties/before/index.html b/docs/_includes/projects/try/properties/before/index.html
index 1a1c0a6e..245442f1 100644
--- a/docs/_includes/projects/try/properties/before/index.html
+++ b/docs/_includes/projects/try/properties/before/index.html
@@ -1,13 +1,9 @@
-
-
+
+
- lit-element code sample
-
+ LitElement Example
+
+ Hello world! From my-element
`;
}
}
diff --git a/docs/_includes/projects/try/style/after/index.html b/docs/_includes/projects/try/style/after/index.html
index 205b902b..245442f1 100644
--- a/docs/_includes/projects/try/style/after/index.html
+++ b/docs/_includes/projects/try/style/after/index.html
@@ -1,17 +1,11 @@
-
-
+
+
- lit-element code sample
-
+ LitElement Example
-
styled paragraph
-
${this.message}
-
- ${this.myArray.map(item => html`${item} `)}
-
- ${this.myBool?
- html`Render some HTML if myBool is true
`:
+ ${this.myArray.map(item => html`${item} `)}
+ ${this.myBool ?
+ html`Render some HTML if myBool is true
` :
html`Render some other HTML if myBool is false
`}
Click
`;
}
-
clickHandler(event) {
console.log(event.target);
this.myBool = !this.myBool;
diff --git a/docs/_includes/projects/try/style/before/index.html b/docs/_includes/projects/try/style/before/index.html
index 205b902b..245442f1 100644
--- a/docs/_includes/projects/try/style/before/index.html
+++ b/docs/_includes/projects/try/style/before/index.html
@@ -1,17 +1,11 @@
-
-
+
+
- lit-element code sample
-
+ LitElement Example
-
${this.message}
-
- ${this.myArray.map(item => html`${item} `)}
-
- ${this.myBool?
- html`Render some HTML if myBool is true
`:
+ ${this.myArray.map(item => html`${item} `)}
+ ${this.myBool ?
+ html`Render some HTML if myBool is true
` :
html`Render some other HTML if myBool is false
`}
- Click
+ Click
+
`;
}
-
clickHandler(event) {
console.log(event.target);
this.myBool = !this.myBool;
diff --git a/docs/_try/create.md b/docs/_try/create.md
index 894e8114..bae2135b 100644
--- a/docs/_try/create.md
+++ b/docs/_try/create.md
@@ -50,8 +50,20 @@ Click **Launch Code Editor** to edit the starting code. When you're ready to see
customElements.define('my-element', MyElement);
```
-If you're stuck, click **Launch Code Editor** below to see the completed code for Step 1.
+Here's the completed code for this step:
-{% include project.html folder="try/create/after" openFile="my-element.js" %}
+_my-element.js_
+
+```js
+{% include projects/try/create/before/my-element.js %}
+```
+
+Your code sample should be working now. LitElement components are added to a page with simple HTML tags, like this:
+
+```html
+` element to your HTML template:
```html
- Click
+ Click
```
- The annotation above adds a listener for the `click` event.
+ The binding syntax `@click=${this.clickHandler}` adds a listener for the `click` event, which calls the `clickHandler` method.
-2. **Implement an event handler.**
+2. **Add the `clickHandler` method to your class.**
- To handle the `click` event, define the following method on your `MyElement` class:
+ Add the following method to your `MyElement` class:
```js
clickHandler(event) {
@@ -37,8 +37,14 @@ _my-element.js_
}
```
-If you're stuck, click **Launch Code Editor** below to see the completed code for Step 5.
+ The `clickHandler` method toggles the boolean property, `myBool`, which you defined in the previous step.
+
+Here's the completed code for this step:
+
+_my-element.js_
-{% include project.html folder="try/events/after" openFile="my-element.js" %}
+```js
+{% include projects/try/events/after/my-element.js %}
+```
-[Next: 6. Style](style)
+[Next: 5. Style](style)
diff --git a/docs/_try/import.md b/docs/_try/import.md
deleted file mode 100644
index f149d064..00000000
--- a/docs/_try/import.md
+++ /dev/null
@@ -1,43 +0,0 @@
----
-layout: try
-slug: import
-title: Import your component
----
-
-Import your new component as a JavaScript module and use it in a web page.
-
-**Starting code**
-
-_index.html_
-
-```html
-{% include projects/try/import/before/index.html %}
-```
-
-{% include project.html folder="try/import/before" openFile="index.html" %}
-
-1. **Import your component module.**
-
- LitElement components are imported as JavaScript modules. **You don't need to change anything in this step if you're following the tutorial in StackBlitz**. In StackBlitz, index.ts runs automatically.
-
- _index.ts_
-
- ```js
- {% include projects/try/import/after/index.ts %}
- ```
-
-2. **Add your new component to the page.**
-
- In index.html, replace the existing `body` block with the following code:
-
- ```html
-
-
-**If you're doing the tutorial in your local development environment, you'll need to make some changes to the code on this page.** The code samples on this page are written for the live StackBlitz editor. To work locally, see the [Getting Started page](start).
+**If you're doing the tutorial in your local development environment, you'll need to make some changes to the code on this page.** The code samples on this page are written for the live StackBlitz editor. To work locally, see the [Getting Started page](/start).
diff --git a/docs/_try/logic.md b/docs/_try/logic.md
index 6000dbb9..4fda9892 100644
--- a/docs/_try/logic.md
+++ b/docs/_try/logic.md
@@ -4,7 +4,19 @@ slug: logic
title: Logic in templates
---
-In this step, you'll add a loop and a conditional to your LitElement template.
+In this step, you'll add a loop and a conditional to your LitElement template.
+
+To repeat a part of your HTML template, you can use a JavaScript expression to iterate over an array property:
+
+```js
+${this.myArray.map(item => html`${item} `)}
+```
+
+Similarly, to conditionally render some part of your template, you can use a JavaScript expression to examine a boolean property:
+
+```js
+${this.myBool ? html`something
` : html`something else
`}
+```
**Starting code**
@@ -16,28 +28,57 @@ _my-element.js_
{% include project.html folder="try/logic/before" openFile="my-element.js" %}
-1. **Add a loop to your template.**
+1. **Add a boolean property and an array property to your properties getter.**
- We've added an array property, `myArray`, to my-element.js. To loop over `myArray`, add the following code to your template:
+ Replace the static properties getter with the following code:
- ```html
-
- ${this.myArray.map(i => html`${i} `)}
-
+ ```js
+ static get properties() {
+ return {
+ message: { type: String },
+ myBool: { type: Boolean },
+ myArray: { type: Array }
+ };
+ }
```
-2. **Add a conditional to your template.**
+2. **Initialize the boolean and array properties.**
- We've added a boolean property, `myBool`, to my-element.js. To render conditionally on `myBool`, add the following code to your template:
+ Replace the constructor with the following code:
+
+ ```js
+ constructor() {
+ super();
+ this.message = 'Hello world! From my-element';
+ this.myBool = true;
+ this.myArray = ['an','array','of','test','data'];
+ }
+ ```
- ```html
- ${this.myBool?
- html`Render some HTML if myBool is true
`:
+3. **Add a loop to your template.**
+
+ To loop over the new `myArray` property, add the following code to your template:
+
+ ```js
+ ${this.myArray.map(item => html`${item} `)}
+ ```
+
+3. **Add a conditional to your template.**
+
+ To render conditionally based on the value of `myBool`, add the following code to your template:
+
+ ```js
+ ${this.myBool ?
+ html`Render some HTML if myBool is true
` :
html`Render some other HTML if myBool is false
`}
```
-If you're stuck, click **Launch Code Editor** below to see the completed code for Step 4.
+Here's the completed code for this step:
-{% include project.html folder="try/logic/after" openFile="my-element.js" %}
+_my-element.js_
+
+```js
+{% include projects/try/logic/after/my-element.js %}
+```
-[Next: 5. Events](events)
+[Next: 4. Events](events)
diff --git a/docs/_try/properties.md b/docs/_try/properties.md
index de5c3f38..01233fa4 100644
--- a/docs/_try/properties.md
+++ b/docs/_try/properties.md
@@ -4,7 +4,7 @@ slug: properties
title: Use properties
---
-In this step, you'll declare a property for your component, and use the value in the component's template. LitElement components update automatically when their properties change.
+In this step, you'll declare a property for your component, initialize the property, and use the value in the component's template.
**Starting code**
@@ -18,34 +18,34 @@ _my-element.js_
1. **Declare a property.**
- In my-element.js, replace the existing `properties` getter with the following code:
+ In my-element.js, add the following `properties` getter to the `MyElement` class:
```js
static get properties() {
- return {
- // Property declaration
- message: { type: String }
- };
+ return { message: { type: String } };
}
```
+ The code snippet above adds a string property called `message` to your element class.
+
2. **Initialize the property.**
- You should initialize property values in a component's constructor.
-
- In my-element.js, replace the existing constructor with the following code:
+ A good place to initialize property values is in your element constructor.
+
+ In my-element.js, add the following method to the `MyElement` class:
```js
constructor() {
- // Always call superconstructor first
super();
-
- // Initialize property
- this.message='Hello world! From my-element';
+ this.message = 'Hello world! From my-element';
}
```
-3. **Add the property to your template with a JavaScript expression.**
+ The first line of code in the constructor (`super();`) calls the parent class constructor.
+
+3. **Add the property to your template.**
+
+ You can add properties to your LitElement templates with JavaScript expressions.
In my-element.js, replace the existing `render` function with the following code:
@@ -57,8 +57,14 @@ _my-element.js_
}
```
-If you're stuck, click **Launch Code Editor** below to see the completed code for Step 3.
+LitElement components update automatically when their properties change.
-{% include project.html folder="try/properties/after" openFile="my-element.js" %}
+Here's the completed code for this step:
+
+_my-element.js_
+
+```js
+{% include projects/try/properties/after/my-element.js %}
+```
-[Next: 4. Logic](logic)
+[Next: 3. Logic](logic)
diff --git a/docs/_try/style.md b/docs/_try/style.md
index 0ba9d251..07cffc29 100644
--- a/docs/_try/style.md
+++ b/docs/_try/style.md
@@ -4,7 +4,7 @@ slug: style
title: Styling
---
-Style your element with CSS by including a `style` block in its template. These styles are encapsulated; they will only apply to your component.
+Style your component with CSS by defining a static `styles` getter in your class.
**Starting code**
@@ -16,36 +16,50 @@ _my-element.js_
{% include project.html folder="try/style/before" openFile="my-element.js" %}
-1. **Define your styles.**
+1. **Import the `css` helper function.**
- To define your styles, add the following code to your template:
+ In my-element.js, replace the `import` statement with the following code:
- ```html
-
+ ```js
+ import { LitElement, html, css } from 'lit-element';
+ ```
+
+2. **Define your styles.**
+
+ To define your styles, add a static `styles` getter to your class:
+
+ ```js
+ static get styles() {
+ return css`
+ p {
+ font-family: Roboto;
+ font-size: 16px;
+ font-weight: 500;
+ }
+ .red {
+ color: red;
+ }
+ .blue {
+ color: blue;
+ }
+ `;
+ }
```
-2. **Apply your styles.**
+3. **Apply your styles.**
Use `myBool` to apply the styles conditionally. Add the following paragraph to your template:
```html
- styled paragraph
+ styled paragraph
```
-If you're stuck, click **Launch Code Editor** below to see the completed code for Step 6.
+Here's the completed code for this step:
-{% include project.html folder="try/style/after" openFile="my-element.js" %}
+_my-element.js_
+
+```js
+{% include projects/try/style/after/my-element.js %}
+```
Congratulations - you've made your first element with LitElement. Next, see the [Getting Started](/guide/start) guide and set up LitElement locally.