: host получает перевоспитание универсальным селектором css - PullRequest
Новая
       45

: host получает перевоспитание универсальным селектором css

1 голос
/ 14 октября 2019

У нас есть CSS сбрасывает (margin:0px;padding:0px;) в файле общего стиля, который мы создали как один компонент и включили как часть других компонентов, которые мы разрабатываем.

Мы используем универсальные селекторы, как показано ниже 

*,*:before,*:after{
color:pink

}

Для каждого из наших компонентов у нас есть стиль :host, с помощью которого мы пытаемся переопределить этот цвет 

:host{
color:yellow
}

Как мы ожидаем, :host будет иметь больше специфичности по сравнению с универсальнымСелектор, как ни странно, это не тот случай. универсальные стили селектора переопределяют наши :host стили

Мы просто хотим, чтобы стиль MAKE ME GREEN был выполнен из компонента z-foo (в примере с приложенным plnkr)

Пробовал несколько подходов, и, похоже, ничего не работает

http://plnkr.co/edit/l8NSJT?p=preview

Его розовый цвет означает, что он по-прежнему переопределяется универсальным селектором 

        <!-- import polymer-element -->
        <link rel="import" href="https://polygit.org/polymer+:2.0-preview/webcomponentsjs+:v1/shadydom+webcomponents+:master/shadycss+webcomponents+:master/custom-elements+webcomponents+:master/components/polymer/polymer-element.html">

        <dom-module id='z-foo'>
          <template>
            MAKE ME GREEN
            <!-- Encapsulated, element-level stylesheet -->
            <style>
            :host{
              color:green;
            }
              </style>
              <div>

                I'm z-foo and i am green.

                </div>
          </template>
          <script>
            class ZFoo extends Polymer.Element {
              static get is() {
                return "z-foo";
              }
            }
            customElements.define(ZFoo.is, ZFoo);
          </script>
        </dom-module>

1 Ответ

1 голос
/ 14 октября 2019

Поскольку мы ожидаем, что :host будет обладать большей специфичностью по сравнению с универсальным селектором, странно, что это не так. универсальные стили селектора имеют приоритет над нашими: hoststyles

Это неверное предположение. Фактически, любой селектор CSS, определенный в содержащем документе, будет переопределять правила :host CSS.

В соответствии с представлением Google Shadow DOM :

Внешние стили всегдапобедить стили, определенные в теневом DOM. Например, если пользователь пишет селектор fancy-tabs { width: 500px; }, он превзойдет правило компонента: :host { width: 650px;}

В качестве обходного пути используйте !important в сочетании с :host, если вам нужно.

...