This is child content
17 |This is child content
33 |This is child content
20 |<my-element name="Earth"></my-element><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.
37 |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';This is child content
56 |p {
border: solid 1px blue;
padding: 8px;
}<my-element>
<p>This is child content</p>
</my-element>| ${capitalize( 109 | (Array.isArray(p) ? p[0] : p).split('.')[0] 110 | )} | ` 111 | ) 112 | .join('')} 113 |
|---|
| ${get(i, p)} | `).join('')} 119 |
| Name | Description | Type | Default | 43 |
|---|---|---|---|
| name | The name to say "Hello" to. | string | 'World' | 47 |
| count | The number of times the button has been clicked. | number | 0 | 51 |
| Name | Attribute | Description | Type | Default | 60 |
|---|---|---|---|---|
| name | name | The name to say "Hello" to. | string | 'World' | 64 |
| count | count | The number of times the button has been clicked. | number | 0 | 68 |
| Name | Parameters | Description | Return | 77 |||||||
|---|---|---|---|---|---|---|---|---|---|
| sayHello |
81 |
82 |
| Formats a greeting | string | 93 |
| Name | Description | 102 |
|---|---|
| count-changed | Indicates when the count changes | 106 |
| Name | Description | 115 |
|---|---|
| (default) | This element has a slot | 119 |
| Name | Description | 128 |
|---|---|
| button | The button | 132 |
<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
);