Starting code

my-element.js

{% include projects/try/create/before/my-element.js %}

Click inside the following live sample to start editing. When you're ready to see your code in action, click the Preview button.

{% include project.html folder="try/create/before" openFile="my-element.js" %}

Editing steps

1. Import the LitElement base class and html helper function.

   my-element.js

   js // Import LitElement base class and html helper function import { } from '';

   Import statements

   js import { LitElement, html } from '@polymer/lit-element';

2. Create a class for your element that extends the LitElement base class, and define an element template inside the render function.

   my-element.js

   js // Create your class here class MyElement { render(){ // Define your element template here } }

   MyElement class

   js class MyElement extends LitElement { render(){ return html` <p>Hello world! From my-element</p> `; } }

3. Register the new element with the browser.

   my-element.js

   js // Register the element with the browser customElements.define();

   Register element with the browser

   js // Register the element with the browser customElements.define('my-element', MyElement);

Completed code

my-element.js

{% include projects/try/create/after/my-element.js %}

{% include project.html folder="try/create/after" openFile="my-element.js" %}

{% include prevnext.html prevurl="index" prevtitle="Try LitElement" nexturl="use" nexttitle="Use your element in a web page" %}