Spare Pieces

Set sparePieces to true to show spare pieces that can be dropped onto the board.

HTML

<chess-board
    style="width: 400px"
    draggable-pieces
    drop-off-board="trash"
    spare-pieces>
</chess-board>

<button id="startBtn">Start Position</button>
<button id="clearBtn">Clear Board</button>

JavaScript

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

document.querySelector('#startBtn').addEventListener('click', () => {
  board.start();
});
document.querySelector('#clearBtn').addEventListener('click', () => {
  board.clear();
});