Стиль документа, влияющий на локальный DOM при использовании Polymer 1.0 Shady DOM

Question

Следующее иллюстрирует эту проблему с помощью тривиального примера, который я подготовил и отправил в репозиторий github.

Я создал пользовательский элемент "x-menu" (в /x-menu.html) с правилами стилей для легкого DOM. На практике мой вариант использования для этого - использовать CSS-переменные и миксины для определения цветов, стеков шрифтов и т. Д., Которые будут использоваться в документе и пользовательских элементах.

У меня есть пользовательский элемент, определяющий стиль документа (в /demo/index.html), как описано в соответствующей части руководства разработчика Polymer 1.0, в котором определены некоторые правила оформления для моих страниц.

Это прекрасно работает с родным Shadow DOM в Chrome.

Однако при использовании Shady DOM стиль документа разрешается в определения стиля, которые имеют более высокую специфичность, чем стиль в элементе x-menu. Теперь это появляется в стеке стилей инструментов разработчика Chrome:

ul:not([style-scope]):not(.style-scope), p:not([style-scope]):not(.style-scope) {
    font-size: 12px;
    color: red;
}

.container.x-menu ul, .container.x-menu p {
    font-size: 30px;
    color: green;
}

Я понимаю, что есть некоторые ограничения для Shady DOM и Shadow DOM polyfill (webcomponents.org просто говорит, что известным ограничением является "CSS-инкапсуляция ограничена").

Я могу придумать два обходных пути, но ни один из них не очень практичен:

1. Добавьте класс CSS к каждому легкому DOM-узлу (который вы можете увидеть на демонстрационной странице)
   • Это не практично, потому что пользователь пользовательского элемента должен помнить об этом и побеждать цель инкапсуляции CSS.
2. Примените CSS mixin к определению локального стиля. При обработке Shady DOM CSS имеет более высокую специфичность, чем "пользовательский стиль" на уровне документа.
   • Это становится более громоздким и добавляет ненужные накладные расходы при разработке, поддержке и обработке CSS.

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

Answer 1

Похоже на возможное ограничение стиля прокладки. Polyfilling CSS это сложно! Я бы порекомендовал подать вопрос о репозитории Polymer с этой демонстрацией.