fix(update): adde inherit props; update docs

Author: ThornWalli

docs/src/components/content-container.md

@@ -10,7 +10,7 @@ The `ContentContainer` is used to map the depth of the element structure.
 
 With each nested `ContentContainer` the element structure becomes one level deeper (`level`).
 
-The appropriate HTML element for the page structure is determined based on the `level`. (e.g. `main`, `section`, `article`)
+The appropriate HTML element for the page structure is determined based on the `level`. (e.g. `main`, `article`, `section`)
 
 ## Properties
 
@@ -28,19 +28,23 @@ If set, the heading is rendered as an abstract heading. (e.g. `<slot />`)
 
 Tag for the element.
 
-### contentTags
+### rootTags
 
 - Type: `Array`
-- Default: `['section', 'article']`
+- Default: `inject('rootTags', ['main'])`
 
-Available tags for the content structure.
+Available tags for the root structure.
 
-### rootTags
+*If not set, the value is inherited from the parent element.*
+
+### contentTags
 
 - Type: `Array`
-- Default: `['main', null]`
+- Default: `inject('contentTags', ['article', 'section'])`
 
-Available tags for the root structure.
+Available tags for the content structure.
+
+*If not set, the value is inherited from the parent element.*
 
 ### level
 
@@ -64,15 +68,13 @@ Can be used to overwrite the level.
 ```vue
 <template>
   <ContentContainer>
-    <div>
+    <header>
       <ContentHeadline> Primary Headline (h1) </ContentHeadline>
-    </div>
+    </header>
     <ContentContainer>
       <ContentHeadline> Secondary Headline (h2) </ContentHeadline>
       <ContentContainer>
-        <ContentContainer>
-          <ContentHeadline> Tertiary Headline (h3) </ContentHeadline>
-        </ContentContainer>
+        <ContentHeadline> Tertiary Headline (h3) </ContentHeadline>
       </ContentContainer>
     </ContentContainer>
   </ContentContainer>
@@ -81,15 +83,13 @@ Can be used to overwrite the level.
 
 ```html
 <main>
-  <div>
+  <header>
     <h1> Primary Headline (h1) </h1>
-  </div>
+  </header>
   <article>
     <h2> Secondary Headline (h2) </h2>
     <section>
-      <article>
-        <h3> Tertiary Headline (h3) </h3>
-      </article>
+      <h3> Tertiary Headline (h3) </h3>
     </section>
   </article>
 </main>

docs/src/components/content-headline.md

@@ -45,15 +45,13 @@ Tag for the element.
 ```vue
 <template>
   <ContentContainer>
-    <div>
+    <header>
       <ContentHeadline> Primary Headline (h1) </ContentHeadline>
-    </div>
+    </header>
     <ContentContainer>
       <ContentHeadline> Secondary Headline (h2) </ContentHeadline>
       <ContentContainer>
-        <ContentContainer>
-          <ContentHeadline> Tertiary Headline (h3) </ContentHeadline>
-        </ContentContainer>
+        <ContentHeadline> Tertiary Headline (h3) </ContentHeadline>
       </ContentContainer>
     </ContentContainer>
   </ContentContainer>
@@ -62,15 +60,13 @@ Tag for the element.
 
 ```html
 <main>
-  <div>
+  <header>
     <h1> Primary Headline (h1) </h1>
-  </div>
+  </header>
   <article>
     <h2> Secondary Headline (h2) </h2>
     <section>
-      <article>
-        <h3> Tertiary Headline (h3) </h3>
-      </article>
+      <h3> Tertiary Headline (h3) </h3>
     </section>
   </article>
 </main>

docs/src/usage.md

@@ -12,14 +12,6 @@ The main structure is in the `<main>` tag, which contains the main components.
 
 ::: code-group
 
-```html [HTML]
-<main>
-  <header class="hero">…</header>
-  <section class="text-image">…</section>
-  <section class="gallery">…</section>
-</main>
-```
-
 ```vue [Vue]
 <template>
   <ContentContainer>
@@ -30,6 +22,14 @@ The main structure is in the `<main>` tag, which contains the main components.
 </template>
 ```
 
+```html [HTML]
+<main>
+  <header class="hero">…</header>
+  <section class="text-image">…</section>
+  <section class="gallery">…</section>
+</main>
+```
+
 :::
 
 ## Advance Usage
@@ -60,16 +60,6 @@ In comparison to the basic application, the entire content is enclosed in anothe
 
 ::: code-group
 
-```html [HTML]
-<main>
-  <article>
-    <header class="hero">…</header>
-    <section class="text-image">…</section>
-    <section class="gallery">…</section>
-  </article>
-</main>
-```
-
 ```vue [Vue]
 <template>
   <CustomContentContainer>
@@ -82,4 +72,14 @@ In comparison to the basic application, the entire content is enclosed in anothe
 </template>
 ```
 
+```html [HTML]
+<main>
+  <article>
+    <header class="hero">…</header>
+    <section class="text-image">…</section>
+    <section class="gallery">…</section>
+  </article>
+</main>
+```
+
 :::

src/ContentContainer.vue

@@ -17,6 +17,7 @@
 </template>
 
 <script>
+import { inject } from 'vue';
 import useContentContainer from './useContentContainer.js';
 
 export default {
@@ -31,16 +32,16 @@ export default {
       type: String,
       default: null
     },
-    contentTags: {
+    rootTags: {
       type: Array,
       default() {
-        return ['article', 'section'];
+        return inject('rootTags', ['main']);
       }
     },
-    rootTags: {
+    contentTags: {
       type: Array,
       default() {
-        return ['main'];
+        return inject('contentTags', ['article', 'section']);
       }
     },
     level: {

src/useContentContainer.js

@@ -2,10 +2,13 @@ import { provide, inject, computed } from 'vue';
 
 export default function useContentContainer({ tag, contentTags, rootTags, level } = {}) {
   tag = tag || null;
-  contentTags = contentTags || ['article', 'section'];
-  rootTags = rootTags || ['main'];
+  rootTags = rootTags || inject('contentTags', ['main']);
+  contentTags = contentTags || inject('contentTags', ['article', 'section']);
   level = level || undefined;
 
+  provide('rootTags', rootTags);
+  provide('contentTags', contentTags);
+
   const parentLevel = inject('parentLevel', 0);
   const currentLevel = computed(() => (level !== undefined ? level : parentLevel + 1));
   const currentTag = computed(() => {