It doesn’t render correctly on firefox but does in edge, it’s a rectangle, not a square.
Since the scaling is based on the font size, using em + line-height: 1 allows it to scale correctly by adding it to
.sudoku-field.
Fixing it by wrapping the numbers and adding height: 100% fixes the individual cells, but the whole table is still a
rectangle but causes the cells to overlap (inside out size issues was excuse).
There is a bunch of unused code
Autosolver is broken, I had to move the function around
Switched .forEach to for loop for performance (recommended practice, but honestly it’s not a big deal)
Convert the keyboard key lookup to a map, mostly stylistic but I imagine it’s also easier to edit.
Not sure why there is a col and row class that manages cells if the layout is flat
Getters, setter, properties, functions and constructors are all mixed together, it's hard to read
A custom event manager is used, EventTarget is built into the browser not sure why it’s not used
Usage of _ instead of # for private variables
It's not recommended to setup the elements in the constructor https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#implementing_a_custom_element
You can use ||= for assigning to an undefined variable (if it's undefined)
Borders are on all grid elements, causing a double border on the edges
I'd recommend running Biome.js or ESlint + Prettier to clean up the code (if you're using ML you can even make these strict enough about ordering and naming conventions)