WebComponents だと CustomElement がコンポーネントの実体としてあるので そこに属性を設定できます
class をつけることもできて ShadowDOM とのスタイルは親側での指定が優先されます

<component-foo class="abc"></component-foo>

内側で :host に指定したものより優先度が高いので コンポーネントを使う親側で上書き可能です
margin なんかはコンポーネント側で決めるのではなくて 使う側での配置によって決めたいので良い仕組みだと思います

React でもそういう感じでコンポーネントのスタイルを使う親側で指定しようとしたのですが そういう仕組みはなさそうです
コンポーネントの実体は DOM にないので className を指定してもそれはプロパティに渡されるだけです

const App = () => {
	return (
		<Foo className="abc" />
	)
}

自分でコンポーネント内の DOM に props.className を指定しないとダメです

const Foo = props => {
	return (
		<div className={props.className}>Foo component</div>
	)
}

基本全部のコンポーネントでやることになるのでけっこう面倒です
ルートコンポーネント以外にもつけることができる自由度はありますが 普通にそんなことしないのでただ面倒なだけに感じます
自動でやってくれる仕組みはないものですかねー