Video details

Svelte 101: Style your Svelte component

Svelte
03.25.2021
English

Let's add some styles to your Svelte component.
Styles are scoped in Svelte, meaning, all the selectors will only apply to the elements within the Svelte component.
This means 1) You don't have to worry adding a style will break the style of elements outside of this component 2) Svelte will warn you if your selector does not match any elements within this component
Also, @keyframes animations are scoped too!
Of course there's always a way to disable the scoped style behaviour if you choose not to scope your selector or @keyframes.
Introduction 00:00 How styles are scoped 00:54 Svelte warns for unused selectors 03:38 How scoped styles work 04:32 Scoped @keyframes 06:59 Disable scoped style behaviour 09:16
---
đź’»
REPL https://svelte.dev/repl/467770b8117d4af9ac7cfc7622f36526?version=3.35.0
đź“š
Related Resources Svelte https://svelte.dev Svelte REPL https://svelte.dev/repl Svelte Tutorial https://svelte.dev/tutorial/styling
🥰 Support me https://www.buymeacoffee.com/lihautan
đź”—
Want to learn more from me? Check out these links:
Twitter: https://twitter.com/lihautan Blog: https://lihautan.com/ Newsletter: https://lihautan.com/newsletter
#svelte #svelte101
Thanks for watching 🥰 -- with love, Li Hau