Navigation and Editing not compatible with web components

Trying to use [Shoelace Custom Elements](https://shoelace.style/components/input) with EditorJS. I can get the elements to render, but I can't use backspace or delete to edit text, using the arrows changes focused block, and tab navigation within the block skips the `` elements. I have tried tracking down the `BACKSPACE` keyboard event, but have not figured anything out. It seems to follow the same path through `editor.js` as a regular `input` element.

Steps to reproduce:

Use Shoelace elements in a custom block.

```js
import { html, render } from 'lit-html'
import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.13.1/cdn/components/input/input.js';
import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.13.1/cdn/components/checkbox/checkbox.js';

export default class MyBlock {
render() {
this.wrapper = document.createElement('div')

const element = html`
Numbered Item?

render(element, this.wrapper)

return this.wrapper
}
}
```

Expected behavior:

Expect the form elements to behave as normal HTML elements with editability and navigation. Using Shoelace elements directly in the HTML doc demonstrate the expected behavior, but inside an EditorJS instance, backspace, tab, and arrows do no work as expected.

Screenshots:
MacBook, Firefox, macOS 14.3

Editor.js version:
2.29.0