Counter
Markup, a scoped style and a module script: the three files an example can have.
A button that counts its clicks. Its style uses a plain button selector, which reaches this example only: the
theme wraps the file in @scope when it runs.
live · Counter
<button id="counter" type="button">Clicked <output>0</output> times</button>/* A plain "button" selector: the theme wraps this file in @scope, so it reaches this example's button only */
button {
padding: 0.6rem 1.2rem;
border-radius: 999px;
font-size: 1.1rem;
}const button = document.getElementById("counter");
const output = button.querySelector("output");
let count = 0;
button.addEventListener("click", () => {
count += 1;
output.value = count;
});The files live in assets/examples/counter/, so this page and The example shortcode
can both run them.