我刚遇到了一个有趣的情况,在一个原生自定义元素的 Shadow DOM 内部,我放置了一个提交按钮
我在
<button>
,并将其放在一个<form>
中。 <form id="one" action="" method="get">
<s-button>Select</s-button>
#shadow-root
<button>...</button>
<button>Outside</button>
</form>
我在
<form>
中有一个直接子元素<button>
,这个子元素可以提交表单。但是,在影子根中的<button>
却不能实现提交表单。从某种意义上讲,这是有道理的。但是,有没有人找到一种方法来告诉影子根中的<button>
正确地与<form>
一起使用,或者这是我必须通过JS处理的东西?我知道点击事件被阻止在Shadow DOM层,但我很惊讶居然没有办法允许按钮仍然成为表单的一部分,这可以通过属性或属性设置。当然,我可以捕获点击事件,然后从this
发送一个新事件,但这并不是同样的操作,因为我的事件将不再是用户生成的,并且与此相关联有一组巨大的规则。