Vue3 is cutting properties from custom Elements used in App

Question

i want to include an external library in my Vue3 app. But when i try to inlcude them in my app, but some properties the element uses get cutted by Vue. Maybe someone can explain me this behaviour and how to fix this.

The attribute i am pointing on is "secondary"

vite.config.ts:

...
plugins: [
    vue({
      template: {
        compilerOptions: {
          // treat all tags with a dash as custom elements
          isCustomElement: (tag) => {
            return tag.includes("-");
          },
        },
      },
    }),
  ],
...

index.html

<div class="container">
 <atom-button secondary>Test</atom-button>
 <my-vue-comp></my-vue-comp>
</div>

in my component:

<template>
  <div ref="root">
    <atom-button secondary>Test</atom-button>
  </div>
</template>

output in DOM:

<div class="container">
   <atom-button secondary="" role="button" tabindex="0" type="button" aria-disabled="false">Test</atom-button>
   <my-vue-comp>
      <div>
         <atom-button role="button" tabindex="0" type="button" aria-disabled="false">Test</atom-button>
      </div>
   </my-vue-comp>
</div>