tandem
/
numerus
2
0
Fork 0
Code Issues 39 Pull Requests Packages Projects 1 Releases 1 Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/static/custom-elements@1.3.0.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
web/template/app.gohtml
View File

@ -6,6 +6,7 @@
<title>{{ template "title" . }} — Numerus</title> <title>{{ template "title" . }} — Numerus</title>
<link rel="stylesheet" type="text/css" media="screen" href="/static/numerus.css"> <link rel="stylesheet" type="text/css" media="screen" href="/static/numerus.css">
<script src="/static/htmx@1.9.2.min.js"></script> <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 type="module" src="/static/numerus.js"></script>
<script defer src="/static/alpinejs@3.12.0.min.js"></script> <script defer src="/static/alpinejs@3.12.0.min.js"></script>
</head> </head>