<script>
let color;
const colors = ['darkred', 'darksalmon', 'darkseagreen', 'darkslateblue'];
</script>
<p style="color: {color};">Before style directives</p>
<p style:color>With style directives</p>
<label for="color">Choose a color:</label>
<select id="color" bind:value={color}>
{#each colors as option}
<option>{option}</option>
{/each}
</select>
<style>
p {
font-size: 1.5rem;
font-weight: 700;
}
</style>