Глобальные стили не переопределяют стиль теней

Question

Согласно https://developers.google.com/web/fundamentals/web-components/shadowdom#stylefromoutside:

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

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

app-overlay .child {
  padding: 0 25%;
}

См. Полный пример здесь: http://plnkr.co/edit/YQOmtxSA9AThCcNmrEJc?p=preview

Обратите внимание, что заполнениекоторый установлен как глобальный, не применяется к дочернему наложению приложения (хотя он должен победить стиль компонента).

Есть ли какой-то шаг, который я пропускаю?

Answer 1

Ладно, это просто сбивает с толку, поэтому я помещу это здесь на случай, если кто-то в него врежется.

Переопределение с помощью стилизации глобальной области действия работает только для наследуемых свойств CSS.Если вы хотите установить какое-либо не наследуемое свойство (например, заполнение - смотрите полный список здесь ).

Так что я думаю, что единственный способ сделать это для не наследуемых свойств - это либо ввестиCSS через шаблон (например, вызов файла) или css-переменными.