<template>
  <div class="card">
    <header class="card-header">
      <slot name="header">Default Header</slot>
    </header>
    <main class="card-content">
      <slot>Default Content</slot>
    </main>
    <footer class="card-footer">
      <slot name="footer">Default Footer</slot>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'Card'
};
</script>

<style>
.card {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  margin: 10px 0;
}
.card-header, .card-footer {
  background-color: #f9f9f9;
  padding: 5px;
  font-weight: bold;
}
.card-content {
  padding: 10px;
}
</style>

<template>
  <div>
    <Card>
      <template #header>
        <h1>Custom Header</h1>
      </template>
      <template>
        <p>This is custom content inside the card.</p>
      </template>
      <template #footer>
        <p>Custom Footer</p>
      </template>
    </Card>
  </div>
</template>

<script>
import Card from './Card.vue';

export default {
  components: {
    Card
  }
};
</script>

<template>
  <div class="message">
    <slot>Default message content.</slot>
  </div>
</template>

<script>
export default {
  name: 'Message'
};
</script>

<style>
.message {
  border: 1px solid #007bff;
  background-color: #cce5ff;
  padding: 10px;
  border-radius: 5px;
  color: #004085;
}
</style>

<template>
  <div>
    <Message>
      Custom message content goes here.
    </Message>
  </div>
</template>

<script>
import Message from './Message.vue';

export default {
  components: {
    Message
  }
};
</script>

<template>
  <div class="layout">
    <header>
      <slot name="header">Default Header</slot>
    </header>
    <main>
      <slot>Main Content</slot>
    </main>
    <footer>
      <slot name="footer">Default Footer</slot>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'Layout'
};
</script>

<style>
.layout {
  border: 1px solid #ddd;
  padding: 10px;
}
header, footer {
  background-color: #f0f0f0;
  padding: 5px;
  text-align: center;
}
main {
  padding: 10px;
}
</style>

<template>
  <Layout>
    <template #header>
      <h1>My Custom Header</h1>
    </template>
    <p>This is the main content area.</p>
    <template #footer>
      <p>My Custom Footer</p>
    </template>
  </Layout>
</template>

<script>
import Layout from './Layout.vue';

export default {
  components: {
    Layout
  }
};
</script>

<template>
  <div>
    <slot :items="items"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3']
    };
  }
};
</script>

<template>
  <CustomList v-slot="{ items }">
    <ul>
      <li v-for="item in items" :key="item">{{ item }}</li>
    </ul>
  </CustomList>
</template>

<script>
import CustomList from './CustomList.vue';

export default {
  components: {
    CustomList
  }
};
</script>