JSFiddle - React, Tailwind, and code Playground

by avrelian

HTML

<h2>Каскадный беспредел: ShadowCSS</h2>
<p>Решение работает, но не устойчиво к неконтролируемым стилизациям.</p>

<div class="step step-0">
    <h3>Начальное положение. Стилизован дочерний элемент внутреннего блока (x-inner-block).</h3>
    
    <x-outer-block x-outer-block="">
        <span x-outer-block="">Я должен быть черным</span>
        
        <x-inner-block x-inner-block="">
            <span x-inner-block="">Я должен быть зеленым</span>
        </x-inner-block>
    </x-outer-block>
</div>

<div class="step step-1">
    <h3>Стилизация дочернего элемента внешнего блока (x-outer-block) под контролем ShadowCSS.</h3>
    
    <x-outer-block x-outer-block="">
        <span x-outer-block="">Я должен стать синим</span>
        
        <x-inner-block x-inner-block="">
            <span x-inner-block="">Я должен остаться зеленым</span>
        </x-inner-block>
    </x-outer-block>
</div>

<div class="step step-2">
    <h3>Неконтролируемая стилизация дочерних элементов внешнего и внутреннего блоков.</h3>
    
    <x-outer-block x-outer-block="">
        <span x-outer-block="">Я должен остаться синим</span>
        
        <x-inner-block x-inner-block="">
            <span x-inner-block="">Я должен остаться зеленым</span>
        </x-inner-block>
    </x-outer-block>
</div>

CSS

.step-0 span[x-inner-block],
.step-1 span[x-inner-block],
.step-2 span[x-inner-block] {
    color: green;
}


.step-1 span[x-outer-block],
.step-2 span[x-outer-block] {
    color: blue;
}

.step-2 span:not(#id) {
    color: red;
}



/* стили оформления тестового стенда */
.step {
    margin: 20px;
    padding: 5px;
    border: 2px solid green;
    border-radius: 10px;
    font-family: sans-serif;
}
x-outer-block,
x-inner-block {
    display: block;
}