Styling Layout of the Components in use.

[Abhinav1217]

PS:
I have gone through #2870 , #2888 , #5517 , #1808 and few others. While the title of this issue is kind of generic, my query is different from them. Those questions discuss some way of accessing or passing styling the child inside the components, My query is about (for lack of better words) the components in use itself.

Taking the ContactCard example from official examples as baseline. Suppose I have 5 <ContactCards>...</ContactCards> in App.svelte. Having components gives me benefit of abstracting its structure. But now I want to position those cards on page. Something like this

  <section> 
    <ContactCards>...</ContactCards>
    <ContactCards>...</ContactCards>
    <ContactCards>...</ContactCards>
  </section> 

<style>
    ContactCards {
          display: inline-block;
          margin: 1rem;
          padding: 1rem;
          border: 1px solid red;
    }
</style>

Currently, I would have to wrap each CustomComponents inside an unnessary wrapper div and use that to position them, like this

<section>
     <div class="contact-card"> <ContactCards>... </ContactCards> </div>
     <div class="contact-card"> <ContactCards>... </ContactCards> </div>
     <div class="contact-card"> <ContactCards>... </ContactCards> </div>
</section> 
<style>
    .contact-card {
          display: inline-block;
          margin: 1rem;
          padding: 1rem;
          border: 1px solid red;
    }
</style>

While in this simple case, It doesn't look so like an overhead which might cause problem, In my daily usage, it is causing a lot of trouble. I have created custom input elements like <Checkbox .. /> <Radio .. /> <Password .. /> <Text .. /> which not only abstracts it design (like having a "key" icon in password field) , but also some default functionality like client side check of password rules. The form submits perfectly when I just use it, but when I style their layout, app breaks unexpectedly. If I try to fix the script, It isn't a reusable anymore because of hardcoding stuffs into it. All my ideas for avoiding hardcoding will ultimately lead to overly exposing internal parameters and add unnecessary boilerplate for using the component.

Now based on comments in #2870 and #1808 , There is currently no way of adding styles to the components itself, mostly because there is no guarantee of having single root node of component. And #2888 has been closed without merging, which in my case wouldn't be much better than having a wrapper outside the components.

Is there some way which would be more suited for my case? Where I can manage css layout of components on the page ( not talking about passing styles inside components). I have been svelte user for past 6-7 months only. All my custom components are expanded upon the stuffs taught by Tan Li Hau's youtube channel.

[mbacon-edocs]

FYI I sometimes wrap the component in the container div anyway just in case, but for many use cases I actually use a layout that doesn't require direct selectors. CSS Grid, flexbox, for example - they don't solve every use case of course and I've certainly found a few needs for what you mention, but in those occasions I now use main :global(.component-wrapper-class). Your specific example can have the margin and display/layout part solved by flexbox/grid, but not the padding and border - depending on the use case and repeated use of this styling though, perhaps they are relevant as a component property in some way? (until a built-in component selector feature is added)

[dummdidumm]

Closing as this is a usage question, which should be asked on StackOverflow, Reddit or Discord.

If you treat this as a feature request, then the answer is: There's no way to make this work with the way Svelte components are written. As you said yourself, Svelte components don't have to have a single root element, they even could have no element at all. That's why you either need to add a wrapping element yourself like you did (and if you repeat this just add another component which contains the component and the wrapper div), or add this wrapper element inside the card - and if that needs to be costumizable, you can pass properties for that, or css custom properties, or the :global hack.

[non25]

Or this, which is much better solution:
#2888 (comment)