CODEWITHSUNDEEP
javascripthtmleventsshadow-dom
Maria
Maria

Reputation: 61

addEventListener in shadow DOM

I am trying to get user's input from Shadow DOM with addEventListener(), but I don't get any response, any error. References to the elements work correctly, so console.log(input) prints out the correct element.

(The same code works perfectly fine without shadow DOM, but I have to include it in my project.)

This is my code (these events are just for checking of course):

const template = document.createElement('template')
template.innerHTML = /* html */`
<div id="username">
  <p>Please choose your username!</p>
  <input id="username_input" type="text" placeholder="enter username">
  <button>Ok</button>
</div>
`
/**
 * @class Quiz
 * @extends {window.HTMLElement}
 */
export class Quiz extends window.HTMLElement {
  constructor () {
    super()
    this.attachShadow({ mode: 'open' })
    this.shadowRoot.appendChild(template.content.cloneNode(true))
  }

  getUserName () {
    const button = this.shadowRoot.querySelector('button')
    const inputUname = this.shadowRoot.querySelector('#username input')
    console.log(button)
    button.addEventListener('click', event => console.log('badum tss'))
    inputUname.addEventListener('input', event => console.log('badums tss'))
  }
}
window.customElements.define('user-name', Quiz)

app.js code:

import { Quiz } from './quiz.js'

var x = new Quiz()
x.getUserName()

html:

<!doctype html>
<html lang="">
    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script type="module" src="js/app.js"></script>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <user-name></user-name>
        <script nomodule src="build.js"></script>
    </body>
</html>

Upvotes: 5

Views: 2692

Answers (1)

Microloft
Microloft

Reputation: 445

The problem is quite simple. Your code actually creates two <user-name>s.

One is statically created in html:

<user-name></user-name>

The other is dynamically created by javascript:

var x = new Quiz()

The dynamic one is never attached to the document, so you can only see the static one on the page. Since you only call getUserName() on the dynamic one, the click and input listeners are never added to the static one. That's why you didn't get any response.

I would suggest that you put addEventListener() in the constructor, then the static one should function normally.

Upvotes: 2

Related Questions