-
- <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';
-
-
-