Move backgrounds to example and to slot in grid

example/src/App.vue

@@ -8,6 +8,9 @@ import Grid from "../../src/Grid.vue";
       <div id="blocker">
         This field is blocked because it's filled, the next one programmatically
       </div>
+      <template #item="item">
+        <div class="container">{{ item }}</div>
+      </template>
     </Grid>
   </div>
 </template>
@@ -67,4 +70,10 @@ export default {
   font-weight: bold;
   text-shadow: 4px 4px 4px #2c3e50;
 }
+
+.container {
+  background: lightcoral;
+  width: 100%;
+  height: 100%;
+}
 </style>

src/DragContainer.vue

 <template>
   <div @dragstart="handleDragStart" draggable="true" id="wrapper">
-    <slot>
-      <div id="container">
-        <dl>
-          <dt>Key</dt>
-          <dd>{{ dragID }}</dd>
-          <dt>Position</dt>
-          <dd>{{ x }}, {{ y }}</dd>
-          <dt>Size</dt>
-          <dd>{{ w }} × {{ h }}</dd>
-          <dt>Data</dt>
-          <dd>{{ data }}</dd>
-        </dl>
-      </div>
-    </slot>
+    <slot></slot>
   </div>
 </template>
 
@@ -51,10 +38,4 @@ export default {
   grid-column: v-bind(x) / span v-bind(w);
   grid-row: v-bind(y) / span v-bind(h);
 }
-
-#container {
-  background: lightcoral;
-  width: 100%;
-  height: 100%;
-}
 </style>

src/Grid.vue

@@ -5,7 +5,7 @@
     class="grid"
   >
     <slot name="highlight">
-      <div id="highlight" ref="highlight"></div>
+      <div class="highlight" ref="highlight"></div>
     </slot>
     <DragContainer
       v-for="item in value"
@@ -17,6 +17,18 @@
       :h="item.h"
       :data="item.data"
     >
+      <slot v-bind="item" name="item">
+        <dl>
+          <dt>Key</dt>
+          <dd>{{ item.key }}</dd>
+          <dt>Position</dt>
+          <dd>{{ item.x }}, {{ item.y }}</dd>
+          <dt>Size</dt>
+          <dd>{{ item.w }} × {{ item.h }}</dd>
+          <dt>Data</dt>
+          <dd>{{ item.data }}</dd>
+        </dl>
+      </slot>
     </DragContainer>
     <slot></slot>
   </div>
@@ -136,7 +148,7 @@ export default {
 </script>
 
 <style scoped>
-#highlight {
+.highlight {
   background: darkgrey;
   border: grey dashed 2px;
   display: none;