Shape nested elements

Research and sketch some possible solutions for:

• How and when to display that an element is a container? Right now, we just display the slots when we drop stuff into there.
• How and when to display a container’s slots? We display slots when we drag stuff into the container, and the slots are displayed horizontally, sharing all the available space equally. This causes a mismatch between the slots representation and where they will actually fit on the element. However, we cannot know where the slots actually are on the element, since this would not work for custom elements.
• How do we make clear (or less confusing) the fact that there is a mismatch between our slot representation on the overlay and their actual position on the DOM? We have no solution yet for this issue.
• How can we represent in which slot a given element is? Maybe we could display it on the tab on the overlay showing the slot name?
• How can we represent an element that is on a slot, but that is not visible? Perhaps we could display a new icon when you select a widget, which when clicked or hovered, would display all the invisible content of that container.
• How can we interact with a slotted element that is not visible? How can we remove such an element, if it was added by mistake, for example? This could be achieved with the tree view, for example. Or we could have an action somewhere on the overlay to do it.

• How to interact with nested elements?

• (Bonus) If we were to use the tree (which we decide to postpone for now), how would it look? How would we represent in which slot the element is? We should probably allow actions to take place, such as removing the element. But we could also consider allowing drag and drop to move elements around.