Почему scoped не подставляет хэш компонента к родительскому классу селектора потомка?

У меня есть Vue компонент новости - NewsItem. Внутри него есть стили с локальными скоупом. В частности:

    .news:hover .tag_category,
    .news:hover .tag_category::before {
        color: #fff;
    }

Шаблон выглядит так:

    <template>
        <div>
            <section class="news">
                <div class="tags">
                    <span class="tag">
                        lorem
                    </span>
                    <span class="tag tag_category">
                        lorem
                    </span>
                </div>
                <h1 class="title">
                    lorem
                </h1>
                <a href="#" class="more">lorem</a>
            </section>
        </div>
    </template>

Но в браузере в панели разработчика видно, что хэш компонента добавляется только к последнему составляющему селектора т.е. к классу tag_category

Мой вопрос в том, почему так? Ведь если этот компонент (NewsItem) будет вложен в элемент с классом .news, то появится непревиденное поведение из-за отсутствия хэша в селекторе на классе .news