non-standard HTML tag

[dmitrybv]

Hello.
I often need to indent paragraphs in an MD file.
You can use <dl> <dd>Text </dd> </dl> but I want to use a shorter expression.
Created a style for non-standard HTML tag
--index.scss

sh {
  display: block;
  margin-inline-start: 40px;
}

And now I can use it in MD files.
--file.md

<sh> shifted text </sh>

But when I run npm run docs:build I get a warning

⠹ Rendering pages /EhLibDoc/10-using-tdbgrideh-component/38-setting-the-display-of-tree-records.html[Vue warn]: Failed to resolve component: sh
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Non-function value encountered for default slot. Prefer function slots for better performance.
[Vue warn]: Component <Anonymous> is missing template or render function.
[Vue warn]: Non-function value encountered for default slot. Prefer function slots for better performance.

Please tell me how to properly configure component resolution (non-standard HTML tag) via compilerOptions.isCustomElement so that Vue does not issue warnings.

I read this documentation
https://vuepress.github.io/guide/markdown.html#non-standard-html-tags
but did not understand in which file to make settings.

Perhaps there are other, simpler, ways to indent a paragraph from the left in the MD file?

[Mister-Hope]

we do not recommend you to use non-standard tags, especially tags not defined with custom-element api.

If you are using custom elements, import addCustomElement from vuepress-shared/node and use it in extendsBundlerOptions lifecycle.

[dmitrybv]

When I add

const MyVueElement = defineCustomElement({
  // normal Vue component options here
  props: {},
  emits: {},
  template: `...`,

  // defineCustomElement only: CSS to be injected into shadow root
  styles: [`/* inlined css */`]
})

// Register the custom element.
// After registration, all `<my-vue-element>` tags
// on the page will be upgraded.
customElements.define('my-vue-element', MyVueElement)

// You can also programmatically instantiate the element:
// (can only be done after registration)
document.body.appendChild(
  new MyVueElement({
    // initial props (optional)
  })
)

code to the Project-folder/src/.vuepress/config.ts
and write in terminal
npm run docs:dev
I got a error:

ReferenceError: customElements is not defined
    at file:///C:/DelphiStuff/_WebTech/VuePress/EhLib-vp-theme-hope/src/.vuepress/config.ts.4fb0403b.mjs:264:1
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

[Mister-Hope]

Docs are here https://shared.vuejs.press/node/bundler.html#addcustomelement

More: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements

[Mister-Hope]

For you usage, I would recommend adding a custom container for it.

[Mister-Hope]

<dl> <dd>Text </dd> </dl> is not a correct way to indent text, read these from front to end plz:

• https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals
• https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML

Then you may understand why we are adding https://theme-hope.vuejs.press/guide/interface/accessibility.html

and adding at homepage

[dmitrybv]

Here they write that a Vue component can me used inside MD file
https://vuepress.vuejs.org/guide/using-vue.html#using-components

So, can I create a classic Vue component and use it as wrapping tag?

Something like this:

---- sh.vue

<template>
  <div class="sh-class">
    <slot></slot> <!-- slot outlet -->
  </div>
</template>

<script>
  export default {
    // name: 'sh'
  }
</script>

<style scoped>
  .sh-class {
    display: block;
    margin-inline-start: 40px;
  }
</style>

---- testFile.md

<sh>Test shifted text</sh>