I am injecting a shadow DOM on a third-party website youtube.com. However, keyboard events on the input tag inside the shadow DOM triggers event listeners on the parent page (youtube.com)

Example – When typing inside the input tag, the space key also triggers the video play. I do not want ‘video play’ to happen. All keyboard events should be exclusive to the input tag.

How to not let the parent page detect the keyboard events?

function runShadow() {
    // node
    let node = document.createElement("div");
    node.id = "myshadow";

    // append
    document.body.appendChild(node);

    // create shadow    
    const shadow = node.attachShadow({mode: 'open'});

    // create content
    const content = document.createElement("div");
    content.innerHTML = `<div class="wrapper"><input /></div>`

    // Create some CSS to apply to the shadow DOM
    let style = document.createElement('style');
    style.textContent = `
    .wrapper {
        background: red;
        padding: 10px;
        position: fixed;
        top:0px;
        right:0px;
        z-index:99999;
    }`;

    shadow.appendChild(style);
    shadow.appendChild(content);
}