[Question] How to pass any attribute to the component

[MellKam]

How can I pass any attribute to the component? Maybe something is wrong with my typescript configuratin, but I can't pass anything other then props that are provided by the component and a few common attributes like "style" as "key".

For example, if I try to pass the "src" value to a component, typescript gives the following error:

Type '{ class: string; src: string; }' is not assignable to type 'IntrinsicAttributes & { as?: AsTag | undefined; class?: unknown; readonly asChild?: boolean | undefined; key?: string | number | symbol | undefined; ref?: VNodeRef | undefined; ... 8 more ...; style?: unknown; }'.
  Property 'src' does not exist on type 'IntrinsicAttributes & { as?: AsTag | undefined; class?: unknown; readonly asChild?: boolean | undefined; key?: string | number | symbol | undefined; ref?: VNodeRef | undefined; ... 8 more 

When I use sfc template I can pass anything to the component, but with jsx I can't do that.

Here is my tsconfig.

{
    "compilerOptions": {
        "target": "ES2020",
        "useDefineForClassFields": true,
        "module": "ESNext",
        "lib": ["ES2020", "DOM", "DOM.Iterable"],
        "skipLibCheck": true,

        /* Bundler mode */
        "moduleResolution": "bundler",
        "allowImportingTsExtensions": true,
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "preserve",
        "jsxImportSource": "vue",

        /* Linting */
        "strict": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "noImplicitReturns": true,
        "noFallthroughCasesInSwitch": true,
        "noUncheckedIndexedAccess": true,
        "allowUnreachableCode": false,
        "noImplicitThis": true,
        "forceConsistentCasingInFileNames": true,
        "noImplicitAny": true,
        "paths": {
            "#/*": ["./src/*"],
            "#generated/*": ["./generated/*"]
        }
    },
    "include": [
        "src/**/*.ts",
        "src/**/*.d.ts",
        "src/**/*.tsx",
        "src/**/*.vue",
        "generated/**/*.ts",
        "generated/**/*.d.ts"
    ],
    "references": [{ "path": "./tsconfig.node.json" }]
}

Would appreciate any help 😄!

[funny-family]

@MellKam Code example to pass attrs to component: https://github.com/funny-family/vue3-ts-playground/blob/master/src/app/shared/components/text-field/text-field.component.ts#L24 https://github.com/funny-family/vue3-ts-playground/blob/master/src/app/components/not-found/not-found.component.tsx#L190

[MellKam]

@MellKam Code example to pass attrs to component: funny-family/vue3-ts-playground@master/src/app/shared/components/text-field/text-field.component.ts#L24 funny-family/vue3-ts-playground@master/src/app/components/not-found/not-found.component.tsx#L190

Thanks for the example, but in my case I have no control over the component.

I think I need to clarify the situation. I'm using the radix-vue library, which creates a component using Vue SFC. Since they are non-styled, I want to create a stylized wrapper, like shadcn-ui does. I decided to use JSX to do this, but I'm running into a situation where I can't pass the component anything other than the properties shown in the screenshot above. Basically no attributes.

Using the h() function, I can specify anything I want, since the type RawProps = VNodeProps & { .... } & Record<string, any>. So that's one I'm using for now.