Import your component

This documentation is a work in progress. It describes prerelease software, and is subject to change.

Import your new component as a JavaScript module and use it in a web page.

Starting code

index.html

<!-- 
  Try LitElement https://lit-element.polymer-project.org/try
  Starting code for 2. Import
-->
<html>
  <head>
    <!-- Polyfills required for browser compatibility on StackBlitz -->
    <script src="/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
    <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
    <!-- In StackBlitz, my-element.js is imported in index.ts -->
    <!-- <script type="module" src="my-element.js"></script> -->
  </head>
  <body>
    <!-- TODO: Add your new element to the page -->
  </body>
</html>

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
```
 // Import my-element module
import './my-element.js';
```
Add your new component to the page.

In index.html, replace the existing body block with the following code:
```
   <body>
     <my-element></my-element>
   </body>
```

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

Next: 3. Properties