s9e122 multiple slots

s9/src/App.vue

@@ -3,8 +3,8 @@
         <div class="row">
             <div class="col-xs-12">
                 <app-quote>
-                    <h2>{{quoteTitle}}</h2>
-                    <p>A Simple Quote</p>
+                    <h2 slot="title">{{quoteTitle}}</h2>
+                    <p slot="content">A Simple Quote</p>
                 </app-quote>
             </div>
         </div>

s9/src/components/Quote.vue

@@ -1,6 +1,12 @@
 <template>
     <div>
-        <slot></slot>
+        <div class="title">
+            <slot name="title"></slot>
+        </div>
+        <hr>
+        <div>
+            <slot name="content"></slot>
+        </div>
     </div>
 </template>
 
@@ -21,4 +27,7 @@
     h2 {
         color: blue
     }
+    .title {
+        font-style: italic;
+    }
 </style>