demo · v131
Slotted Counter
A <step-tracker> web component with up to four step slots. CSS :has-slotted detects how many slots are filled and adapts the grid: 1 slot → full-width, 2 → half/half, 3 → thirds, 4 → quarters. No JavaScript layout logic — the component uses only :has-slotted on each named slot host.
toggle slots
Step 1
Step 2
Step 3
Step 4
Plan
Define requirements and scope the work.
Build
Implement features and write tests.
active slots: 2 — layout: half / half
the code
/* Inside the shadow root stylesheet */
:host {
display: grid;
grid-template-columns: 1fr; /* default: 1 step */
}
/* 2 filled slots → half/half */
:host(:has(slot[name="step-2"]:has-slotted)) {
grid-template-columns: 1fr 1fr;
}
/* 3 filled → thirds */
:host(:has(slot[name="step-3"]:has-slotted)) {
grid-template-columns: repeat(3, 1fr);
}
/* 4 filled → quarters */
:host(:has(slot[name="step-4"]:has-slotted)) {
grid-template-columns: repeat(4, 1fr);
}
/* Slot placeholder: only shown when the slot has content */
.step-cell {
display: none;
}
:host(:has(slot:has-slotted)) .step-cell {
display: block;
}