How to Execute Code When DOM Element is Created

In Svelte, there is a use:action directive that you can use to run code when an element is created or destroyed.

<!-- You can use the use:action directive to run code when an element is created or destroyed -->

<script>
    export let notif;

    const notificationObserver = (node, notif) => {
        return {
            update(notif) { ... },
            destroy() { ... }
        };
    };
</script>

<Notification use:notificationObserver={notif} />

A couple of things to note:

• You have access to the element with the node parameter.
• Inside the function, the DOM element is mounted.
• Actions can return an object with an update and destroy method.

These methods will be called when the node changes or it is removed from the DOM.

Looking into Svelte 3Quickstart by creating a retro board in Svelte from scratchSvelte 3 promises a radical new approach to building user interfaces. Since it is a compiler, it works fundamentally different from other big frameworks...Learn More

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

---

Resources:

• The use:action directive in Svelte