Ввод данных в теневой дом не работает - PullRequest
0 голосов
/ 10 марта 2019

Я пытаюсь создать с помощью customElements свою собственную кнопку input с атрибутом list и элементом datalist.Но он не работает при создании внутри теневого домена.

HTML:

<test-input></test-input>

Javascript:

class InputClass extends HTMLElement {
    constructor() {
        super();

        var shadow = this.attachShadow({mode:'open'});
        var input = document.createElement('INPUT');
        input.type = 'text';
        input.setAttribute('list', 'myList');
        shadow.appendChild(input);

        var datalist = document.createElement('DATALIST');
        datalist.id = 'myList';
        shadow.appendChild(datalist);

        var option = document.createElement('OPTION');
        option.value ="testValue";
        option.innerHTML = "testInnerHTML";
        datalist.appendChild(option);
    }
}
customElements.define('test-input', InputClass);

Этот код не работает.Но когда я добавляю элементы input и datalist вне теневого пространства (document.body), функция работает.

/ edit: протестировано с:

  • Firefox 65.0.2: не работает
  • Google Chrome 72.0.3626.121: работает

Так что, похоже, это ошибка Firefox?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...