Add custom elements polyfill
I use customized built-in components, extended from any HTML elements (e.g., HTMLDivElement), for product search, multiselect, and tags input fields. The idea is that people that without JavaScript could still use the regular, non-customized, inputs. It turns out, this does not work so well: the CSS assumes that JavaScript is enabled, and web components supported by the browser. If one of these fails, then the controls are unusable—the multiselect is too short, and the tags field accepts invalid characters that the backend does not validate until it fails with a database error. We discovered this because Apple does not implement customized built-in components[0], hence it does not use my JavaScript code and forms, the expenses forms in particular, are almost useless. The way to fix this is to replace the regular inputs with autonomous web components, extended from HTMLElement, using JavaScript, because it would only do so with JavaScript enabled, and the CSS style would only apply to these components, not the regular input fields. However, currently i do not have time to do the proper fix, and have to use a polyfill for Safari to support customized built-in components. Shame. [0]: https://lists.w3.org/Archives/Public/public-webapps/2013OctDec/0801.html
This commit is contained in:
parent
998159d1d7
commit
e322ddd168
File diff suppressed because one or more lines are too long
|
@ -6,6 +6,7 @@
|
|||
<title>{{ template "title" . }} — Numerus</title>
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="/static/numerus.css">
|
||||
<script src="/static/htmx@1.9.2.min.js"></script>
|
||||
<script type="module" src="/static/custom-elements@1.3.0.min.js"></script>
|
||||
<script type="module" src="/static/numerus.js"></script>
|
||||
<script defer src="/static/alpinejs@3.12.0.min.js"></script>
|
||||
</head>
|
||||
|
|
Loading…
Reference in New Issue