This is child content
p {
border: solid 1px blue;
padding: 8px;
} p {
border: solid 1px blue;
padding: 8px;
}<my-element>
<p>This is child content</p>
</my-element><my-element>
<p>This is child content</p>
</my-element><my-element name="Earth"></my-element><my-element name="Earth"></my-element><my-element> is just an HTML element. You can it anywhere you can use HTML!
<my-element></my-element><my-element></my-element><my-element> can be configured with attributed in plain HTML.
<my-element name="HTML"></my-element><my-element name="HTML"></my-element><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);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);<my-element> is distributed on npm, so you can install it locally or use it via npm CDNs like unpkg.com.
npm i my-elementnpm i my-elementnpm 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 specificers to full URLs.
<script type="module" src="https://unpkg.com/my-element?module"></script><script type="module" src="https://unpkg.com/my-element?module"></script>import {MyElement} from 'https://unpkg.com/my-element?module';import {MyElement} from 'https://unpkg.com/my-element?module';