Why actions add reusable element behavior in Svelte - See It in Action

Add Reusable Behavior to Elements Using Svelte Actions

📖 Scenario: You are building a simple web page where some elements need a special behavior: they should change their background color when the mouse hovers over them. Instead of writing the same code for each element, you want to create a reusable behavior that you can apply easily to any element.

🎯 Goal: Build a Svelte action that changes the background color of an element on mouse hover and apply it to multiple elements to reuse the behavior.

📋 What You'll Learn

Create a Svelte action named hoverHighlight that changes the background color of an element when hovered

Use the hoverHighlight action on at least two different elements

Ensure the background color returns to normal when the mouse leaves the element

Keep the action reusable and clean

💡 Why This Matters

🌍 Real World

In real websites, you often want to add the same interactive behavior to many elements, like hover effects or tooltips. Svelte actions let you write this behavior once and reuse it easily.

💼 Career

Understanding Svelte actions helps you build clean, maintainable web apps. Many companies use Svelte or similar frameworks, and reusable behaviors save time and reduce bugs.

1

Create the Svelte action function

Write a Svelte action function called hoverHighlight that accepts a DOM element parameter and adds event listeners for mouseenter and mouseleave events. On mouseenter, set the element's background color to lightblue. On mouseleave, reset the background color to '' (empty string).

Svelte

// Your code here

// Create the hoverHighlight action function

Hint

Remember, a Svelte action is a function that receives a DOM element and can add event listeners. Return an object with a destroy method to clean up.

2

Set up the HTML elements to use the action

In the Svelte component, create two <div> elements with the texts Box 1 and Box 2. Import the hoverHighlight action and apply it to both <div> elements using the use:hoverHighlight directive.

Svelte

export function hoverHighlight(node) {
    function onMouseEnter() {
        node.style.backgroundColor = 'lightblue';
    }
    function onMouseLeave() {
        node.style.backgroundColor = '';
    }
    node.addEventListener('mouseenter', onMouseEnter);
    node.addEventListener('mouseleave', onMouseLeave);

    return {
        destroy() {
            node.removeEventListener('mouseenter', onMouseEnter);
            node.removeEventListener('mouseleave', onMouseLeave);
        }
    };
}

Hint

Use the use: directive to apply the action to elements.

3

Add a configuration option to the action

Modify the hoverHighlight action to accept a second parameter color that sets the highlight color. Use color = 'lightblue' as the default. Change the background color to the given color on mouse enter.

Svelte

export function hoverHighlight(node, color = 'lightblue') {
    // Your code here
}

Box 1
Box 2

Hint

Actions can accept a second parameter for options. Use it to set the highlight color.

4

Use the action with different colors on elements

Apply the hoverHighlight action to the first <div> with the default color. Apply it to the second <div> with the color 'lightgreen' by passing it as the second argument in the use:hoverHighlight directive.

Svelte

export function hoverHighlight(node, color = 'lightblue') {
    function onMouseEnter() {
        node.style.backgroundColor = color;
    }
    function onMouseLeave() {
        node.style.backgroundColor = '';
    }
    node.addEventListener('mouseenter', onMouseEnter);
    node.addEventListener('mouseleave', onMouseLeave);

    return {
        destroy() {
            node.removeEventListener('mouseenter', onMouseEnter);
            node.removeEventListener('mouseleave', onMouseLeave);
        }
    };
}

Hint

Pass the color as a parameter in curly braces inside the use: directive.

Practice

1. What is the main purpose of actions in Svelte?

easy

A. To create new components

B. To style elements with CSS

C. To manage global state

D. To add reusable behavior directly to HTML elements

Solution

1. Step 1: Understand what actions do

   Actions in Svelte attach behavior to elements, like event listeners or animations.

2. Step 2: Compare with other options

   Creating components, managing state, or styling are done differently, not by actions.

3. Final Answer:

   To add reusable behavior directly to HTML elements -> Option D

4. Quick Check:

   Actions = reusable element behavior [OK]

Hint: Actions add behavior to elements, not components or styles [OK]

Common Mistakes:

• Confusing actions with components
• Thinking actions manage app state
• Assuming actions handle styling

2. Which is the correct syntax to use an action named tooltip on a button element in Svelte?

easy

A. Click me

B. Click me

C. Click me

D. Click me

Solution

1. Step 1: Recall Svelte action syntax

   Actions are applied with use:actionName on elements.

2. Step 2: Check each option

   Only use:tooltip matches the correct syntax; others are for events or bindings.

3. Final Answer:

   <button use:tooltip>Click me</button> -> Option A

4. Quick Check:

   Action syntax = use:actionName [OK]

Hint: Use 'use:' prefix to apply actions on elements [OK]

Common Mistakes:

• Using 'action=' instead of 'use:'
• Confusing actions with event handlers
• Trying to bind actions like variables

3. Given this Svelte action code:

function highlight(node) {
  node.style.backgroundColor = 'yellow';
  return {
    destroy() {
      node.style.backgroundColor = '';
    }
  };
}

What happens when this action is used on an element?

medium

A. The element's background turns yellow and stays yellow forever

B. The element's background turns yellow and resets when removed

C. The element's background color is set to empty string immediately

D. The element's background color changes only on hover

Solution

1. Step 1: Analyze the action behavior

   The action sets background to yellow on start, and resets it on destroy.

2. Step 2: Understand lifecycle

   Destroy runs when element is removed or action is cleaned up, resetting style.

3. Final Answer:

   The element's background turns yellow and resets when removed -> Option B

4. Quick Check:

   Action sets and cleans up style [OK]

Hint: Destroy method cleans up changes when element is removed [OK]

Common Mistakes:

• Thinking style never resets
• Assuming style changes only on hover
• Ignoring the destroy cleanup

4. Identify the issue in this Svelte action usage:

function focus(node) {
  node.focus();
}

<input use:focus />

medium

A. The action function must be async

B. The action should be called inside onMount lifecycle

C. The action should return an object with a destroy method

D. The action must be assigned to a variable before use

Solution

1. Step 1: Check action return value

   Actions should return an object with a destroy method to clean up; here it returns nothing.

2. Step 2: Understand optional return

   Returning nothing is allowed if no cleanup needed, but best practice is to return an object.

3. Final Answer:

   The action should return an object with a destroy method -> Option C

4. Quick Check:

   Actions should return cleanup object [OK]

Hint: Always return cleanup object from actions if needed [OK]

Common Mistakes:

• Thinking actions must be async
• Believing actions need lifecycle hooks
• Assuming actions must be variables

5. You want to create a reusable Svelte action that adds a tooltip to any element. Which approach best uses actions to achieve this?

hard

A. Create an action that adds event listeners to show/hide tooltip and cleans up on destroy

B. Create a component wrapping the element and tooltip inside

C. Use CSS :hover to show tooltip without JavaScript

D. Add tooltip text directly inside the element's innerHTML

Solution

1. Step 1: Understand reusable behavior with actions

   Actions attach behavior directly to elements and can manage events and cleanup.

2. Step 2: Compare options for tooltip

   Only an action adding event listeners and cleanup fits reusable behavior on any element.

3. Final Answer:

   Create an action that adds event listeners to show/hide tooltip and cleans up on destroy -> Option A

4. Quick Check:

   Actions manage reusable element behavior best [OK]

Hint: Use actions for reusable element event behavior and cleanup [OK]

Common Mistakes:

• Using components instead of actions for element behavior
• Relying only on CSS without JS for dynamic tooltips
• Modifying innerHTML directly causing side effects