对于Web组件,人们想要创建和覆盖的元素之一是<input>.输入元素很糟糕,因为它们很多东西取决于它们的类型而且通常难以定制,因此人们总是想要修改它们的外观和行为是正常的.
两年前或多或少,当我第一次听说Web组件时,我非常兴奋,我想要创建的第一种元素是自定义输入元素.现在规范已经完成,看起来我对输入元素的需求没有得到解决.Shadow DOM应该允许我改变它们的内部结构和外观但是输入元素被列入黑名单并且不能有阴影根,因为它们已经有一个隐藏的.如果我想添加额外的逻辑和行为,带有is属性的自定义内置元素应该可以解决问题; 我无法做影子DOM魔法,但至少我有这个,对吧？好吧Safari不会实现它,聚合物不会因为这个原因而使用它们,它们的气味就像很快就会被弃用的标准.
所以我留下了正常的自定义元素; 他们可以使用shadow DOM并拥有我想要的任何逻辑,但我希望它们是输入!他们应该在一个内部工作<form>,但如果我是正确的,表单元素不喜欢它们.我是否必须编写自己的自定义表单元素,以复制本机的所有内容？我必须告别FormData,验证API等吗？我是否失去了使用没有javascript工作的输入表单的能力？
我刚刚遇到了一个有趣的情况，我<button>在放置在<form>.
<form id="one" action="" method="get">
<s-button>Select</s-button>
#shadow-root
<button>...</button>
<button>Outside</button>
</form>
我也有一个<button>作为<form>.
孩子<button>导致表单提交。
但是<button>在 shadow-root 中没有。
在某种程度上，我想这是有道理的。但是有没有人想出一种方法来告诉 shadow-root<button>正常工作，<form>或者这是我必须通过 JS 处理的事情？
我知道单击事件在 Shadow DOM 层被阻止，但我很惊讶没有办法让按钮仍然是表单的一部分，可以通过属性或属性设置的东西。
当然，我可以捕获点击事件，然后从中发送一个新的事件，this但这不会做同样的事情，因为我的事件将不再是用户生成的，并且有大量与之相关的规则。