ну я добавил вот так .notification.is-info .delete { background: red; }

ниче не поменялось

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

финализируя, мы либо идем по пути css modules и тогда НЕ можем стилизовать теги, но избавляется от каскада. либо имеем каскад

было бы круто пользоваться стайл тегом и при этом пойти по пути css modules :)

ну дак щас возможности такой нет вообще

нельзя поставить compilerOptions: { cssScoping: 'modules' }