---
layout: page.11ty.cjs
title: <arcgis-js-api-calcite-lit-example> ⌲ Home
---

# &lt;arcgis-js-api-calcite-lit-example>

`<arcgis-js-api-calcite-lit-example>` 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>

`<arcgis-js-api-calcite-lit-example>` is just an HTML element. You can it anywhere you can use HTML!

```html
<arcgis-js-api-calcite-lit-example></arcgis-js-api-calcite-lit-example>
```

  </div>
  <div>

<arcgis-js-api-calcite-lit-example></arcgis-js-api-calcite-lit-example>

  </div>
</section>

## Configure with attributes

<section class="columns">
  <div>

`<arcgis-js-api-calcite-lit-example>` can be configured with attributed in plain HTML.

```html
<arcgis-js-api-calcite-lit-example
  name="HTML"
></arcgis-js-api-calcite-lit-example>
```

  </div>
  <div>

<arcgis-js-api-calcite-lit-example name="HTML"></arcgis-js-api-calcite-lit-example>

  </div>
</section>

## Declarative rendering

<section class="columns">
  <div>

`<arcgis-js-api-calcite-lit-example>` 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 &lt;arcgis-js-api-calcite-lit-example&gt;</h2>
    <arcgis-js-api-calcite-lit-example
      .name=${name}
    ></arcgis-js-api-calcite-lit-example>
  `,
  document.body
);
```

  </div>
  <div>

<h2>This is a &lt;arcgis-js-api-calcite-lit-example&gt;</h2>
<arcgis-js-api-calcite-lit-example name="lit-html"></arcgis-js-api-calcite-lit-example>

  </div>
</section>