Comments (5)
Thank you for the nice words!
As for supporting a backward-compatible means of submitting input data with a form, I'm not sure what the best way to proceed would be.
- Apple will eventually support
ElementInternals
and its forms features. - While Elix has polyfilled features in a few cases, we usually only take on that cost when the polyfill can be fairly self-contained. In this particular case I think it might be challenging to create a single
Input
that both supports forms directly on browsers that allow that, and uses a hiddeninput
on Safari. Those cases are pretty different, and likely to be extremely surprising to component users — especially those who don't care about forms. - E.g., someone might easily have styling that affects regular
input
elements. Depending on how the styles are written, that styling might affect a dynamically-createinput
and make it visible to the end user. Because that behavior would only manifest itself on Safari, it might be confusing/challenging for someone to determine where and why the extrainput
was being created. - This trick wouldn't work in cases where
Input
or one of its subclasses are being used in the shadow of another element (likeComboBox
).
Given this, I think the best that could be managed would be to create an unofficial Input
-like component that can be used in situations where: a) someone needs a forms solution now for Safari, b) they are willing to use an unofficial component, and c) only needs to work at the page level (not in shadow). We've considered adding a separate repo for components that are on the margins of what Elix can officially support — if we were to do that, this kind of Input
-like component might belong there.
We're currently busy with a number of other priorities, but if you're interested in pushing this idea further, I'm happy to review your work and provide recommendations. For now:
- There are other things that can update the
value
of a component than typing in an input: another component may set thevalue
property, for example. I'd recommend having your input handler usesetState
to update the component'svalue
state, then have arender
implementation that renders the value to the hidden input. - Similarly, any state that needs to be rendered to the hidden
input
(like thename
property in your example) should similarly be applied inrender
. That ensures that dynamic changes toname
, etc., will get rendered to theinput
. - A simpler place to hide the
input
might be inside the component itself as a light DOM child. Theinput
will still be in the page DOM, and hence should be submitted with a form, but is less likely to cause problems. E.g., if something on the page dynamically moves the component, the input would move as well.
from elix.
...and thank you for considering my feedback and providing hints.
I can understand that you want to keep elix clean and not add shaky workarounds ;-) And the unofficial Input-like component you describe smells like trouble to me, I would rather not do that.
Your answer got me thinking in a different direction: I started investigating a polyfill for ElementInternals. Might make for a much more elegant solution? Little time right now, but I'll try to provide an update within a month, if you are not faster.
from elix.
I hadn't known about the polyfill. Please let me know how your investigation goes.
Since I think your original questions have been answered, for now I'll go ahead and close this.
from elix.
I tested the polyfill, seems to work fine with elix Input
element (just need to load it early enough, no code change required). I tested on Firefox 76 (polyfill active) and on Chromium 78 (polyfill inactive).
Currently (v0.0.15) the emulation is not 100%: see this issue. Until it is fixed, the form data can be accessed with the FormData
API.
from elix.
@JanMiksovsky I just tested a newer version of element-internals-polyfill (v0.0.21) where the emulation improved:
a custom element can now be accessed like a normal input with form['my-custom-element']
. It is not perfect (custom element cannot be found with form[n]
or form.elements
), but to me it looks like it covers 99% of the cases.
Maybe worth a mention in the elix documentation?
from elix.
Related Issues (20)
- Events(Tap,mousedown) Not triggered after moving from 7 to 12. HOT 4
- Inclusion of Elix Components in my designer demo HOT 3
- Issue summary, including the name of the relevant component or mixin HOT 1
- unhandled promises in the code HOT 3
- Location is not defined HOT 2
- How can I combine components and mixins? HOT 2
- Request: Improve documentation HOT 1
- How manually update input value get from NumberSpinBox ? HOT 3
- Inconsistent FilterComboBox whenClosed() result HOT 6
- FormElementMixin issue with Firefox 93 HOT 3
- Filtered ListComboBox loses attachement to text input HOT 5
- Input component does not allow "type" attribute HOT 2
- Carousel content can overflow (min-width: auto for flex) HOT 2
- Carousel / SlidingStageContent does not support fixed-positioned content such as DropdownList / Popup HOT 1
- Typescript "noImplicitAny" fails on method attributeChangedCallback in shared.d.ts
- Carousel not compiling to library HOT 4
- scss file is not supported, how we can provide support with scss HOT 2
- Wrong link in GitHub's "About" section HOT 1
- MenuItem and DropdownList, checkmark icon should be optional HOT 2
- Typescript types missing? HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from elix.