I have an Angular web ponent installed on my site. It uses Shadow DOM so it's super fast (which it has to be in my case).

On my site I also have a shortcut on h which opens up a popup that displays some helpful information. It's a must that this h keybinding stays as it is. Example code of how it was implemented can be seen here: /

It's a simple event listener that listens on document:

$(document).on("keyup", function(e) {

}

However, this also gets triggered when my web ponent has focused textarea or input elements. This happens because it uses Shadow DOM, which a script from the outside cannot access.

You can test it by pressing h on the keyboard inside and outside of the input and textarea elements.

Is there a way to let my script from outside of the Shadow DOM web ponent, still listen for the keyup event, but make it listen for all elements on the page? Even the ones inside the Shadow DOM.

I have an Angular web ponent installed on my site. It uses Shadow DOM so it's super fast (which it has to be in my case).

On my site I also have a shortcut on h which opens up a popup that displays some helpful information. It's a must that this h keybinding stays as it is. Example code of how it was implemented can be seen here: https://jsfiddle/js1edv37/

It's a simple event listener that listens on document:

$(document).on("keyup", function(e) {

}

However, this also gets triggered when my web ponent has focused textarea or input elements. This happens because it uses Shadow DOM, which a script from the outside cannot access.

You can test it by pressing h on the keyboard inside and outside of the input and textarea elements.

Is there a way to let my script from outside of the Shadow DOM web ponent, still listen for the keyup event, but make it listen for all elements on the page? Even the ones inside the Shadow DOM.

• javascript
• jquery
• shadow-dom

Share Improve this question Follow asked Apr 16, 2019 at 8:58 MortenMoulderMortenMoulder 6,6761414 gold badges7373 silver badges122122 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

In the Web Component, get the input element with a querySelector() call on the shadowRoot property:

let textareainshadow = div.shadowRoot.querySelector( 'textarea' )

Then listen to the keyup event and stop its propagation with the help of the stopImmediatePropagation() method.

textareainshadow.addEventListener( 'keyup' , ev => {
    console.log( 'caught', ev.type )
    ev.stopImmediatePropagation()
}) 

https://jsfiddle/7mkrxh25/1/

If you save the reference to the shadow root you can always access it's children as search on those

$(document).on("keyup", function(e) {
    let focusedInputs = $("input:focus, textarea:focus").length + $(shadow).children("input:focus, textarea:focus").length;

    if (focusedInputs > 0) {
        return true;
    }

    if (e.keyCode === 72) {
        trigger();
    }
});

function trigger() {
    alert("If this was triggered, everything is perfectly fine");
}

let div = document.querySelector("div");
let shadow = div.createShadowRoot();
shadow.innerHTML = "<textarea>This shouldn't fail</textarea>";

textarea {
    width: 500px;
    height: 100px;
}

input {
    width: 250px;
}

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea>Some stuff here</textarea>
<br />
<input type="text" value="Some more text here" />

<br />
<br />

<h1>Shadow DOM element WON'T fail now :)</h1>

<div></div>

Fiddle