Replies: 1 comment
-
Note: our excellent tech writer has written an article on web.dev on this. You can read it here. AutocompleteFor autocomplete, that seems to be a bug with Chrome. You can follow along here: https://bugs.chromium.org/p/chromium/issues/detail?id=649162 Form ParticipationFor element participation there are two specs still being implemented by the browser vendors: ElementInternalsAllows the browser to see your custom element as a form element and will do everything you expect it to do. Problem is that it's hard to polyfill and thus the polyfills are quite large: FormDataEvent.setAllows your component to hook into a form rather than the other way around. Your element needs to find the form in its ancestor tree and then listen for the Problem is that you won't get the nice things about form submission like the sections autofilling with previous data on back button press. Also a lot of things are not just automatic like WorkaroundsYou can easily polyfill the formdata event. The issue linked above even has a few-lined example on how to do so. Alternatively you can disable shadow dom for those components by overriding Another, older method was to create another, hidden, input in the light dom of the component and mirror the value, name, and type of the input inside the shadow DOM. Finally, another popular method is to write your component such that the input is slotted in by the user. e.g. <my-datepicker>
<input slot="month" name="birthday-month">
<input slot="day" name="birthday-day">
<input slot="year" name="birthday-year">
</my-datepicker> |
Beta Was this translation helpful? Give feedback.
-
I love LitElement but I find one of the major drawbacks of using Lit is the requirement of the ShadowDOM. The ShadowDOM is a double-edged sword in practice, because it gives us boundaries between customElements and prevents low-level communication between customElements too. In this discussion I want to take a look at
<form>
and autocomplete.The requirements needed to enable autocomplete on your elements are:
<input>
elements wrapped in a<form>
tag<input type="submit">
included within the<form>
tag<input>
elements the autocomplete attribute with a proper valueThere is an issue, in practice, for LitElement. If we design/import customElements that wrap around an
<input>
tag then we have created a boundary around our<input>
using the ShadowDOM. If we try to use the elements like this......then we find that autocomplete does NOT work here. The ShadowDOM is preventing the
<form>
from seeing the<input>
component here which breaks our requirements. I was hoping, maybe, with the revival of Lit that we could see some Tender Loving Care for those developers who would like to use both of these functionalities? I know this is difficult...Beta Was this translation helpful? Give feedback.
All reactions