| ${capitalize(p)} | `).join('')} +
|---|
| ${i[p]} | `).join('')} +
This is child content
+This is child content
+| Name | Description | Type | Default | +
|---|---|---|---|
| name | The name to say "Hello" to. | string | "World" | +
| count | The number of times the button has been clicked. | number | 0 | +
| Name | Attribute | Description | Type | Default | +
|---|---|---|---|---|
| name | name | The name to say "Hello" to. | string | "World" | +
| count | count | The number of times the button has been clicked. | number | 0 | +
| Name | Description | +
|---|---|
| This element has a slot | +
| Name | Description | +
|---|---|
| button | The button | +
| name | description | type | default | +
|---|---|---|---|
| name | undefined | string | "World" | +
| count | The number of times the button has been clicked. | number | 0 | +
| name | attribute | description | type | default | +
|---|---|---|---|---|
| name | name | undefined | string | "World" | +
| count | count | The number of times the button has been clicked. | number | 0 | +
| name | description | +
|---|---|
| This element has a slot | +
This is child content
+ p {
border: solid 1px blue;
padding: 8px;
}<my-element>
<p>This is child content</p>
</my-element>This is child content
+ p {
border: solid 1px blue;
padding: 8px;
}<my-element>
<p>This is child content</p>
</my-element>This is child content
+ p {
border: solid 1px blue;
padding: 8px;
}<my-element>
<p>This is child content</p>
</my-element><my-element name="Earth"></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.
<my-element> is just an HTML element. You can it anywhere you can use HTML!
<my-element></my-element><my-element> can be configured with attributed in plain HTML.
<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);<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 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>import {MyElement} from 'https://unpkg.com/my-element?module';