我正在尝试使用addEventListener从Shadow DOM中获取用户的输入，但是没有任何响应，没有任何错误。对元素的引用可以正常工作，因此console.log（input）打印出正确的元素。相同的代码在没有影子DOM的情况下也可以正常工作，但是我必须将其包括在我的项目中。这是我的代码（这些事件仅用于检查过程）：
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代码：
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>
问题很简单。您的代码实际上创建了两个<user-name>。
一个是用html静态创建的：
<user-name></user-name>
另一个是由javascript动态创建的：
var x = new Quiz()
动态文件永远不会附加到文档中，因此您只能在页面上看到静态文件。由于仅在动态域上调用getUserName()，因此click和input侦听器永远不会添加到静态域上。这就是为什么您没有任何回应的原因。
我建议您将addEventListener()放在构造函数中，然后静态的应该正常运行。