Выбор пользовательского элемента не воспроизводится правильно

Question

Я создал пользовательский компонент select с LitElement:

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

class CustomSelect extends LitElement {
    static get properties()  {
        return {
            options: { type: Array },
            selected: { type: String },
            onChange: { type: Function }
        };
    }
    constructor() {
        super();
        this.options = [];
    }
    render() {
        return html`
            <select @change="${this.onChange}">
                ${this.options.map(option => html`
                    <option value="${option.value}" ?selected=${this.selected === option.value}>${option.text}</option>
                `)}
            </select>
        `;
    }
    createRenderRoot() {
        return this;
    }
}

customElements.define('custom-select', CustomSelect);

Я передаю options, selected и onChange в качестве свойств при создании элемента.На первом рендере все работает нормально.Все параметры отображаются, и выбранное значение отражается в выборе.Однако, если я изменяю selected, кажется, что он не обновляет выбранную опцию.Если я проверяю элемент с помощью dev-tools, атрибут selected устанавливается правильно, но если я начинаю запрашивать элемент на предмет его значения, он возвращает неправильное значение.

Одна вещь, которую я попробовал, - это добавить атрибут id к элементу с помощью dev-tools после того, как выбор был визуализирован.Если я затем изменю свойство selected на CustomSelect, атрибут id останется в DOM, что говорит мне, что выборка не перерисовывается, что и является причиной проблемы, и почему она работает напервый рендеринг.

Я попытался установить свойства value и selectedIndex для элемента select, но, похоже, он не оказывает существенного влияния на что-либо.

IВы вошли в систему везде (начиная с render () и в файле параметров) и все входные значения верны.

Answer 1

Я думаю, время рендеринга и определение выбранного свойства на onChange конфликте функций времени. Таким образом, лучше присвоить setTimeout в onChange, чем это работает должным образом. На мой пример по ссылке ниже. Я столкнулся с тем же, когда я удаляю setTimeout Кроме того, вам не нужно объявлять onChange как функцию в свойствах.

Демо

static get properties()  {
   return {
        options: { type: Array },
        selected: { type: String }
    };
}
constructor() {
    super();
    this.options = [{value:1, text:"ben"},{value:2, text:"sen"},{value:3, text:"oo"},{value:4, text:"biz"},{value:5, text:"siz"},{value:6, text:"onlar"}];
    this.selected = 3
}
render() {
    return html`

        <select id="sel" @change="${this.onChange}">
            ${this.options.map(option => html`
                <option value="${option.value}" ?selected=${this.selected === option.value}>${option.text}</option>
            `)}
        </select>
        <button @click="${this.changeSelected}">Random chage selected option</button>
    `;
}

onChange(x){
 setTimeout(()=>{ 
    this.selected = this.shadowRoot.querySelector('#sel').value
    console.log('Selected -->', this.selected );
   },300)
}
changeSelected(){
  this.selected = (this.options[Math.floor(Math.random() * 6)].value)
  console.log(this.selected)
}