LitElement

軽量で高速なWebコンポーネントをつくるシンプルなベースクラス

はじめる

簡単につくれる高速で軽量なWebコンポーネント

LitElementを使用すると、Webコンポーネントを簡単に定義できます。組織全体でエレメントを共有したり、UIデザインシステムを構築したりするのに理想的です。

ドキュメントやCMS、MarkdownまたはReactやVueなどのフレームワークなど、HTMLを使っているどこにでもコンポーネントを使っていきましょう。

import { LitElement, html, property, customElement } from 'lit-element';

@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
  @property() name = 'World';

  render() {
    return html`<p>Hello, ${this.name}!</p>`;
  }
}
<simple-greeting name="Everyone"></simple-greeting>

LitElement を使う理由は?

楽しく宣言的に

LitElementのシンプルで馴染みやすい開発モデルにより、Webコンポーネントをこれまで以上に簡単に構築できます。

ステート(状態)を表す関数として宣言的にUIを表現してください。特別なテンプレート言語を学ぶ必要はありません 。 あなたはテンプレートにおいてJavaScriptを最大限使うことができます。要素は、プロパティが変更されると自動的に更新されます。

速くて軽量

あなたにとってのエンドユーザーがベンチャー市場であろうとシリコンバレーであろうと、LitElementが非常に高速なことが喜ばれるでしょう。

LitElementはlit-htmlを使ってHTMLテンプレートを定義して描画します。lit-htmlは変更されたデータのみを再描画するため、DOMの更新は非常に高速です。

シームレスに相互運用可能

LitElementはWebコンポーネント標準に準拠しているため、コンポーネントはどのフレームワークでも動きます。

LitElementは、Webページへ簡単に埋め込める含めるカスタム要素を使って、カプセル化のためにDOMをShadow DOMとします。現状のWebプラットフォームでこれより斬新な抽象化はありません。

次のステップ

1.

試してみるはオンラインで試せるチュートリアルです。インストールする必要があるものはなにもありません。

2.

もっと深く知りたければ、 ローカルにセットアップ してコンポーネントを構築してください!

ブラウザ互換

LitElementは全ての主要なブラウザで動作します(Chrome, Firefox, IE, Edge, Safari, Opera)

chrome logo firefox logo internet explorer logo edge logo safari logo opera logo