影子dom内部的输入数据列表不起作用

Question

我正在尝试使用customElements创建我自己的具有input属性和list元素的datalist按钮。但是在影子dom内创建时它不起作用。

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附加到影子dom（document.body）之外时，该功能正常工作。

/ edit：经过测试：

• Firefox 65.0.2：不起作用
• Google Chrome 72.0.3626.121：正常工作

所以这似乎是Firefox错误？