This article was originally posted on my Dev.to page

👋 Hello, World!

Here’s a spicy 🌶 Svelte quick tip for ya, hope you enjoy 🤩

Ever sat around scratching your head asking “how on earth do I get rid of this damn margin on my <slot> content?" or some other slot styling quandary?

Well, I know I have, so maybe you have too? 🧐

The problem

Let’s say you have a <Box> component that you pass content into and sometimes that content has margins on it that you really just don't want. …


This article was originally posted on my Dev.to page

👋 Hello, World!

In my previous post, I described how you could selectively style the children of a <slot>. Now, we're going to zoom out a bit and see how we can style the <slot> containers themselves.

You’ll likely find yourself doing this when you’re working with multiple name slots that also happen to be optional.

As far as I’m aware, there are 3 basic ways we can do this:

  1. Style the wrapped component
  2. Style based on the [slot="..."] name
  3. Use conditional slots

Let’s go into each now using the example of a <Modal>


This article was originally posted on my Dev.to page

👋 Hello, World!

One of Svelte’s super powers is how freaking easy it is to integrate with non-Svelte JavaScript libraries using “actions”.

Actions allow you to attach all sorts of interesting behavior to elements in a reusable way without needing to write custom Svelte components. They’re pretty neat! 🤓

In the post, we will learn how to use the plain-JavaScript tooltip library Tippy.js in your Svelte project by using a custom Svelte action.

I think you’ll be pretty impressed how simple this is, especially compared to frameworks like React.

Let’s go! 👇

Impatient? Checkout…

Dana Woodman

👨🏻‍💻 Software Hacker 👨🏻‍🏭 Maker 🛩 Travel Junkie 🏕. Outdoors Enthusiast

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store