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)
When you create an object where the key's and value's name are the same, you can use the shorthand { value } instead of { value: value }
Border radius doesn't propagate to the children, so the cells are still square and will show if it has a background