[spankalee]

Not that I entirely disagree that the parent component should be able to override margins and position, but I think spacer components abstract this a bit too far, and really isn't necessary at all if you can just use CSS. This is probably due to an avoidance of exposing HTML and CSS to developers in React.

Ideally the parent component would just have some styles that only effect the children, so you add this CSS to the parent:

    x-item {
      margin: var(--space-3) 0 0 0;
    }

This works fine for custom elements (web components), but I think the problem is that in React you don't know what element a component is going to render, so it's generally much more difficult to target children this way.

[the_other]

> This works fine for custom elements (web components), but I think the problem is that in React you don't know what element a component is going to render, so it's generally much more difficult to target children this way.

This is exactly the problem "spacer components" solve.