You can now import your new element as a JavaScript module, and use it in markup.

Starting code

my-element.js

{% include projects/try/use/before/index.html %}

{% include project.html folder="try/use/before" openFile="index.html" %}

Editing steps

If you're working locally, here's the syntax you'll need to use:

<head>
  <script type="module" src="./my-element.js"></script>
</head>
<body>
  <my-element></my-element>
</body>

In StackBlitz, scripts are managed slightly differently. In our live-editable code samples, a main script runs automatically and loads the module containing the custom element, so you won't need a <script> tag for it in index.html.

Add <my-element> tags to index.html:

  <body>
    <!-- Add your element tags here -->
    <my-element></my-element>
  </body>

Completed code

index.html

{% include projects/try/use/after/index.html %}

{% include project.html folder="try/use/after" openFile="index.html" %}

{% include prevnext.html prevurl="create" prevtitle="Create an element" nexturl="properties" nexttitle="Declare properties" %}