Невозможно выбрать файл, перетаскивая файл в область за пределами кнопки, но внутри ввода только при использовании Shadow DOM

Question

В chrome следующий элемент ввода можно перетащить в нижнюю область ввода. Я ожидаю такого поведения.

<input type="file" class="input-file">

<style>
.input-file {
    display: block;
    width: 300px;
    height: 300px;
    border: 1px solid red;
    margin: 10px;
}
</style>

Однако в Shadow DOM все по-другому. Следующий элемент ввода можно перетаскивать только на кнопку «Выбрать файл», расположенную в левой верхней области ввода. Выброшенный файл не выбирается, когда файл сбрасывается в нижнюю область ввода.

customElements.define("foo-bar", class extends HTMLElement {
    constructor(){
        super()
        this.attachShadow({mode: "open"}).innerHTML = `
            <input type="file" class="input-file">

            <style>
            .input-file {
                display: block;
                width: 300px;
                height: 300px;
                border: 1px solid red;
                margin: 10px;
            }
            </style>
        `
    }
})
document.body.innerHTML = "<foo-bar></foo-bar>"

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

Есть ли обходной путь?

Answer 1

Обходной путь должен обработать событие drop.

this.shadowRoot.querySelector( 'input' ).ondrop = ev => {
    console.log( 'dropped in', ev.dataTransfer.items.length  )
    for ( var i = 0 ; i < ev.dataTransfer.items.length ; i++ ) {
        if (ev.dataTransfer.items[i].kind === 'file') {
            var file = ev.dataTransfer.items[i].getAsFile()
            console.log( 'file[' + i + '].name = ' + file.name )
        }
    }
    ev.preventDefault()
}

Не забудьте вызвать метод preventDefault(), чтобы прервать открытие файла.