---
title: Component directives
---
## on:_eventname_
```svelte
on:eventname={handler}
```
Components can emit events using [createEventDispatcher](/docs/svelte#createeventdispatcher), or by forwarding DOM events. Listening for component events looks the same as listening for DOM events:
```svelte
```
As with DOM events, if the `on:` directive is used without a value, the component will _forward_ the event, meaning that a consumer of the component can listen for it.
```svelte
```
## --style-props
```svelte
--style-props="anycssvalue"
```
You can also pass styles as props to components for the purposes of theming, using CSS custom properties.
Svelte's implementation is essentially syntactic sugar for adding a wrapper element. This example:
```svelte
```
Desugars to this:
```svelte
```
**Note**: Since this is an extra `
`, beware that your CSS structure might accidentally target this. Be mindful of this added wrapper element when using this feature.
For SVG namespace, the example above desugars into using `` instead:
```svelte
```
**Note**: Since this is an extra ``, beware that your CSS structure might accidentally target this. Be mindful of this added wrapper element when using this feature.
Svelte's CSS Variables support allows for easily themeable components:
```svelte
```
So you can set a high-level theme color:
```css
/* global.css */
html {
--theme-color: black;
}
```
Or override it at the consumer level:
```svelte
```
## bind:_property_
```svelte
bind:property={variable}
```
You can bind to component props using the same syntax as for elements.
```svelte
```
## bind:this
```svelte
bind:this={component_instance}
```
Components also support `bind:this`, allowing you to interact with component instances programmatically.
> Note that we can't do `{cart.empty}` since `cart` is `undefined` when the button is first rendered and throws an error.
```svelte
```