improve: MCD-474: Update typing and content attribute usage (#116)

* improve: MCD-474: Update typing

* MCD-474: Add comment (#117)

* MCD-474: Update docs

* MCD-474: Remove type import

* MCD-474: Improve docs to include types

* Update 30.render-custom-elements.md

---------

Co-authored-by: Wolfgang Ziegler <[email protected]>

Author: alexieremia

content/1.get-started/10.how-it-works.md

@@ -149,23 +149,24 @@ The following example shows how Vue components for the previous custom elements
     <div class="teaser-listing">
       <h2>Title: {{ title }}</h2>
       <slot>
-        <component :is="useDrupalCe().renderCustomElements($attrs.content)" />
+        <component :is="useDrupalCe().renderCustomElements(content)" />
       </slot>
     </div>
   </template>
 
   <script setup lang="ts">
     defineSlots<{
-      default();
-    }>()
+      default(): any;
+    }>();
     defineProps<{
-      title: String;
+      title: string;
+      content?: CustomElementContent;
     }>();
   </script>
   ```
 ::
 
-The above example of `TeaserListing.vue` makes use of slot content, which should contain our rendered article teasers. Vue.js renders contained markup instead of the `<slot>` element when using `markup`-based rendering. For rendering the JSON serialization of custom elements (which is used by default), the slot value is passed to the component as data via `$attrs.content`. This data gets rendered with the help of the `renderCustomElements()` utility, when no slot content is passed to the component. Thus, this way the slot renders correctly for both JSON and markup based rendering. Refer to [Render custom elements](/nuxt/render-custom-elements) docs for more details on that.
+The above example of `TeaserListing.vue` makes use of slot content, which should contain our rendered article teasers. Vue.js renders contained markup instead of the `<slot>` element when using `markup`-based rendering. For rendering the JSON serialization of custom elements (which is used by default), the slot value is passed to the component as data via `content` prop (type CustomElementContent). This data gets rendered with the help of the `renderCustomElements()` utility, when no slot content is passed to the component. Thus, this way the slot renders correctly for both JSON and markup based rendering. Refer to [Render custom elements](/nuxt/render-custom-elements) docs for more details on that.
 
 ## First steps
 

content/5.nuxt/30.render-custom-elements.md

@@ -30,19 +30,37 @@ defineProps<{
 Rendering slots works differently depending on whether custom-elements are serialized into JSON or markup. In short, for rendering a slot in a Vue template, simply use the following snippet:
 
 ```vue
-<slot name="body">
-  <component :is="useDrupalCe().renderCustomElements($attrs.body)" />
-</slot>
+<template>
+  <slot name="body">
+    <component :is="useDrupalCe().renderCustomElements(body)" />
+  </slot>
+</template>
+
+<script setup lang="ts">
+defineSlots<{
+  body(): any;
+}>()
+defineProps<{
+  body?: CustomElementContent;
+}>()
+</script>
 ```
 
-This snippet works with both, JSON and markup serialization.
+This snippet works with both, JSON and markup serialization. The markup serialization uses the slot, while the fallback value of the slot takes care of rendering the JSON-serialized value received as prop.
 
 ### JSON serialization (default)
 
 Custom elements contained in slots get passed as JSON, which can be easily rendered with the helper provided by the nuxtjs-drupal-ce connector:
 
 ```vue
-      <component :is="useDrupalCe().renderCustomElements($attrs.body)" />
+<template>
+  <component :is="useDrupalCe().renderCustomElements(body)" />
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  body?: CustomElementContent;
+}>()
 ```
 
 Note: When rendering via JSON content, the module supports [default components](/nuxt/default-components).
@@ -74,17 +92,18 @@ Here is an example of a component that leverages props and slots and works with
   <div class="node">
     <h2 v-if="title">Node: {{ title }}</h2>
     <slot name="body">
-      <component :is="useDrupalCe().renderCustomElements($attrs.body)" />
+      <component :is="useDrupalCe().renderCustomElements(body)" />
     </slot>
   </div>
 </template>
 
 <script setup lang="ts">
 defineSlots<{
-  body();
+  body(): any;
 }>()
 defineProps<{
   title?: string;
+  body?: CustomElementContent;
 }>()
 </script>
 ```