Motivation

Pre-requisite for #9699

Currently vaadin-login-form is using createRenderRoot() that returns this and then the actual wrapper with shadow DOM is vaadin-login-form-wrapper element. This is mainly due to historical reasons related to using Polymer template.

Also, in vaadin-login-overlay we have teleporting logic for footer and custom-form-area slots that moves slotted nodes to the form wrapper when the overlay opens. This is problematic, see vaadin/react-components#269.

Proposed solution

1. Update vaadin-login-form to have shadow DOM and place vaadin-login-form-wrapper there
2. Make <slot> elements in vaadin-login-form that would forward children to the form wrapper
3. Use slot controllers in LoginFormMixin to create <form>, submit and forgot password buttons
4. Set exportparts on the vaadin-login-form-wrapper to make ::part() based styling work

Prototype: https://github.com/vaadin/web-components/compare/refactor/login-form-slotted

Additional context

This will enable us to add support for Flow counterpart APIs: vaadin/flow-components#5582