Resize

<chess-board> uses ResizeObserver to automatically detect when it's resized and recalculate and redraw the board based on the size of its parent element.

In case a browser does not support ResizeObserver, you can load a polyfill or manually call the resize method.

HTML

<chess-board style="width: 60%" position="start"></chess-board>

JavaScript

const board = document.querySelector('chess-board');

if (window.ResizeObserver === undefined) {
  window.addEventListener('resize', () => board.resize());
}