---
// src/components/RedHeading.astro
---

<h3>Red Heading</h3>

<style>
  h3 { color: #e57373; }
</style>

<!-- src/components/BlueHeading.astro -->
---
---

<h3>Blue Heading</h3>

<style>
  h3 { color: #58a6ff; }
</style>

<!-- src/pages/index.astro -->
---
import RedHeading from '../components/RedHeading.astro';
import BlueHeading from '../components/BlueHeading.astro';
---

<RedHeading />
<BlueHeading />

<!--
  Notes:
  - Both components style the same h3 element tag, with no class
    name to disambiguate them, yet each renders with its own color.
  - Astro adds a unique scoping attribute to each component's own
    elements at build time, so the two h3 rules never collide even
    though they target the identical tag selector.
-->