polymer element as form input element

Günter Zöchbauer

unread,

Apr 9, 2014, 4:08:01 AM4/9/14

to polym...@googlegroups.com

Is there a way to make a polymer element behave like a DOM input element

- it's data gets sent on submit

- participate in validation

- ...?

I thought this was a common requirement but I only found one unanswered SO question.

Günter

Michael Bleigh

unread,

Apr 9, 2014, 4:18:09 AM4/9/14

to polym...@googlegroups.com

I don't know all the ins and outs, but this appears to work for me:

<!doctype html>
<html>
  <head>
    <script src="platform/platform.js"></script>
    <link rel="import" href="polymer/polymer.html">
    <polymer-element name="super-input" extends="input" attributes="value name" noscript>
      <template>
        <style>:host{ border: 0; padding: 0; }</style>
        This is my <input value="{{value}}">
      </template>
    </polymer-element>
  </head>
  <body>
    <form method='get'>
      <input is="super-input" value="whatever" name='test'>
      <button type="submit">Submit</button>
    </form>
  </body>
</html>

Hope that helps!

Günter Zöchbauer

unread,

Apr 9, 2014, 5:01:24 AM4/9/14

to Michael Bleigh, polymer-dev

Hi Michael,

Thanks for the reply, yes that helps.

Didn't think of extending an existing element.

I always try to avoid this because of the special syntax when using them.

There seems to be no other way then?

Mit freundlichen Grüßen

Günter Zöchbauer
gue...@gzoechbauer.com
+43 (699) 10 18 87 15

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to a topic in the Google Groups "Polymer" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/polymer-dev/V0qah6T1Lzk/unsubscribe.
To unsubscribe from this group and all its topics, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/edfd0548-21cd-4e25-b914-95a70b2795e3%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Addy Osmani

unread,

Apr 9, 2014, 10:13:52 AM4/9/14

to polym...@googlegroups.com, Michael Bleigh, gue...@gzoechbauer.com

Hey Gunter,

Where you're looking to build an element that includes a significantly close experience to something the browser already provides with an existing element (e.g behaving like a standard DOM <input> element), extension is a good way to go. We use this approach for the input elements that are extended in the Polymer TodoMVC example over in https://github.com/tastejs/todomvc/blob/gh-pages/architecture-examples/polymer/elements/td-input.html.

To unsubscribe from this group and all its topics, send an email to polymer-dev+unsubscribe@googlegroups.com.

John Messerly

unread,

Apr 9, 2014, 2:36:32 PM4/9/14

to Addy Osmani, polymer-dev, Michael Bleigh, Günter Zöchbauer

I noticed that core-input uses encapsulation rather than inheritance, so I wonder what the plan is for that element?

You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/687c9c02-37d3-447a-aa73-c486d228569b%40googlegroups.com.

Michael Bleigh

unread,

Apr 9, 2014, 2:39:29 PM4/9/14

to John Messerly, Addy Osmani, polymer-dev, Günter Zöchbauer

My guess is that's more for inputs that are embedded in other dynamic elements and aren't meant to be submitted as part of a form.

Scott Miles

unread,

Apr 9, 2014, 2:40:20 PM4/9/14

to John Messerly, Addy Osmani, polymer-dev, Michael Bleigh, Günter Zöchbauer

`core-input` was just born yesterday, and this was a tricky decision. It's not set in stone.

I admit that we almost never (read: never) use actual normal `<form>` processing, so we have a bit of a blind spot there.

I believe the lack of extensibility for form controls is a well-known problem; we generally just work around it with JavaScript which is easy but not ideal.

On Wed, Apr 9, 2014 at 11:36 AM, John Messerly <jmes...@google.com> wrote:

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAJup4OXR6qYHA_QjGWVCCcrS6BMuw_pH0FKu7AJFMUBPSfMJUA%40mail.gmail.com.

Günter Zöchbauer

unread,

Apr 9, 2014, 2:57:18 PM4/9/14

to polym...@googlegroups.com, John Messerly, Addy Osmani, Michael Bleigh, Günter Zöchbauer

I guess the most elegant way would be than to create a custom form element <my-form> and provide it with the capabilities the DOM form element has and in addition with support for custom input elements like core-input.

Custom input elements would just need to implement a specific interface.

Scott Miles

unread,

Apr 9, 2014, 3:02:42 PM4/9/14

to Günter Zöchbauer, polymer-dev, John Messerly, Addy Osmani, Michael Bleigh, Günter Zöchbauer

Yes, this is precisely what we usually do.

Of course, when vending something to the world at large, we will encounter folks who for whatever reason will insist on native <form>, so this is good to be aware of ahead of time. =P

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/5ac3f65c-1b83-4997-888a-2cb5740d2d45%40googlegroups.com.

Dominic Cooney

unread,

Apr 9, 2014, 5:17:43 PM4/9/14

to Scott Miles, Günter Zöchbauer, polymer-dev, John Messerly, Addy Osmani, Michael Bleigh, Günter Zöchbauer

I'm going to suggest a hack:

If an input element is in Shadow DOM, does it participate in form submission?

If so, you could bury an <input> inside another layer of Shadow DOM and push values into it to be submitted.

Dominic

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAHbmOLb-094YuNFKEgZ7eVuEXWvA4DgGy6ui1-k04cL%2BjrM7hA%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.

--

Günter Zöchbauer

unread,

Apr 10, 2014, 3:39:16 AM4/10/14

to polym...@googlegroups.com, Scott Miles, Günter Zöchbauer, John Messerly, Addy Osmani, Michael Bleigh, Günter Zöchbauer

Hi Dominic,

as far as I know input elements inside the shadow DOM are ignored on submit.

If this worked it would of course be a nice solution.

Addy Osmani

unread,

Apr 10, 2014, 4:37:22 AM4/10/14

to Günter Zöchbauer, polym...@googlegroups.com, John Messerly, Michael Bleigh, Günter Zöchbauer

On Wednesday, April 9, 2014, Günter Zöchbauer <gzo...@gmail.com> wrote:

I guess the most elegant way would be than to create a custom form element <my-form> and provide it with the capabilities the DOM form element has and in addition with support for custom input elements like core-input.
Custom input elements would just need to implement a specific interface.

I've been using custom interfaces for handling forms in this manner in my own custom elements and it works. It's not the most elegant of patterns :)

I think Dominic's suggestion of inserting <input> fields into yet another Shadow DOM layer should work, but you'd need to craft some additional plumbing in order to hook the values up correctly.

Scott, I wonder if there's any value in us putting together some samples of how to handle forms in custom elements just for reference. There may already be good core-* elements that demonstrate this.

Daniel Chin

unread,

Jun 4, 2014, 10:46:03 AM6/4/14

to polym...@googlegroups.com, gzo...@gmail.com, jmes...@google.com, mbl...@gmail.com, gue...@gzoechbauer.com

HI Guys

I am trying to achieve the same thing

I want to be able to create a custom form then embed my custom elements inside and they participate in submission and validation. So for example

<custom-form>

<custom-input></custom-input>

</custom-form>

I know you can achieve similar extending elements (inputs etc)

From what I can work out this sounds similar to what Gunter was referring too, Is there a way or would this require a lot of ground work what do you guys think

Regards

Dan

Scott Miles

unread,

Jun 4, 2014, 1:03:43 PM6/4/14

to Daniel Chin, polymer-dev, Günter Zöchbauer, John Messerly, Michael Bleigh, Günter Zöchbauer

It's possible to recreate `form submission` (how it looks from the server's perspective) using AJAX. If one is willing to work this way, then there is an extreme amount of freedom.

However, some users insist on using vanilla `<form>` element and requiring native input support.

These use cases have different answers as to what is possible and how to make them go. If you can identify your needs along these lines, we can provide a better answer.

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/dc842770-52b7-4440-9964-6d594f96dc03%40googlegroups.com.

Daniel Chin

unread,

Jun 9, 2014, 5:07:12 AM6/9/14

to polym...@googlegroups.com, danch...@googlemail.com, gzo...@gmail.com, jmes...@google.com, mbl...@gmail.com, gue...@gzoechbauer.com

Hi Scott

Thanks for your response

I have tried coding a few scenario's to see which would work best but with not much success each method felt like I was going down a rabbit hole. What I really would like to do is have a custom form element which exposes a content tag which allows me to project custom components which are really wrapped form elements.

<custom-form>

<custom-ui-input></custom-ui-input>

<custom-ui-button></custom-ui-button>

</custom-form>

I would like these to also participate in form validation using html5 form validation If possible, With response to using ajax I really don't mind. I am just trying to determine the best approach to achieve this.

eddie....@gmail.com

unread,

Aug 8, 2014, 1:22:41 PM8/8/14

to polym...@googlegroups.com, danch...@googlemail.com, gzo...@gmail.com, jmes...@google.com, mbl...@gmail.com, gue...@gzoechbauer.com

Are there any samples showing how to properly use custom elements within forms for submission like Addy proposed?

Rob Dodson

unread,

Aug 8, 2014, 1:46:08 PM8/8/14

to eddie....@gmail.com, polymer-dev, Daniel Chin, gzo...@gmail.com, John Messerly, Michael Bleigh, gue...@gzoechbauer.com

If the elements expose a value property then you can follow the example from this SO answer: http://stackoverflow.com/questions/24461460/polymer-form-post-data

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/b4fe61a1-34ea-4ad5-9d18-66eb2b54334b%40googlegroups.com.

eddie....@gmail.com

unread,

Aug 8, 2014, 2:01:20 PM8/8/14

to polym...@googlegroups.com, eddie....@gmail.com, danch...@googlemail.com, gzo...@gmail.com, jmes...@google.com, mbl...@gmail.com, gue...@gzoechbauer.com

Thanks for the quick reply Rob!

There are a few potential answers in that SO. Are you suggesting to have the custom Polymer element extend a native form element and expose the value attribute so FormData will pick that up? I'm building a star rating Polymer element and trying to decide if the best approach is to have that extend a native form element or if another approach is more preferred. I noticed that neither core-input nor paper-input extend the native input element and curious why that choice was made.

Rob Dodson

unread,

Aug 8, 2014, 2:06:27 PM8/8/14

to eddie....@gmail.com, polymer-dev, Daniel Chin, gzo...@gmail.com, John Messerly, Michael Bleigh, gue...@gzoechbauer.com, Yvonne Yip

oh sorry, I was referring to the jsbin linked at the bottom which looks at all the children of the form, and grabs their values: http://jsbin.com/kurelaji/2/edit

extending an element is a valid option as well. I'm not entirely sure why the team chose to compose input elements instead of extend them. Yvonne, do you know?

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/5864603d-de5d-4dce-ac60-9cf8a9289cf3%40googlegroups.com.

Steve Orvell

unread,

Aug 8, 2014, 2:24:22 PM8/8/14

to Rob Dodson, eddie....@gmail.com, polymer-dev, Daniel Chin, Günter Zöchbauer, John Messerly, Michael Bleigh, gue...@gzoechbauer.com, Yvonne Yip

It's currently not possible to augment the user-agent shadowRoot so what you can do by extending an element like <input> that already has a shadowRoot is limited. (e.g. http://jsbin.com/wixaj/1/edit)

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAJj5OwCKQYqjkUyXdMy2CfdmDPTkTMzdtbmyDKiG5pewDh63WQ%40mail.gmail.com.

eddie....@gmail.com

unread,

Aug 8, 2014, 2:28:26 PM8/8/14

to polym...@googlegroups.com, robd...@google.com, eddie....@gmail.com, danch...@googlemail.com, gzo...@gmail.com, jmes...@google.com, mbl...@gmail.com, gue...@gzoechbauer.com, yky...@google.com

Thanks for the replies. I was noticing this limitation when going down the road of extending my element to an input element. Wasn't sure if it was something I was missing. I'll try out jsbin option suggested above by Rob.

moham...@gmail.com

unread,

Dec 13, 2014, 11:45:37 AM12/13/14

to polym...@googlegroups.com

Hello Michael

Your answer is useful but from other answers in all the web that I read.

But steel I don't know that how can I send a form that are include of same polymer elements (like core-dropdown, paper-input etc.) to my server.

Can you help me?

در چهارشنبه 9 آوریل 2014، ساعت 12:48:09 (UTC+4:30)، Michael Bleigh نوشته:

Michael Bleigh

unread,

Dec 17, 2014, 8:10:27 PM12/17/14

to polym...@googlegroups.com, moham...@gmail.com

Right now it's not necessarily very easy to do as the core and paper form elements aren't particularly designed to stand in for standard form elements. To make them submit like a standard form you'd likely need some onsubmit JavaScript that serialized the values into hidden fields.

My guess is that a future version of Polymer will ship with more "native-compatible" form elements.

Reply all

Reply to author

Forward