Fallthrough Attributes
Parent:
vue
<script lang="ts" setup>
import Child from '~/components/Child.vue';
</script>
<template>
<Child />
<Child class="bg-blue-200" />
</template>
svelte
<script lang="ts">
import Child from '$lib/components/Child.svelte';
</script>
<Child />
<Child class="bg-blue-200" />
tsx
import { Child } from '~/components/Child';
export function App() {
return (
<>
<Child />
<Child class="bg-blue-200" />
</>
);
}
Child:
vue
<template>
<p v-bind="$attrs" class="paragraph">This is a paragraph.</p>
</template>
<style lang="scss" scoped>
.paragraph {
color: purple;
}
</style>
svelte
<p class="paragraph {$$props.class}">This is a paragraph.</p>
<style lang="scss">
.paragraph {
color: purple;
}
</style>
tsx
import clsx from 'clsx';
import classes from './Child.module.scss';
interface Props {
class?: string;
}
export function Child(props: Props) {
return (
<>
<p class={clsx(classes.paragraph, props.class)}>This is a paragraph.</p>
</>
);
}
scss
.paragraph {
color: purple;
}