Skip to content

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;
}

Released under the MIT License.