Skip to content

Add styling hooks: custom properties and ::part() on squares - #25

Draft
laat wants to merge 2 commits into
masterfrom
claude/github-issues-triage-4rzmzx-styling-hooks
Draft

laat wants to merge 2 commits into
masterfrom
claude/github-issues-triage-4rzmzx-styling-hooks

Conversation

@laat

@laat laat commented Sep 6, 2026 •

Copy link
Copy Markdown
Owner

Closes #21.

Both shapes proposed in the issue, since they cost nothing together and neither touches the JavaScript API.

Custom properties

The shadow stylesheet now reads these, with the previous hard-coded values as defaults, so nothing changes for existing pages:

Property Default Applies to
--chess-board-light #FFCE9E Light squares
--chess-board-dark #D18B47 Dark squares
--chess-board-border 1px solid black Border around the 8×8 board
--chess-board-frame-font-size 40% File and rank labels

The frame label size is included because the issue lists it among the values a page could not reach.

Parts

  • Every cell: part="square <name> <shade>", e.g. square e4 light, so chess-board::part(e2), chess-board::part(e4) { box-shadow: inset 0 0 0 0.15em #f0d13a } marks a last move.
  • The 8×8 table: part="board".
  • The file and rank labels (and the empty corner cells): part="frame".

The highlight attribute alternative is left out: parts cover it with no JS, and an attribute can be layered on top later if it turns out to be wanted for discoverability.

Demo

Two examples added to index.html, in the page's existing style: a green board with no border through the custom properties, and a board with the last move (e2, e4) marked through ::part(). The source block under an example now includes the CSS from a <style> inside the example, since these two need it.

Verification

  • Three new tests check the part names on the table, on a8, d4, e4 and h1, on all 64 cells and all frame cells, and that the stylesheet reads each custom property with the original default.
  • Checked in headless Chromium against the built demo that ::part(e4) overrides the square colour, the custom colours and border apply, neighbouring squares are untouched, and the generated source block shows the CSS.
  • pnpm typecheck, pnpm test (30 tests), pnpm build and pnpm build:pages pass.

Docs

readme.md gains a Styling section with both tables and examples. changelog.md gets an Unreleased entry.

Note: this PR and #24 both change the table builder in src/chess-board.ts and add an Unreleased heading to changelog.md, so whichever merges second needs a conflict resolution.

🤖 Generated with Claude Code

https://claude.ai/code/session_01VxKhiVNXdQ8Z1grVs38gY6

The square colours, the board border and the frame label size now read
custom properties (--chess-board-light, --chess-board-dark,
--chess-board-border, --chess-board-frame-font-size) with the previous
hard-coded values as defaults, so a page can match the board to its own
palette without forking the component.

Every cell carries part="square <name> <shade>", the 8x8 table is
part="board" and the file and rank labels are part="frame", so a page can
highlight the last move with chess-board::part(e2), chess-board::part(e4).

Closes #21

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01VxKhiVNXdQ8Z1grVs38gY6
@github-actions

github-actions Bot commented Sep 6, 2026 •

Copy link
Copy Markdown

@laat
laat changed the base branch from master to claude/web-component-demo-site-u51bei September 6, 2026 07:58
Two examples on the demo page: one board in green with no border through
the custom properties, and one with the last move marked through
::part(). The source block under an example now includes the CSS from a
<style> in the example, since these need it.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01VxKhiVNXdQ8Z1grVs38gY6
@laat
laat force-pushed the claude/github-issues-triage-4rzmzx-styling-hooks branch from 81d2b3c to a3ef296 Compare September 6, 2026 08:12
@laat
laat changed the base branch from claude/web-component-demo-site-u51bei to master September 6, 2026 08:12

This branch was successfully deployed

1 active (outdated) deployment
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Styling hooks: square colours are hard-coded and squares cannot be targeted from outside

2 participants