<div id="app">
  <alert-box>
    <app-header :title="'go'"></app-header>
  </alert-box>
</div>
.alert-box{
  background: red;
  padding: 10px;
  color:#fff;
}
h1{
  background: #fff;
  color:#333;
}

Vue.component('alert-box', {
    template: `
        <div class="alert-box">
        <strong>Error!</strong>
        <slot></slot>
        </div>`
})

Vue.component('app-header', {
  props: ['title'],
  template: `
    <div>
      <h1 >{{title}}</h1>
    </div>`,
});

let app=new Vue({
  el: "#app",
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js