Полимерный пользовательский стиль иногда каскадирует некорректность

Я заметил, что каскад не всегда корректен при использовании пользовательского стиля polymer. Судя по всему, это может быть ошибкой в том, как каскад применяется к пользовательским элементам, но я просто хотел бы подтвердить, что я не делаю что-то глупое.

Рассмотрим следующий стиль для моего пользовательского элемента: 

    #price ::content .price span {
        display: block;
        padding: 4px;
        border-top: 1px solid var(--color-gray1);
    }
    #price ::content .price span:first-child { border-top: none; }

... но после рендеринга :первенец переопределяется первым определением, как вы можете видеть на рисунке ниже. Единственный способ убедиться, что мой border: none применяется правильно, заключается в использовании !important, чего я предпочел бы не делать.

Введите описание изображения здесь

Я должен отметить, что я видел такое поведение во многих других местах и решил просто использовать !important в качестве быстрого решения, но это начинает казаться неуклюжим.

Просто добавляю изображение визуализируемого элемента сюда, чтобы показать "неправильную" верхнюю границу.

Введите описание изображения здесь

3 2
polymer css custom-element

3 ответа:

Из того, что я понял, проблема исходит от переменных CSS/пользовательских свойств polyfill.

Он добавляет другой класс, .product-0 в этом случае, чтобы охватить свойство, где вы используете var(--color-gray). Вы, вероятно, уже поняли это, но просто указали на это.

Вы можете переопределить это с помощью столь же конкретного селектора (нет необходимости использовать !important), например #price ::content .price.price span:first-child (Обратите внимание на дубликат .price).

Я не знаю, можно ли это исправить в полифиле.

4

Первое объявление более конкретно, чем второе. Это может быть проблемой.

0

Спецификация структуры DOM является основной ролью для переопределения css. 

#price ::content .price span {
    display: block;
    padding: 4px;
    border-top: 1px solid var(--color-gray1);
}

#price ::content .price span более конкретный, чем #price ::content .price span:first-child.

0