Every Svelte component instance has three built-in methods:
### component.$set(props)
This updates the component's state with the new values provided and causes the DOM to update. `state` must be a plain old JavaScript object (POJO). Any properties *not* included in `state` will remain as they were.
At first glance `component.on(...)` and `component.fire(...)` aren't particularly useful, but it'll become more so when we learn about [nested components](docs#nested-components) and [component events](docs#component-events).
Removes the component from the DOM and removes any event listeners that were created. This will also fire a `destroy` event:
```js
component.on('destroy', () => {
alert('goodbye!'); // please don't do this
});
component.destroy();
```
### component.options
The options used to instantiate the component are available in `component.options`.
```html
<!-- { title: 'component.options' } -->
Check the console.
<script>
export default {
oncreate() {
console.log(this.options);
}
};
</script>
```
This gives you access to standard options like `target` and `data`, but can also be used to access any other custom options you may choose to implement for your component.
In [nested components](docs#nested-components), each component has a `root` property pointing to the top-level root component – that is, the one instantiated with `new MyComponent({...})`.
> Earlier versions of Svelte had a `component.observe(...)` method. This was removed in version 2, in favour of the `onstate` [lifecycle hook](docs#lifecycle-hooks), but is still available via [svelte-extras](https://github.com/sveltejs/svelte-extras).