Aral Balkan
Did someone say slots in components?
Yes, Kitten has slots in components (as of about a minute ago in main).
Enjoy!
😺 💕
PS. The code snippet also shows the plain CSS idiom of scoping styles to components using class prefixes and how to override styles in slotted content. Remember, Kitten embraces HTML, CSS, and JS; it doesn’t try to abstract it away. So, as you learn Kitten, you’ll be learning HTML, CSS, and JS skills you can use anywhere.
Aral Balkan
@andrew_chou Yep. I just think ${slot} is nicer than ${children}. Children makes sense if you’re reading the parsing code, but not when you’re authoring.
I’m not hugely bothered about keeping perfect semantic parity with other frameworks :)
Andrew Chou
@aral maybe I'm missing something but this looks more like a generic "children" pattern (e.g. how React works) than a "standard" slot 🤔. For example, are named slots supported?
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot
https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots
Andrew Chou
@aral based on https://codeberg.org/kitten/app/commit/81c940efee40fffd879ed4a4eae03066a31db849#diff-56d1ec8320bc48517d813eea4672e34953e5408c , it really is the "children" pattern just renamed! 😄
Aral Balkan
@andrew_chou Yeah, I don’t see Kitten adding that sort of complexity any time soon if ever :)
(If someone comes across something they can’t solve with the existing tool set, I’ll consider adding more functionality. For the time being, it’s holding up well while building Domain. The only other thing I’m planning on adding to the core is layout templates that work in tandem with the router so you don’t have to use components for layout.)
Andrew Chou
@aral I guess the naming isn't misleading if you're okay with only using unnamed slots. May be fine for most people's use cases but using the functional prop pattern to represent the slot here makes me wonder if/how you can support named slots i.e. magically getting a prop that represents a named slot (to me, seems like you can't)
Andrew Chou
@aral sorry I keep adding to this but got me curious 🧐
Svelte handles this in an interesting way with `$$slots`:
Andrew Chou
@aral maybe that's the intention though, in which case the naming is a little misleading if you're familiar with web component slots 😄
Andrew Chou
@aral makes sense and very reasonable :)
like the idea of the layout templates 👍
Aral Balkan
Aral Balkan
@andrew_chou You know what, my thought was to initially create layout components using slots and then see about creating a layout order applied by the router but, having done the former in Domain, I think I’m going to leave it be for now.
It works and there’s no redundancy. You import and use the layout you want in a page. Everything is explicit and we’d otherwise need a separate way to send props to layouts.
e.g., see:
https://codeberg.org/domain/app/src/branch/main/settings%F0%9F%94%92/Layout.component.js
０７６萌ＳＮＳ is a social network, courtesy of ０７６. It runs on GNU social, version 2.0.2-beta0, available under the GNU Affero General Public License.
All ０７６萌ＳＮＳ content and data are available under the Creative Commons Attribution 3.0 license.