\n
\n <my-element>
\n<my-element> is an awesome element. It's a great introduction to building web components with LitElement, with nice documentation site as well.
\nAs easy as HTML
\n\n \n
<my-element> is just an HTML element. You can it anywhere you can use HTML!
\n
<my-element></my-element>
\n
Configure with attributes
\n\n \n
<my-element> can be configured with attributed in plain HTML.
\n
<my-element name=\"HTML\"></my-element>
\n
Declarative rendering
\n\n \n
<my-element> can be used with declarative rendering libraries like Angular, React, Vue, and lit-html
\n
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
);
\n
\n
This is a <my-element>
\n\n \n\n\n \n
\n
\n Install
\n<my-element> is distributed on npm, so you can install it locally or use it via npm CDNs like unpkg.com.
\nLocal Installation
\nnpm i my-element
\nCDN
\nnpm 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.
\nFor 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.
\nHTML
\n<script type=\"module\" src=\"https://unpkg.com/my-element?module\"></script>
\nJavaScript
\nimport {MyElement} from 'https://unpkg.com/my-element?module';
\n\n \n