## Notes
Similar to how [[Angular]] and [[ReactJS]] allow was to transpose or inject parent HTML into child components, I want to do the same in [[Svelte]].
## Use Case
My small use-case is that I want to reuse CSS styles between multiple components. The style I want to reuse is defining margins. It' simple CSS, but would get duplicated [[3 Times or More]], which would make it a candidate for refactoring.
## Children and Render
I can define a component like such:
```javascript
// MyReusableComponent.svelte
<script lang="ts>
let { children } = $props();
</script>
<div class="my-reusable-component">
{@render children()}
</div>
<style>
.my-reusable-component {
/* Define common styles to any component that uses MyReusableComponent */
}
</style>
```
## References
- [Use Svelte 5 Snippets to Reuse Markup Without Creating Components - YouTube](https://www.youtube.com/watch?v=OlWWIbRz438)