Question 12: Consider the following HTML, which includes Vue 2 and Vu…

1<div id="app">
2    <player-card>
3        <p>Rahul is a versatile player, skilled in defense and attack.</p>
4        <template v-slot:extra>
5            <p>Position: Captain</p>
6            <p>Years on the team: 5</p>
7        </template>
8    </player-card>
9</div>
10
11<script>
12    Vue.component('player-card', {
13        props: {
14            playerName: {
15                type: String,
16                default: 'Unknown Player'
17            }
18        },
19        template: `
20      <div class="card">
21        <h2>{{ playerName }}</h2>
22        <slot>
23          <p>This player is an important part of the team.</p>
24        </slot>
25        <slot name="extra"></slot>
26      </div>
27    `
28    });
29
30    new Vue({
31        el: '#app'
32    });
33</script>