Полимер разделяет стили по элементам

Question

Мне нужно разделить стили по нескольким полимерным элементам. Допустимо ли создавать файл styles.html, а затем импортировать его в мои разные элементы или это будет иметь последствия для производительности при расширении приложения? Я знаю, что для 0.5 были основные стили, но это вроде бы лишний, если импорт будет работать так же хорошо.

styles.html

<style> 
    button { 
    background: red; 
    } 
</style> 

моего-button.html

<link rel="import" href="../bower_components/polymer/polymer.html"> 
<link rel="import" href="../styles/main-styles.html"> 
<link rel="import" href="../behaviors/mixins.html"> 

<dom-module id="my-button"> 
    <template> 
    <button>{{text}}</button> 
    </template> 
</dom-module> 

<script> 
    Polymer({ 
    is: 'my-button', 
    behaviors: [ButtonBehavior] 
    }) 
</script> 

Answer 1

Как было предложено в discussion о выпуске вошедшего в хроме принизить/глубоко/и :: теневые селекторы:

говорят, что ваши общие стили находятся в файле под названием

общего style.css

В компоненте есть тег стиль, как этот

@import URL ('/common-style.css');

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

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

Мы использовали веб-компоненты в наших производственных приложениях некоторое время, используя эту технику, так как/deep/устарели и не было никаких различий в показателях производительности.

Answer 2

Вы можете использовать общие стили Полимера. Создание документа с стилями:

<dom-module id="shared-styles"> 
    <template> 
    <style> 
     /* Your styles */ 
    </style> 
    </template> 
</dom-module> 

А затем импортировать это к вашим элементам и в их определениях добавить include="shared-styles" к <style> тега.

Answer 3

Начиная с Polymer 1.1, авторы полимерных проектов рекомендуют создавать и импортировать модуль стиля для решения этой проблемы.

Чтобы поделиться объявлениями стилей между элементами, вы можете упаковать набор деклараций стиля внутри элемента. В этом разделе стили удерживания для удобства называются модулем стиля.

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

Дальше: https://www.polymer-project.org/1.0/docs/devguide/styling#style-modules

Answer 4

Share стилей, создавая dom-module для них, так же как и других пользовательских элементов. Чтобы включить общие стили в пользовательский элемент, используйте <style include="style-module-name">. Полный пример ниже.

разделяемой styles.html

<link rel="import" href="../bower_components/polymer/polymer.html"> 
<dom-module id="shared-styles"> 
    <template> 
    <style> 
     /* CSS goes here */ 
    </style> 
    </template> 
</dom-module> 

некоторые-element.html

<link rel="import" href="../bower_components/polymer/polymer.html"> 
<link rel="import" href="shared-styles.html"> 
<dom-module id="some-element"> 
    <template> 
    <style include="shared-styles"> 
     /* Element specific styles go here */ 
    </style> 
    <!-- HTML goes here --> 
    </template> 
    <script> 
    Polymer({ 
     is: 'some-element', 
     properties: { 
     } 
    }); 
    </script> 
</dom-module>