Stencil Js，使用自定義按鈕提交表單

Question

我有一個自定義的 web 元素（我的按鈕），它是用帶有 shadowDom 的 stencil js 創建的。

<form>
  <input type="text" name="field1"/>
  <input type="password" name="field2"/>

  <my-button type="submit">click me</my-button>
</form>

如果我在任何<input>字段中單擊“Enter”鍵 - 必須觸發onsubmit事件。 但是如果<my-button>使用 shadowDom 就不會發生這種情況。 沒有 shadowDom，它就像一個典型的<button type="submit"> 。

有沒有辦法讓帶有 shadowDom <my-button>像原生<button type="submit">一樣工作？

Found few solutins here Submitting a form using a custom button using HTML Web Components但第一個解決方案是針對原生 web 元素（沒有找到如何在 Stencil Js 中實現相同的元素），第二個解決方案在 Safari 中不起作用，因為 883755687566到目前為止不支持is屬性。

Answer 1

我見過的兩個主要選項：

1. 不要在該組件上使用 Shadow DOM。 Stencil 有一個scoped為 styles 的選項，這將防止 styles 影響組件外部的任何內容，但可以從外部更改樣式。
2. 在組件的connectedCallback中添加一個隱藏的本機button元素作為 web 組件的同級元素。 這保留了使用 Shadow DOM 的優勢，但它確實“泄漏”了 HTML，這可能會成為一個問題。

理想的解決方案是讓 Stencil 支持formAssociated() 。 有一個未解決的問題（包括偉大的@johnjenkins 的第一個實現和解決方法），如果您想看到它，請豎起大拇指： https://github.com/ionic-team/stencil/issues/2284