Make login form with google password manager.

[Krishuthapa]

I am using LitElelement. I need to make a login form with feature of autocomplete of username and password. For this i need to integrate the form with google password manager.How can i achieve it with lit element?

[cintaccs]

I have the same challenge... even using MDC web components

[chase-moskal]

the best workaround i can think of: the web components need to accept the input elements from the top-level via slotting

that should work, but it makes form elements annoying and less elegant to use. on the plus side, the top-level markup gets lots of control over the input element attributes related to autofill and more, and we should be able to validate/manipulate the input elements from within the web component

<supercool-form>
  <input type="text" autocomplete="username"/>
</supercool-form>

i guess what's truly broken, is that we can't have a <contact-form></contact-form> which is prefabricated with all the inputs in-place, each input has to be provided.. so that really does actually suck.. i guess we wait for the browsers to fix this?

[chase-moskal]

see PolymerElements/iron-form#197

[web-padawan]

We created vaadin-login-overlay because of exactly this thing (certain password managers not being able to work with inputs in Shadow DOM). Feel free to try if that would work for you.

[chase-moskal]

of course a simple workaround is to use light-dom for reusable forms, via createRenderRoot

[justinfagnani]

@web-padawan that's very nice! The technique of using an overlay for this is probably the best idea for now. I think some common integration components, like for Stripe, use this approach too.

@chase-moskal the problem with just using createRenderRoot is that you need to use that all the way down from your app to the form. Overlays solve that problem.

[chase-moskal]

@justinfagnani — oh interesting, i must be missing something! what is meant by "overlay"? is this some kind of shadow dom feature i'm having trouble finding? it's not just another word for "modal" i presume? i'm having trouble figuring this one out! thanks!

[kevinpschaaf]

By virtue of the vaadin-login-overlay hoisting the overlay contents into the main document, it works around the issue of password managers not finding form inputs to autocomplete in Shadow DOM.

To avoid needing workarounds like that, we'd need the relevant password managers to find form controls in Shadow DOM. There are a couple of Chrome issues around its autofill features here you can follow:

• https://bugs.chromium.org/p/chromium/issues/detail?id=746593
• https://bugs.chromium.org/p/chromium/issues/detail?id=649162

Based on the description of the workarounds here (thank you @web-padawan!) and the fact that this isn't a LitElement-specific issue, I'm going to go ahead and close this issue.