How to Execute Code When DOM Element is Created

How to Execute Code When DOM Element is Created

Ferenc Almasi β€’ 2020 September 25 β€’ Read time 1 min read
  • twitter
  • facebook

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

Copied to clipboard!
<!-- 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} />
Action.svelte

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.

How to Execute Code When DOM Element is Created
If you would like to see more Webtips, follow @flowforfrank

Looking into Svelte 3

Resources:

  • twitter
  • facebook
Did you find this page helpful?
πŸ“š More Webtips
Frontend Course Dashboard
Master the Art of Frontend
  • check Access 100+ interactive lessons
  • check Unlimited access to hundreds of tutorials
  • check Prepare for technical interviews
Become a Pro

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.