javascript - litElement で要素の値を表示する

Question

要素をラップする非常に単純な要素があり<input type="range">ます。ポリマー出身なので、調整に少し苦労しています。範囲の値を表示したい。

これは私が思いついたものです：

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

class InputRange extends LitElement {
  static get properties () {
    return {
      shownValue: {
        type: String,
        attribute: false
      }
    }
  }

  firstUpdated () {
    console.log(this.shadowRoot.querySelector('#native').value)
    this.shownValue = this.shadowRoot.querySelector('#native').value
  }

  render () {
    return html`
      <input value="10" @change=${this.updateShownValue} type="range" id="native">
      <span>VALUE: ${this.shownValue}</span>
              `
  }

  updateShownValue (e) {
    this.shownValue = e.srcElement.value
    console.log(e.srcElement.value)
    // e.srcElement.value = 80
  }
}
window.customElements.define('input-range', InputRange)

そしてそれを使用して：

    <script type="module" src="./InputRange.js"></script>
    <h2>Range</h2>
    <input-range id="input-range"></input-range>

質問：

これは正しい方法ですか？lit-element のドキュメントには、更新中に変更された DOM の部分のみが再レンダリングされることが明確に記載されています。このモデルのパフォーマンス上の利点を得るには、要素のテンプレートをそのプロパティの純粋な関数として設計する必要があります。shownValueしかし、それは、1) fistUpdated() で設定する必要があるということですか? 2)changeイベントをリッスンし、それにshownValue応じて更新する必要がありますか? もしそうなら、私はそれを正しくやっていますか？または、それを行うより良い方法はありますか？

問題があります: https://glitch.com/~busy-sternum