Ist es möglich, zwei ausgewählte Klassen mit unterschiedlichen Designs auf derselben Seite/Komponente zu haben?

Svelte hat ein großartiges Werkzeug, um das Design von Klassen zu definieren, aber ist es möglich, zwei verschiedene Klassen in einer Komponente zu definieren?
Ich arbeite am Menü, das sich in einer Komponente befindet. Wenn die Seite neu geladen wird, muss ich zwei Schaltflächen "ausgewählt" haben, eine aus dem Hauptmenü und die zweite aus einem Untermenü, aber es scheint, dass selbst wenn die Klassen unterschiedliche Namen und Variablen haben, nur eine von ihnen aktiviert wird - die erste. Ist es möglich, mehrere Klassen/aktive Schaltflächen gleichzeitig in einer Komponente auszuwählen?

Lösung des Problems

Sie können mehrere class:Direktiven in derselben Komponente, auf verschiedenen Elementen sowie mehrmals auf einem einzelnen Element verwenden.

Bei einem einzelnen Element dürfen Sie mehrere class:Anweisungen mit dem class=Attribut mischen und abgleichen. Svelte führt das Ergebnis zusammen.

All dies wird unterstützt, wie der folgende Code (und REPL ) zeigt:

<script>
 let name = 'world';
 
 let red = false
 let underline = false
 let align = "left"
</script>
<p>
 <label class:selected={red}>
 <input type="checkbox" bind:checked={red} />
 Red
 </label>
</p>
<p>
 <label class:selected={underline}>
 <input type="checkbox" bind:checked={underline} />
 Underline
 </label>
</p>
<p>
 Align
 <label class:selected={align === "left"}>
 <input type="radio" value="left" bind:group={align} />
 left
 </label>
 <label class:selected={align === "center"}>
 <input type="radio" value="center" bind:group={align} />
 center
 </label>
 <label class:selected={align === "right"}>
 <input type="radio" value="right" bind:group={align} />
 right
 </label>
</p>
<h1 
 class="align-{align}"
 class:red
 class:underline
>
 Hello {name}!
</h1>
<style>
.red {
 color: red;
 }
 
.underline {
 text-decoration: underline;
 }
 
.align-left {
 text-align: left;
 }
.align-center {
 text-align: center;
 }
.align-right {
 text-align: right;
 }
 
 label {
 padding:.5em.5em.25em;
 }
 label.selected {
 background: lavender;
 }
</style>

Einzelnes Element mit mehreren classAnweisungen und gemischt mit classAttribut:

<h1 
 class="align-{align}"
 class:red
 class:underline
>
 Hello {name}!
</h1>

Eine gleiche Klasse ( selected), die für mehrere Elemente verwendet wird:

<p>
 <label class:selected={red}>
 <input type="checkbox" bind:checked={red} />
 Red
 </label>
</p>
<p>
 <label class:selected={underline}>
 <input type="checkbox" bind:checked={underline} />
 Underline
 </label>
</p>

In Ihrem Fall muss etwas anderes passieren (oder ich habe Ihre Frage nicht verstanden).