JSFiddle - React, Tailwind, and code Playground

by avrelian

HTML

<h2>Наследование стилей: ShadowCSS</h2>

<div class="step step-0">
    <h3>Начальное положение. Стили не применены.</h3>
    
    <x-outer-block x-outer-block="">
        Я должен быть черным
        
        <x-inner-block x-inner-block="">
            Я должен быть черным
        </x-inner-block>
    </x-outer-block>
</div>

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

CSS

.step-1 x-outer-block[x-outer-block] {
    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;
}