Outside of Polymer, what about just the base DOM? On Tuesday, May 27, 2014 6:08:33 PM UTC-7, Elliott Sprehn wrote: > > 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. > > > > On Tue, May 27, 2014 at 4:28 PM, Stuart Bentley > <[email protected]<javascript:> > > wrote: > >> 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] <javascript:>. >> To view this discussion on the web visit >> https://groups.google.com/d/msgid/polymer-dev/38b02fa0-4003-44e9-b329-5aca1d8e0642%40googlegroups.com<https://groups.google.com/d/msgid/polymer-dev/38b02fa0-4003-44e9-b329-5aca1d8e0642%40googlegroups.com?utm_medium=email&utm_source=footer> >> . >> For more options, visit https://groups.google.com/d/optout. >> > >
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/761457f1-6304-4530-9e2a-e3e424a328d7%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
