Inspect the fixed example
A note starts with base and lesson. The fixed script forces highlight on once; inspect the class tokens and its green border.
<style>html{font-size:16px}body{margin:12px;font:1rem/1.5 system-ui,sans-serif;color:#17332d;background:#fff}p{overflow-wrap:anywhere}output{display:block;margin-block:12px;overflow-wrap:anywhere;white-space:pre-wrap}button,input{font:inherit;max-width:100%;box-sizing:border-box}button{margin:4px;padding:8px}label{display:block;margin-block:8px}button:focus-visible,input:focus-visible{outline:3px solid #23715d;outline-offset:2px}ul{padding-inline-start:24px}li{overflow-wrap:anywhere}.highlight{border:2px solid green}</style>
<p id="note" class="base lesson">Workshop note</p><output id="result"></output>
<script>const note=document.querySelector('#note');note.classList.toggle('highlight',true);
const result=[...note.classList];
document.querySelector('#result').textContent=JSON.stringify(result);
console.log(JSON.stringify(result));
</script>["base","lesson","highlight"]| Inspection | Supplied input or action | Result |
|---|---|---|
| Before | base lesson | ["base","lesson"] |
| After force true | highlight | ["base","lesson","highlight"] |
| Border | .highlight | 2px solid green |
Follow the native mechanism
classList is a live DOMTokenList. toggle(token,true) ensures one token is present without erasing others; force false removes it. Repeating force true does not duplicate the token. className assignment instead replaces the whole attribute.
Compare the material alternative
Setting className to highlight loses base and lesson. A matching border alone cannot prove the original tokens survived.
<style>html{font-size:16px}body{margin:12px;font:1rem/1.5 system-ui,sans-serif;color:#17332d;background:#fff}p{overflow-wrap:anywhere}output{display:block;margin-block:12px;overflow-wrap:anywhere;white-space:pre-wrap}button,input{font:inherit;max-width:100%;box-sizing:border-box}button{margin:4px;padding:8px}label{display:block;margin-block:8px}button:focus-visible,input:focus-visible{outline:3px solid #23715d;outline-offset:2px}ul{padding-inline-start:24px}li{overflow-wrap:anywhere}.highlight{border:2px solid green}</style>
<p id="note" class="base lesson">Workshop note</p><output id="result"></output>
<script>const note=document.querySelector('#note');note.className='highlight';
const result=[...note.classList];
document.querySelector('#result').textContent=JSON.stringify(result);
console.log(JSON.stringify(result));
</script>["highlight"]Work the boundary
After forcing highlight on twice and off once, which tokens remain?
Show the worked answer
base and lesson remain. Forcing on is idempotent; forcing off removes only highlight.
<style>html{font-size:16px}body{margin:12px;font:1rem/1.5 system-ui,sans-serif;color:#17332d;background:#fff}p{overflow-wrap:anywhere}output{display:block;margin-block:12px;overflow-wrap:anywhere;white-space:pre-wrap}button,input{font:inherit;max-width:100%;box-sizing:border-box}button{margin:4px;padding:8px}label{display:block;margin-block:8px}button:focus-visible,input:focus-visible{outline:3px solid #23715d;outline-offset:2px}ul{padding-inline-start:24px}li{overflow-wrap:anywhere}.highlight{border:2px solid green}</style>
<p id="note" class="base lesson">Workshop note</p><output id="result"></output>
<script>const note=document.querySelector('#note');note.classList.toggle('highlight',true);note.classList.toggle('highlight',true);note.classList.toggle('highlight',false);
const result=[...note.classList];
document.querySelector('#result').textContent=JSON.stringify(result);
console.log(JSON.stringify(result));
</script>["base","lesson"]