This is child content
+| ${capitalize( + (Array.isArray(p) ? p[0] : p).split('.')[0] + )} | ` + ) + .join('')} +
|---|
| ${get(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 | Parameters | Description | Return | +||||||
|---|---|---|---|---|---|---|---|---|---|
| sayHello |
+
+
| Formats a greeting | string | +
| Name | Description | +
|---|---|
| count-changed | Indicates when the count changes | +
| Name | Description | +
|---|---|
| (default) | This element has a slot | +
| Name | Description | +
|---|---|
| button | The button | +
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 specifiers to full URLs.
<script type="module" src="https://unpkg.com/my-element?module"></script>import {MyElement} from 'https://unpkg.com/my-element?module';