スタイリング

このドキュメントは作業中です。リリース前の情報であり、変更される可能性があります。

クラスで静的なstylesゲッターを定義し、CSSでコンポーネントをスタイリングしてください。

初期コード

my-element.js

// TODO: cssヘルパー関数のインポート
import { LitElement, html } from 'lit-element';

class MyElement extends LitElement {
  static get properties() {
    return {
      message: { type: String },
      myBool: { type: Boolean },
      myArray: { type: Array }
    };
  }
  // TODO: 静的スタイルゲッターの追加
  constructor() {
    super();
    this.message = 'Hello world! From my-element';
    this.myArray = ['an','array','of','test','data'];
    this.myBool = true;
  }
  render() {
    return html`
      <p>${this.message}</p>
      <ul>${this.myArray.map(item => html`<li>${item}</li>`)}</ul>
      ${this.myBool ?
        html`<p>Render some HTML if myBool is true</p>` :
        html`<p>Render some other HTML if myBool is false</p>`}
      <button @click=${this.clickHandler}>Click</button>
      <!-- TODO: スタイリングされた段落の追加 -->
    `;
  }
  clickHandler(event) {
    console.log(event.target);
    this.myBool = !this.myBool;
  }
}
customElements.define('my-element', MyElement);

  1. cssヘルパー関数をインポート

    my-element.jsで、import文を次のコードで置き換えます:

    import { LitElement, html, css } from 'lit-element';
    
  2. styleを宣言

    スタイルを定義するには、クラスに静的な stylesゲッターを追加します:

    static get styles() {
      return css`
        p {
          font-family: Roboto;
          font-size: 16px;
          font-weight: 500;
        }
        .red {
          color: red;
        }
        .blue {
          color: blue;
        }
      `;
    }
    
  3. styleを適用

    myBoolプロパティの真偽値を使ってスタイルを適用するには下記のコードを追加してください:

     <p class="${this.myBool ? 'red' : 'blue' }">styled paragraph</p>
    

このステップの完成したコードはこちらです:

my-element.js

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

class MyElement extends LitElement {
  static get properties() {
    return {
      message: { type: String },
      myArray: { type: Array },
      myBool: { type: Boolean }
    };
  }
  static get styles() {
    return css`
      p {
        font-family: Roboto;
        font-size: 16px;
        font-weight: 500;
      }
      .red {
        color: red;
      }
      .blue {
        color: blue;
      }
    `;
  }
  constructor() {
    super();
    this.message = 'Hello world! From my-element';
    this.myArray = ['an','array','of','test','data'];
    this.myBool = true;
  }
  render() {
    return html`
      <p class="${this.myBool?'red':'blue'}">styled paragraph</p>
      <p>${this.message}</p>
      <ul>${this.myArray.map(item => html`<li>${item}</li>`)}</ul>
      ${this.myBool ?
        html`<p>Render some HTML if myBool is true</p>` :
        html`<p>Render some other HTML if myBool is false</p>`}
      <button @click="${this.clickHandler}">Click</button>
    `;
  }
  clickHandler(event) {
    console.log(event.target);
    this.myBool = !this.myBool;
  }
}
customElements.define('my-element', MyElement);

おめでとうございます! あなたはじめてのLitElementコンポーネントをつくることができました。次は使ってみるに進んでローカル開発をセットアップしてください。