LitElement

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

はじめる

LitElementについて

高速で軽量なWebコンポーネント

LitElementは、どんなフレームワークのどんなWebページでも動作し、軽量で高速なWebコンポーネントを開発するためのシンプルなベースクラスです。

lit-htmlを使う

描画(レンダリング)にはlit-html(高速HTMLテンプレートライブラリ)を使います。LitElementを使ってアプリを構築するのであれば、ぜひPWA Starter Kitをチェックしてください。

開発しているのは

LitElementは世界中の大小さまざまな組織のウェブデベロッパーからの情報をもとに、Google Chromeチームの開発者によってあなたに届けられます。

はじめる

Webコンポーネントの定義:

custom-greeting.js

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

// カスタムコンポーネントをつくる
class CustomGreeting extends LitElement {
  // プロパティを宣言
  static get properties() {
    return {
      name: { type: String }
    };
  }
  // プロパティを初期化
  constructor() {
    super();
    this.name = 'World';
  }
  // テンプレートを定義
  render() {
    return html`<p>Hello, ${this.name}!</p>`;
  }
}
// ブラウザにカスタム要素を登録
customElements.define('custom-greeting', CustomGreeting);

Webコンポーネントをインポート:

index.html

<custom-greeting></custom-greeting>

LitElement を使う理由は?

共有しやすく - Made to share

LitElementで構築されたWebコンポーネントは、ライブラリやフレームワークに依存しないので、組織内や世界中で共有されるように作ることができます。

高い相互運用性 - Interoperable

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

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

速くて軽い - Fast and light

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

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

ブラウザ互換

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

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

次のステップ

1.

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

2.

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