FR: Styling of Group component, adding additional sub-elements

[jshannon-tml]

I wish to style my Group using HTML elements within the Group. However, the way the Group is added to the DOM doesn't support this.

I add a "badge" to my nodes like this:

By adding code like this within the <Node>:

<div class="check {status}">
      <svelte:component this={statusIcons.get(status)} size={32} />
</div>

.check {
    position: absolute;
    left: -16px;
    top: -16px;
    color: blue;
  }

I wish to do something similar for the Group, but adding anything to the Group body just adds it to an unrelated place within the Svelvet container.

[briangregoryholmes]

This should be pretty straightforward to implement, but I haven't taken a deep dive yet. We'll try to set it up so that you can have a default or custom option just like you do with Nodes.

[jshannon-tml]

FWIW, I looked at the code to see if it was a simple hack, but the fact that the group info (id, position, etc) is stored and then generated later made it hard. I think it'd be easy if you were to, e.g., pass the child element as a property as raw HTML, like:

<Group width=x height=y child="<div>...</div>" > <Nodes...> </Group>

And then store the HTML, like you do other properties. But that's super janky.

I don't know the sveltekit paradigms well enough to have a better idea.

However... now that I'm writing this out I wonder if you could store the slots.$$default, like you do other properties, and then generate it later? But you'd have to remove the <Node>s first?