While working through the remaining errata for Patterns in Polymer, I came across one that states that you can put a vanilla form inside of a Polymer element and expect that it should form-submit to an HTTP server like any other form. I honestly do not know that I have ever thought to do that, let alone try it. Now is as good a time as any.
I did research submitting a Polymer element as part of a normal form. That is, the Polymer element is some kind of super date picker and it is embedded in a vanilla HTML form. The expectation was that
<input>fields within the Polymer element would be submitted along with any other form data on the page. As I found, this was not the case—the Polymer data was not submitted. In the end, I came up with a MutationObserver workaround, which served as the basis for a chapter in the book.
<input>elements now work?
I am still working with the sample form that looks like:
The first and last text
<input>fields are defined in the HTML of the main page while the middle
<input>is defined inside the very simple
But, if I enter data in all text
<input>fields and submit the form, only the form elements that are part of the main document's HTML are submitted:
So you cannot submit a normal HTML form with a Polymer element that contains its own
<input>tags. The MutationObserver approach is still needed. A bit of a bummer, but I confess that I relieved that I do not have to rewrite the chapter!
That said, this was not what the errata report specifically addressed. Said reviewer indicated that, if the Polymer element contained both the
<input>, then submitting it should work just fine.
And, indeed, that does work. I copy the HTML from the page into the
<template>of my Polymer element:
<polymer-element name="hello-you"> <template> <form action="test" method="post"> <h1>Plain-old Form</h1> <input type=text name="plain_old_param" placeholder="Plain-old form field"> <input type=submit value=Play> </form> </template> <script type="application/dart;component=1" src="hello_you.dart"></script> </polymer-element>When I fill out that
<input>and submit the
<form>contained entirely inside the Polymer element, I find that it is submitted:
So in the end, not much needs to change in that chapter. In my opinion, Polymer elements that serve as
<input>fields are a more likely use-case than a Polymer element that contains an entire
<form>, so the chapter seems a very worthwhile one to include in the book. Still, I go back to rework the wording a little to (hopefully) make the use-case clearer.