SQL Table Custom Element

Please do not use this, it's a really awful idea that I threw together as a joke after a friend suggested that html should be able to directly interact with a database.
I take no responsibility for anything that happens if you choose to ignore this warning.

So what is this?

Inspired by a discord conversation that started a little like this:

Just started wondering if there is a way to read from a database in HTML 🤔
- gusgo99

and quickly led to:

<sql query="SELECT * FROM Foo" />
- moon_president

This is a collection of custom HTML elements that allow running arbitrary sql queries on an SQLite database fetched from the server. From a practical point of view this is entirely useless and should never be used, but it was a fun introduction to web components and I did learn a couple of things along the way.

The code can be browsed on Github here, or just open your browser's dev tools and take a look at the source for the examples below.

Limitations

This is a haphazard implementation of an idea that should have remained just that, it is not remotely production ready (and never will be). I could list limitations all day, here are the first few that come to mind:

Security What security? The entire SQLite database is sent to the front-end, nothing is private.
Performance No effort has been made to make this performant, the UI thread is used even though SQLite explicitly discourages this (use a worker thread instead for long running JavaScript operations), if multiple tables use the same database file it's loaded each time, the list goes on...
Compatibility Only SQLite, I did look to see if any browser -> database clients existed (even more horrifying), but the (lack of) raw TCP socket support in browsers currently makes those not possible.
Error handling There is none!
Custom element callbacks Only connectedCallback has been implemented, any time the position of these elements in the DOM is manipulated weird things might happen.
More Likely many more, I really wasn't kidding in the warning at the top of this page, don't use this!

Examples

A few examples of the elements in action, the SQLite database used can be downloaded here to browse in a more sane way.

Single value selection

Single values can be selected from the database using the <sql-value> element.

For a single value the field returned must be named value in the SQL statement.

If multiple rows are returned then the value from the first row is used.

The pet with the name 'Rex' is a .

Simple select all

List of users with their IDs, names, and ages.

Choosing specific columns and filtering

Table headings will reflect the column names used in the query.

Joins e.t.c.

More advanced queries are possible, even modifications though they won't be persisted and each table has it's own instance of the database so they're very pointless.

Empty results

Well, what did you expect? If there are no results from the query the table will still be displayed, it just won't have any rows.

Syntax Errors

Did I mention there's no error handling? If the database file doesn't exist or the query has invalid syntax things get a bit messy...