Javascript 侦听现有事件的Web组件

我目前正在尝试获取一个自定义表单元素，以侦听由其子组件创建的提交事件。发送一个自定义事件，比如“test”，然后监听它，效果很好。但是，当我试着去听“提交”时，它是不起作用的。也许是因为这是一个已经存在的事件

也许我不得不以不同的方式安排这次活动，但我不知道如何安排。或者甚至可以使用“提交”事件

const buttonemplate=document.createElement（'template'））
buttonTemplate.innerHTML=`
标签
`;
类rdButton扩展HtmleElement{
构造函数（）{
超级（）；
这是阿塔奇沙多({
模式：“打开”
});
this.shadowRoot.appendChild（buttonemplate.content.cloneNode（true））；
this.$button=this.shadowRoot.querySelector（'button'）；
此.button.addEventListener（'单击'，（）=>{
console.log（'单击按钮'）
此.dispatchEvent（新事件（'submit'）{
“泡沫”：没错，
“可取消”：true
}));
});
}
获取标签（）{
返回此.getAttribute（'label'）；
}
设置标签（值）{
this.setAttribute（'label'，value）；
}
静态get ObservedAttribute（）{
返回['label']；
}
attributeChangedCallback（名称、旧值、新值）{
这个。render（）；
}
render（）{
this.$button.innerHTML=this.label；
}
}
const formTemplate=document.createElement（'template'）
formTemplate.innerHTML=`
`;
类rdSubmit扩展了HtmleElement{
构造函数（）{
超级（）；
这是阿塔奇沙多({
模式：“打开”
});
this.shadowRoot.appendChild（formTemplate.content.cloneNode（true））；
this.shadowRoot.addEventListener（'submit'，（）=>{
console.log（'表单已提交'）
});
}
}
window.customElements.define（'rd-button'，rdButton）；
window.customElements.define（'rd-form'，rdSubmit）
这是否回答了您的问题？