[webcomponents] [Shadow]: Form elements crossing shadow boundary (bugzilla: 22443) (#65)

Title: [Shadow]: Form elements crossing shadow boundary (bugzilla: 22443)

Migrated from: https://www.w3.org/Bugs/Public/show_bug.cgi?id=22443

----
comment: 0
comment_url: https://www.w3.org/Bugs/Public/show_bug.cgi?id=22443#c0
*Yuta Kitamura* wrote on 2013-06-25 06:50:14 +0000.

The Shadow DOM specification should specify the behavior of form elements
if they cross shadow boundary.

Specifically, it should clarify the behavior of pressing a submit button
(or calling submit() method of the input element) in the following cases:

(1)  <form> - - - {shadow-root}
                        |
                        +-- <input type="submit">

(2)  <form> - - - {shadow-root}
        |               |
        |               +-- <content></content>
        |
        +-- <input type="submit">

and encapsulation requirements of the following properties of form elements:

* HTMLFormElement.elements, length, <getter>(unsigned long), <getter>(DOMString)
* HTMLLabelElement.control
* HTMLInputElement.form (and others)

----

comment: 1
comment_url: https://www.w3.org/Bugs/Public/show_bug.cgi?id=22443#c1
*Dimitri Glazkov* wrote on 2013-06-25 15:34:38 +0000.

Does this not cover it? http://www.w3.org/TR/shadow-dom/#html-forms

----

comment: 2
comment_url: https://www.w3.org/Bugs/Public/show_bug.cgi?id=22443#c2
*Yuta Kitamura* wrote on 2013-06-26 01:19:01 +0000.

Oops, didn't notice that section. However, the current wording is somewhat
vague:

* "each shadow tree must scope its form elements and form-associated elements"
  - What does "scope" mean?

* "the form submission must continue to work as specified"
  - What input elements are considered to be sent when the submit button is
    pressed? For example,

      <form> - - - {shadow-root}
         |               |
         |               +-- <input type="hidden" name="x" value="1">
         |               |
         |               +-- <content select="#sub"></content>
         |
         +-- <input type="hidden" name="y" value="2">
         |
         +-- <input id="sub" type="submit">

    What should be sent if one presses the submit button? "x=1&y=2",
    "x=1", or "y=2"? What's the form owner of <input name="x">?
    What about <input name="y">?

 - In the example (1) above, <input> element's form owner is null,
   thus pressing the button does nothing; am I correct?

----

comment: 3
comment_url: https://www.w3.org/Bugs/Public/show_bug.cgi?id=22443#c3
*Dimitri Glazkov* wrote on 2013-07-17 20:21:53 +0000.

*** Bug 20320 has been marked as a duplicate of this bug. ***

----

comment: 4
comment_url: https://www.w3.org/Bugs/Public/show_bug.cgi?id=22443#c4
*Jonas Sicking* wrote on 2014-05-05 23:42:21 +0000.

I don't think that <input>s in a Shadow DOM should get any special behavior compared to other <input>s that are not in the document. I.e. I don't think they should submit with a <form> that lives in a document. 

See my comment in bug 25562 comment 6 for why.

That said, I think that we should implement the system described here http://lists.w3.org/Archives/Public/public-webapps/2014JanMar/0448.html

And we could even add special features for making it easier to submit <input>s that live in a Shadow DOM. One way to do that would be to add a .formData property on DocumentFragment or ShadowRoot. That way the implementation of .formData on a custom element would simply be

function formData() {
  return this.shadowRoot.formData();
}

---
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/issues/65