Sibling selectors does not work when passing style variables to a component, because of "display: contents;" element

[ThorFjelldalen]

Describe the problem

When passing style variables to a component, svelte inserts a new root element with display: contents. At first, this seems like an elegant solution for scoping and setting style variables per component instance, but when using a sibling selector, the added parent DOM element, makes it so that components which are siblings in code, are no longer siblings when loading the page.

Then relying on the sibling selector is volatile when you have the option of passing style variables.

Describe the proposed solution

I would like style variables to be slightly more integrated with a svelte component, as the current solution feels somewhat like an oversimplified workaround, which has this negative side effect.

I guess my proposed easiest solution would be to be able to disable insertion of the new parent element which has display: contents;, for a given component. In this case the variables would be set on the first element in the component, leaving it up to the developer to have a component root element.

Unless this is already possible in some way?

Importance

would make my life easier

[Zachiah]

I'm thinking <svelte:options /> is a good place to specify this. We could add something to the effect of cssvars?: 'wrapper' | 'apply-to-root' attribute to it's props. We could then set a constraint that if you use cssvars: 'apply-to-root' you have to have a single root element or we could say that if there are multiple, then they will be added to all root level elements (probably needs some thought to make a good decision here).

Discussion Points

• [ ] If expanding on the svelte:options API is the right approach, what is a good name for the property (cssvars isn't great haha) and what should the property value be ('wrapper' | 'apply-to-root' gets the point across but isn't wonderful as well)?
• [ ] When applying the vars to the root element should we allow multiple root elements?

Once we decide on the second point can I make a PR for this?