redom / redom

Tiny (2 KB) turboboosted JavaScript library for creating user interfaces.

Home Page:https://redom.js.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Fragments

vp2177 opened this issue · comments

Is it possible to create a component in, RE:DOM, that consists of two or more top-level elements?

class AandB {
  constructor() {
    this.el = [el("element-a"), new ComponentB()];

These are called "fragment", "multi-root component", "containerless" etc in other frameworks.

Currently no, what's the use case for that?

The ability to abstract an arbitrary part of the DOM into a component, without needing a wrapper element. display: contents will make wrappers harmless, but is not widely supported yet.

Here is a use case from the React docs, although this was supported before Fragments by just returning an array from render().

@pakastin I think that i talked with you about similar feature here #93

It would break the basic ”rule”, that component is always just a regular DOM element..

It’s different with virtual DOM where anything can change anytime.

It can't be an array of regular DOM elements? Or i don't understand something...

Can we not be React fanboys btw

There’s certain issues with that, for example if list had array of elements as root elements, which one is the parent of list items..?

Haha @def14nt 😂

There’s certain issues with that, for example if list had array of elements as root elements, which one is the parent of list items..?

Can you show example, please?

@pakastin what about another property for the parent node?

Could the rule be extended, so that a component is either an Element or a DocumentFragment (what document.createDocumentFragment() returns)? It's not just a React concept 🐠

@vp2177 oohhh native interop sounds lovely

Fragment is just a temporary place, once you mount the fragment, it gets empty – so not really useful here 😕

This is currently not possible, because of the nature of document fragment

I had a similar problem and came up with this

https://codepen.io/aziis98/pen/mggqJw?editors=0010