DEV Community

Cover image for Slots, Slots, Slots, Everybody!

Slots, Slots, Slots, Everybody!

Abbey Perini on February 23, 2024

Slots turn components into wrappers that enhance your dynamic content. What Are Slots? Slots in Web Components Slots in Vue Slots in Angular ...
Collapse
 
beqa profile image
beqa

Hey. There are couple of great libraries that allow you to use slots in React today!

Here's one I made github.com/Flammae/react-slots

Check it out if it's something you are interested in and let me know what you think.

Collapse
 
auroratide profile image
Timothy Foster

I really like the slot paradigm! It just "makes sense" to me. Really great summary on them.

Svelte had also adopted the slots, t'was one of the reasons I've liked Svelte for a while. Which is why it worries me a bit that Svelte 5 is deprecating slots in favor of something more like React's props. But I'm trying to keep an open mind ( :

Collapse
 
abbeyperini profile image
Abbey Perini

@thepracticaldev If I try to save {{...}} in any of the Vue code snippets (I tried making them Vue, JavaScript, and HTML) I get a liquid variable error and can't save.

Collapse
 
manoj_kumar_89af8b067af15 profile image
Manoj Kumar

is it possible to use ng-content within angular elements ?

lets say, i have developed a web component using ng elements and using the same in another angular project, now in this angular project i have some custom elements which i want to project inside the web component.
is it possible to use ng-content in same pattern as you have described above ?

Collapse
 
railsstudent profile image
Connie Leung

Great stuff. I am excited that the skill of Vue is transferrable to Angular and vice versa.
defineModel <=> Angular modern Input
reactivity <=> Angular signals
inject/provide <=> Angular inject/InjectionToken/Provider
slot <=> NgContent

Some comments have been hidden by the post's author - find out more