Svelte and Sapper in Action

7 DOM interactions

This chapter covers

• Inserting HTML from string variables
• Avoiding cross-site scripting attacks from untrusted HTML
• Using “actions” to run code when an element is added to the DOM
• Using the tick function to modify the DOM after Svelte updates
• Implementing a dialog component
• Implementing drag and drop

Sometimes Svelte applications need to tap into DOM functionality that is not directly supported by Svelte. Examples include

• Moving focus to an input where the user is expected to enter data

• Setting the cursor position and selected text inside an input

• Calling methods on a dialog element

• Allowing users to drag particular elements onto others

All of these require going beyond simply writing the HTML to be rendered inside ...