查看 litElement 中元素的值

Question

我有一个非常简单的元素，它包装了一个 <input type="range"> 元素。来自 Polymer，我很难适应。我想显示范围的值。

这是我想出的：

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 更改的部分会重新呈现。要获得此模型的性能优势，您应该将元素的模板设计为其属性的纯函数。 但这是否意味着我必须 1) 在 fistUpdated() 2 处设置 shownValue ) 监听它的 change 事件并相应地更新 shownValue？如果是这样的话，我这样做对吗？或者，有更好的方法吗？

我遇到了一个问题：https://glitch.com/~busy-sternum

Answer 1

我只会做一些小的调整

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

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

  constructor () {
    this.shownValue = 10;
  }

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

  updateShownValue (e) {
    this.shownValue = e.srcElement.value
    console.log(e.srcElement.value)
  }

  anotherFunction () {
      this.shownValue = 80;
  }
}
window.customElements.define('input-range', InputRange)

查看 litElement 中元素的值

Viewing the value of an element in litElement

javascript

polymer

lit-element

lit-html