Я пытаюсь создать с помощью 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?