fc662728eb
There is no build for the element or site utilities like PrismJS yet, so this site only works locally at the moment.
73 lines
1.1 KiB
Markdown
73 lines
1.1 KiB
Markdown
---
|
|
layout: page.11ty.cjs
|
|
title: <my-element> ⌲ Home
|
|
---
|
|
|
|
# <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.
|
|
|
|
## As easy as HTML
|
|
|
|
<section class="columns">
|
|
<div>
|
|
|
|
`<my-element>` is just an HTML element. You can it anywhere you can use HTML!
|
|
|
|
```html
|
|
<my-element></my-element>
|
|
```
|
|
|
|
</div>
|
|
<div>
|
|
|
|
<my-element></my-element>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
## Configure with attributes
|
|
|
|
<section class="columns">
|
|
<div>
|
|
|
|
`<my-element>` can be configured with attributed in plain HTML.
|
|
|
|
```html
|
|
<my-element name="HTML"></my-element>
|
|
```
|
|
|
|
</div>
|
|
<div>
|
|
|
|
<my-element name="HTML"></my-element>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
## Declarative rendering
|
|
|
|
<section class="columns">
|
|
<div>
|
|
|
|
`<my-element>` can be used with declarative rendering libraries like Angular, React, Vue, and lit-html
|
|
|
|
```js
|
|
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);
|
|
```
|
|
|
|
</div>
|
|
<div>
|
|
|
|
<my-element name="lit-html"></my-element>
|
|
|
|
</div>
|
|
</section>
|