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:
jordi fita mas 2023-11-11 03:32:03 +01:00
parent 998159d1d7
commit e322ddd168
2 changed files with 3 additions and 0 deletions

File diff suppressed because one or more lines are too long

View File

@ -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>