<my-element>
<my-element> is an awesome element. It's a great introduction to building web components with LitElement, with nice documentation site as well.
As easy as HTML
<my-element> is just an HTML element. You can it anywhere you can use HTML!
<my-element></my-element>
Configure with attributes
<my-element> can be configured with attributed in plain HTML.
<my-element name="HTML"></my-element>
Declarative rendering
<my-element> can be used with declarative rendering libraries like Angular, React, Vue, and lit-html
import {html, render} from 'lit-html';
const name = 'lit-html';
render(
html`
<h2>This is a <my-element></h2>
<my-element .name=${name}></my-element>
`,
document.body
);
This is a <my-element>
Install
<my-element> is distributed on npm, so you can install it locally or use it via npm CDNs like unpkg.com.
Local Installation
npm i my-element
CDN
npm CDNs like unpkg.com can directly serve files that have been published to npm. This works great for standard JavaScript modules that the browser can load natively.
For this element to work from unpkg.com specifically, you need to include the ?module query parameter, which tells unpkg.com to rewrite "bare" module specifiers to full URLs.
HTML
<script type="module" src="https://unpkg.com/my-element?module"></script>
JavaScript
import {MyElement} from 'https://unpkg.com/my-element?module';