By design we have visually grouped CMS components on multiple pages. We need some kind of wrapper div or a container around specific component groups to add CSS to it and make them visually appear like one entity. We have tried with styling the slots, but this is by no means a good solution. Do you have any suggestions how we could achieve this?
I can think of various ways, they all have PROs/CONs and limitations. You could combine those strategies as well to have an optimised mix.
- The easiest way to implement this is by using standard CSS selectors. There are various selectors that could be used, such as sibling selectors, last-of-type selector.
- Changing the CMS structure to fit the grouping, by using a specific slot for the components. With this approach you can influence the layout by using the pageslot position based CSS selector. The disadvantage here is the the page slot is less flexible and cannot contain additional components that you don't like to be part of the "group".
- You could combine components in a so-called container component; container components have a list of embedded components. The advantage is that the container component can have non-grouped component siblings, which can be rendered in a different way.
- the last resort would be a rewrite of the page layout / page slot component in Spartacus, and conditionally add specific DOM. This is a lower level change and is causing more work and will derail you from the standard implementation.
Hope this will give you some ideas, if not, you should provide more details.