Ага, обернул всё в глобалы, действительно сломалось.

а то как в колонию отправить это первым делом, а как объяснить - ну API hints how we want you to do it

но сцука так не делай

Так у тебя же проблема в том, что ты переопределяешь селектор .button, который общий для всех стейтов, вот у тебя специфичность и играет роль. Если ты переопределишь один конкретный стейт с конкретным классом, этот селектор не будет играть в других стейтах.

Обновил репл. Там уже все классы в PromiseButton глобальные.

ок, спс

Ну, короче, как обычно, виноват не инструмент, ахаха :))

Если пытаться молотком пилить доски, не молоток виноват, что плохо получается :)

А вот это очень странно. В целом, встраивание свелта в страницу с сторонним CSS слабо отличается от того, что делаю я, используя бульму. Она тоже даёт глобальные классы, которые я местами "достилизовываю" в компонентах, в том числе и по части медиа-запросов.

Было б круто, если б ты собрал репл, может, там что-то простое палки в колёса вставляло.

дурацкое поведение свелта оказывается осознанно такое.  но на практике это проявляется дико нелогичным образом: ты меняешь, скажем, цвет какому-то из вложенных тэгов, а у тебя перестаёт отрабатывать размер внешнего.  с точки зрения цсс - это дикость и снос крыши.  
там логика такая: если есть стили у нескольких вложенных тэгов, то внешнему тэгу класс добавляется столько раз, какая есть максимальная вложенность у стилизованных тэгов внутри компонента. чтобы цифры добавившейся из-за этих маркерных классов специфичности совпадали.  но таким образом получается что у тебя вес внешнего селектора паразитно зависит от степени вложенности потомков - это полностью ломает цсс-ную логику.  и если ты стили глобальные используешь и локальные одновременно, оно постоянно будет подгаживать в самых неожиданных местах.

Можешь собрать минимальный репро? Очень интересно. Я не сталкивался ни с какими проблемами такого характера, а я постоянно додумываю вещи локально в конкретном компоненте по глобальному селектору.

<div>
    <span>1</span>
</div>
<style>
    div {color: red;}
    div span {color: orange;}
</style>

добавления стиля вложенному спану достаточно для того чтобы удвоился класс у внешнего дива

Как бы еще кого в колонию не отправил 🤷‍♂

да я и так в караганде

<div>
    <span>1</span>
</div>
<style>
    div {color: red;}
    div span {color: orange;}
</style>

А проблема на каком этапе возникает?
Я имею в виду репро, когда у тебя есть какой-то глобальный селектор, ты его в компоненте пытаешься неглобально переопределить, и у тебя всё плохо идёт.

ну конкретно моя проблема была в том, что в дизяйне страницы есть медиазапросы и адаптивность, когда я просто подровнял размер внутри компонента глобальному медиазапросу хватало веса его забороть, а когда я добавил стиль вложенному элементу компонента - перестало.

htmlacademy 😈

@PaulMaly го писать курс? ))

Вообще тема, мне нравится)