CoCoCoCoCoCo / docs
← Custom App Academy

Delivery quote · 5 / 5

Finish a usable quote panel

Make the component fit the host and prepare it for review.

YOUR TASK

Make this happen

3 steps

  1. Add scoped styling using --host-card, --host-card-foreground and --host-border, plus a visible keyboard-focus outline using --host-ring.

  2. Keep the working capabilities from the previous lesson and connect the new pieces to the same solution.

  3. Check the complete solution, then inspect any unmet requirements.

Start in App.vue, then choose Check solution.

This step starts with the earlier solution and one new challenge. Each lesson keeps its own draft.

Read the starter files

App.vue

<script setup>
import { ref, computed } from 'vue'
const quantity = ref(1)
const unitPrice = 12
const total = computed(() => quantity.value * unitPrice)
const confirmed = ref(false)
</script>
<template>
  <section class="quote" aria-labelledby="quote-title">
    <h2 id="quote-title">Delivery quote</h2>
    <label for="quantity">Quantity</label>
    <input id="quantity" type="number" min="1" v-model.number="quantity" />
    <p>Total: {{ total }}</p>
    <button type="button" @click="confirmed = true">Confirm quote</button>
    <p v-if="confirmed">Quote confirmed locally. No order has been sent.</p>
  </section>
</template>
Supplied supporting files

Reference: custom-apps · authoring