Referring to this link , i am trying to implement the same example provided in the url.
for the below posted code, despite i assigned names to each slot as shown in BaseLayer_0.vue,the content bound to each named slot using v-slot or # does not work, and instead i receive the output shown in the image section below.

please let me know what have i done wrong so that i am not able to see contents of each slot respectively

App:

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>

  <BaseLayer_0>
    <template #header>
      <h1>header</h1>
    </template>

    <template #default>
      <p>default</p>
    </template>

    <template #footer>
      <p>footer</p>
    </template>
  </BaseLayer_0>

</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import BaseLayer_0 from './components/BaseLayer_0.vue'

export default {
  name: 'App',
  components: {
    HelloWorld,
    BaseLayer_0
  }
}
</script>

BaseLayer_0

<template>
  <div class="container">
    <header name="header">
        <slot></slot>
    </header>

    <main>
        <slot></slot>
    </main>

    <footer name="footer">
        <slot></slot>
    </footer>
  </div>
</template>

<script>

export default {
  name: 'BaseLayer_0',
  
}
</script>

image:

>Solution :

You should add the name attribute to the <slot> tag, not to <header>.

For example:

#BaseLayer_0.vue

<header>
   <slot name="header">
</header>