How to give priority to input element events inside a shadow DOM when there are parent page listeners?


This Content is from Stack Overflow. Question asked by Sai Datta

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

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"); = "myshadow";

    // append

    // 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;



This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?