Creating a custom password input using Custom Elements + Shadow DOM

[Stuart Bentley]

I'm looking to create a custom password input element that behaves like the Chroma-Hash jQuery plugin, as seen on http://mattt.github.io/Chroma-Hash/

I want to make a version of this element that can effectively be used as a drop-in replacement for <input type="password"> unobtrusively and with as few side-effects as possible.

The jQuery plugin works by appending three absolutely-positioned elements after the input element. This has several undesirable characteristics:

- It relies on scripts to keep the elements properly positioned.

- It inserts additional sibling elements which may conflict with style selectors.

- The elements at the "end" of the input are actually on top of it, and will not reflect styles on the input itself (such as border-radius).

The custom element that I'm looking to create would render as a container containing the textual input component, followed by three color bars, effectively looking like the color bars are "inside" the input border. Any styling to the element would apply to the container.

How can I do this with Shadow DOM? I've tried creating a shadow root on an input element, but I can't figure out how to properly bring back its "input" content and have the container be recognized as the input element (eg. with the focus glow lying outside the element's border and not within it).

[Elliott Sprehn]

We don't give you the tools to do this very easily right now. You'd need to add a ShadowRoot to an existing <input> and then update it's value to act like a regular form control, and then you'd want to put a regular <input type="password"> into the ShadowRoot.

Something like: <input is="custom-password" type="password"> and then <polymer-element name="custom-password" extends="input">

but you'll soon realize that focus behavior is not right. Polymer probably needs some sugaring to help you there, but more generally we need to expose better focusing primitives and also some way to participate in form submission.

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/38b02fa0-4003-44e9-b329-5aca1d8e0642%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Stuart Bentley]

Outside of Polymer, what about just the base DOM?