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). 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 [email protected]. 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.
