Приоритет CSS в тени DOM <style> - PullRequest
Новая
       70

Приоритет CSS в тени DOM <style>

0 голосов
/ 26 февраля 2019

Что говорят правила приоритета CSS о теге <style> в теневом DOM?

У меня есть элемент <component class="component">, файл CSS включен в <head> с: 

component {
    display: inline-block;
}

и тег <style> внутри теневого DOM с: 

::slotted(.component) {
    display: block;
}

Если я правильно понимаю, первое правило должно иметь специфичность 0.0.1, так как оно имеет один элемент, а второеспецифичность 0.1.1, поскольку она имеет один псевдоэлемент и один класс.Поэтому второй является более конкретным и должен перекрывать первый.Это не происходит, хотя.В консоли разработчика (Chrome) я вижу оба правила, и ни одно из них не перечеркнуто, а на панели «вычисляемые стили» я вижу «display: inline-block».

Более подробный пример какзапрашивается в комментариях: 

<head>
    <style>
        /* "other-component" related styles: */
        other-component {
            display: inline-block;
        }
    </style>
</head>
<body>
    <some-component>
        #shadow-root:
            <style>
                slot[name=some-slot]::slotted(*) {
                    display: block; /* Only works with !important. */
                }
            </style>
            <slot name="some-slot"></slot>
        <!-- The actual ("light-dom") content: -->
        <other-component slot="some-slot"></other-component>
    </some-component>
</body>

Ответы [ 2 ]

0 голосов
/ 23 мая 2019

У нас могло бы быть самое всестороннее объяснение дизайна в https://github.com/w3c/csswg-drafts/issues/2290#issuecomment-382465643

Несколько текущих причин пошли в текущий дизайн:

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

Таким образом, мы должны решить другим способом.Порядок документов (последний шаг каскада) здесь на самом деле не работает - он добавляет неожиданную зависимость от того, как именно вы загружаете пользовательский элемент, и может иметь интересную расу

Так что у нас остался Cascade Origin, иличто-то близкое к этому, что просто безоговорочно делает одну или другую победу.На самом деле введение нового источника в список не казалось хорошей идеей;непонятно, как с этим должны взаимодействовать таблицы стилей пользователя и автора.Поэтому вместо этого мы добавляем еще один каскадный шаг для этого.

И, наконец, мы должны принять решение о том, какой из них победит.Мы уже знаем, что независимо от того, какой порядок мы выбираем, важно иметь обратный порядок;это то, как происхождение каскада уже работает.Таким образом, мы должны решить, выиграет ли внешняя страница по умолчанию, но компонент выигрывает! Важный, или наоборот.Мы решили, что первое имеет больше смысла;это означает, что обычные стили автора компонента являются «значениями по умолчанию», пользовательские стили компонента (! важно или нет) могут переопределить это, а важные стили автора компонента! важные могут быть использованы для «блокировки» стилей, которые должны оставаться такими, как они есть.,Обратный путь, похоже, тоже не удовлетворял сценариям использования: это означало бы, что пользователи компонентов не могут переопределять стили по умолчанию;они должны использовать! важный для этого, возможно, вмешиваясь в их другие стили;и тогда авторы компонентов не смогут «заблокировать» стили.

0 голосов
/ 04 марта 2019

Это поведение определено в Чертеже CSS Scoping Module Level 1 §3.3 :

При сравнении двух объявлений, имеющих разные контексты дерева, для нормальных правил объявление ранеев порядке включения дерева теней [the first, global rule] выигрывает, и для важных правил объявление, прибывающее позже в порядке дерева теней [the second, ::slotted(*) rule] выигрывает.

Примечание: Это противоположно тому, как работают стили области.

В других мирах :

Стили, примененные до распространения, продолжают применяться после распространения.

...