Create a component

In this step, you’ll fill in the gaps in the starting code to create an element class with a basic HTML template.

Starting code

my-element.js

/**
 * Try LitElement https://lit-element.polymer-project.org/try
 * Starting code for 1. Create
 */

/**
 * TODO: Import the LitElement base class and html helper function.
 */
import { } from ''; 

/**
 * TODO: Create a class for your element that extends the LitElement
 * base class.
 */
class MyElement { }    

/**
 * TODO: Register the new element with the browser.
 */
customElements.define();

Click Launch Code Editor to edit the starting code. When you’re ready to see your code in action, click Preview.

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

   In my-element.js, replace the existing import statement with the following code:

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

2. Create a class for your element that extends the LitElement base class.

   In my-element.js, replace the existing class definition with the following code:

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

   The render function defines your component’s template. You must implement render for every LitElement component.

3. Register the new element with the browser.

   In my-element.js, replace the existing call to customElements.define() with the following code:

   customElements.define('my-element', MyElement);
   

If you’re stuck, click Launch Code Editor below to see the completed code for Step 1.

Next: 2. Import your component