sect 13

awesome_owl/static/src/card/card.js

@@ -4,5 +4,13 @@ import { Component, useState } from "@odoo/owl";
 
 export class Card extends Component {
     static template = "awesome_owl.card";
-    static props = ['title', 'content'];
+    static props = {
+        title: String,
+        slots: {
+            type: Object,
+            shape: {
+                default: true
+            },
+        }
+    };
 }

awesome_owl/static/src/card/card.xml

@@ -7,7 +7,7 @@
                 <div class="card-body">
                     <h3 class="card-title"><t t-esc="props.title"/></h3>
                     <p class="card-text">
-                        <t t-esc="props.content"/>
+                        <t t-slot="default"/>
                     </p>
                 </div>
             </div>

awesome_owl/static/src/playground.xml

@@ -6,8 +6,12 @@
             <Counter onChange.bind="incrementSum"/>
             <p>The sum is <t t-esc="sum.value"/></p>
             <hr />
-            <Card title="'Card 1'" content="'This is the awesome content of the card 1'" />
-            <Card title="'Card, the 2nd'" content="'Here is another card content. It is the second one.'" />
+            <Card title="'Card 1'">
+                <span>Hello Owl</span>
+            </Card>
+            <Card title="'Card, the 2nd'">
+                <Counter />
+            </Card>
             <hr/>
             <TodoList />
     </t>