Basic Named Slot Implementation

Demonstrates how to create a simple Vue component with a named slot and use it within a parent component.

<div id="app">
  <my-component>
    <template v-slot:header>
      <h1>This is a header slot</h1>
    </template>
    <template v-slot:default>
      <p>This is the default slot content</p>
    </template>
    <template v-slot:footer>
      <footer>This is a footer slot</footer>
    </template>
  </my-component>
</div>

This HTML snippet is the usage part where the 'my-component' contains named slots. In this case, we have 'header', the default, and 'footer'. The 'v-slot' directive is used to denote the name of the slot where we want to insert our custom content.

<script>
Vue.component('my-component', {
  template: `
    <div>
      <slot name="header"></slot>
      <slot></slot> <!-- unnamed slot (default slot) -->
      <slot name="footer"></slot>
    </div>
  `
});

new Vue({
  el: '#app'
});
</script>

This JavaScript snippet defines the 'my-component' Vue component with named slots. The 'slot' element with a 'name' attribute defines a named slot, and the unnamed 'slot' without a name is the default slot.

<style>
div {
  border: 1px solid #000;
  padding: 10px;
  margin-bottom: 10px;
}
h1, p, footer {
  margin: 0;
}
</style>

This CSS snippet provides basic styles for our slots example to make the structure more visible. It adds borders, padding, and resets margins for the 'div', 'h1', 'p', and 'footer' elements.