Эти ошибки в lit-html?

Question

В lit-html 1.0.0-rc.2 у меня есть следующий шаблон, который работает неправильно. Итак, я полагаю, что я делаю что-то не так. Или это просто ошибка в lit-html?

import { html } from './node_modules/lit-html/lit-html.js';
import css from './css.js';

export default function template(c) {
  console.log('props', c.text, c.selected, c.checkbox, c.radioButton);
  const changeText = c.changeText.bind(c);
  return html`
    ${css()}
    <form>
      <div>input cannot be updated programatically</div>
      <input type="text" value="${c.text}" @input="${changeText}"/>

      <div>select cannot be set/changed programatically</div>
      <select @change="${ev => {c.selected = ev.currentTarget.value; console.log('value set to', ev.currentTarget.value)}}">
        <option value="" ?selected="${c.selcted === ''}">Select</option>
        <option value="1" ?selected="${c.selcted === '1'}">1</option>
        <option value="2" ?selected="${c.selcted === '2'}">2</option>
        <option value="3" ?selected="${c.selcted === '3'}">3</option>
        <option value="4" ?selected="${c.selcted === '4'}">4</option>
      </select>
      <div>checkbox cannot be updated programatically</div>
      <input
        type="checkbox"
        @change="${(ev) => {c.checkbox = ev.currentTarget.value; console.log('checkbox value:', ev.currentTarget.value)}}"
        ?checked="${c.checkbox === 'on'}"
      />
      <div>radio buttons cannot be updated programatically</div>
      <input
        name="radio"
        type="radio"
        value="1"
        @change="${ev => {c.radioButton = '1'; console.log('radio button value: ', ev.currentTarget.value)}}"
        ?checked="${c.radioButton === '1'}"/>
      <label>1</label>
      <input
        name="radio"
        type="radio"
        value="2"
        @change="${ev => {c.radioButton = '2'; console.log('radio button value: ', ev.currentTarget.value)}}"
        ?checked="${c.radioButton === '2'}"/>
      <label>2</label>
      <input
        name="radio"
        type="radio"
        value="3"
        @change="${ev => {c.radioButton = '3'; console.log('radio button value: ', ev.currentTarget.value)}}"
        ?checked="${c.radioButton === '3'}"/>
      <label>3</label>
    </form>
  `;
}

Он заполняется / контролируется следующим веб-компонентом:

import { render } from './node_modules/lit-html/lit-html.js';
import template from './template.js';

class MyForm extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({mode: 'open'});
    this.text = 'foo';
    this.selected = '2';
    this.checkbox = 'on';
    this.radioButton = '1';
  }

  attributeChangedCallback(name, oVal, nVal) {

  }

  connectedCallback() {
    this.render();
    setInterval(() => {
      this.text = 'foobar';
      this.selected = '3';
      this.checkbox = 'off';
      this.radioButton = '2';
      this.render();
    }, 2000);
  }

  disconnectedCallback() {

  }

  changeText(ev) {
    const { value } = ev.currentTarget;
    this.text = value;
    this.render();
  }

  render() {
    render(template(this), this.shadowRoot);
  }

  static get observedAttributes() {
    return ['']
  }
}
customElements.get('my-form') || customElements.define('my-form', MyForm);

export { MyForm }

Обратите внимание, что веб-компонент пытается установить значение различных входных данных при первом рендеринге. После этого он пытается установить их снова, используя setInterval. setInterval используется исключительно для демонстрации того, как веб-компонент пытается обновить шаблон.

В случае выбора, опция не может быть установлена ​​программно. И в случае каждого из других элементов ввода, один раз выбранный в пользовательском интерфейсе не может быть обновлен программно.

Answer 1

Я не думаю, что это ошибка Lit, хотя вы используете ее совершенно уникальным образом.

В случае вашего <select> проблема в том, что вы устанавливаете c.selected но затем проверка c.selcted в каждом <option>.