Как можно использовать внешнюю таблицу стилей для стилизации элементов Polymer 1.0?

Элементы Polymer 1.0 содержат пользовательские переменные CSS, которые позволяют вам стилизовать их, используя встроенные стили как таковые:

<style is="custom-style">
  paper-toolbar {
    --paper-toolbar-color: blue;
  }
</style>

Это работает и это фантастика. Как я могу сделать то же самое, но используя внешнюю таблицу стилей? Добавление is="custom-style" к тегу ссылки не дает никакого эффекта, так как следующее не работает:

<link rel="stylesheet" media="all" href="app.css" is="custom-style">

css polymer polymer-1.0
person David Smith    schedule 26.06.2015    source источник

Ответы (1)


arrow_upward
12
arrow_downward

Вы можете загрузить файл HTML, содержащий ваш custom-style, как если бы вы использовали полимерный элемент:

<link rel="import" href="my-custom-style.html">

И ваш файл my-custom-style.html будет содержать:

<style is="custom-style">
    paper-toolbar {
        --paper-toolbar-color: blue;
    }
</style>

Начиная с версии Polymer 1.1 эта функция устарела. См. здесь обновленный ответ

person Ben Thomas    schedule 26.06.2015
comment
Это шаблон, который команда Polymer использует для своих элементов Paper: github.com/polymerelements/paper-styles< /а> - person Zikes; 26.06.2015
comment
Но что делать, если вы используете, например, meteorjs, где он берет все файлы css и автоматически объединяет их в один? Вы не имеете никакого влияния на то, как тег стиля написан в метеоре, и вы не можете импортировать собственный html-файл с помощью css (ну, вы могли бы, но это означает, что вы генерируете больше HTTP-запросов). - person Andreas Galster; 16.07.2015
comment
Обратите внимание, что этот метод больше не рекомендуется в Polymer 1.1 (polymer -project.org/1.0/docs/devguide/). Посмотрите мой ответ (stackoverflow.com/questions/32298500/) на этот вопрос. - person Justin XL; 31.08.2015
comment
Спасибо, что указали на это, JustinXL. Я поставлю ссылку в своем ответе. - person Ben Thomas; 17.11.2015