Неправильно ли вы применяете элемент стиля непосредственно в полимере?

Question

Например, я мог бы сделать следующую вещь:

<polymer-element name="hello-world"> 
    <template> 
    <div style="background-color: red"> 
     hello world! 
    </div> 
    </template> 
</polymer-element> 

Кроме того, я мог бы также стиль элемента динамически делает следующее:

HelloWorld.create() : super.create() { 
    createShadowRoot().children = [ 
     new DivElement() 
      ..style.color = SOME_GLOBAL_COLOR 
      ..text = 'Hello World!' 
    ]; 
} 

Вместо:

<polymer-element name="hello-world"> 
    <template> 
    <style> 
     .somediv { 
      background-color: red; 
     } 
    </style> 
    <div class="somediv"> 
     hello world! 
    </div> 
    </template> 
</polymer-element> 

Answer 1

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

Помимо этого организационного рассмотрения, поскольку элементы стиля являются частью шаблона, наблюдаемые (следовательно, опубликованные) свойства могут быть помещены непосредственно внутри css. Это особенно удобно:

• Предоставить ручки для внешней настройки.
• динамически обновлять некоторые свойства css, такие как высота окна элемента.

Answer 2

Считается удачной практикой. Он обеспечивает инкапсуляцию.

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

Стили с использованием комбинатора /deep/ могут вызвать проблемы с производительностью, особенно в браузерах, которые не поддерживают shadowDOM изначально, но используют полиполки.

Я бы предоставил базовый стиль/стиль по умолчанию в компоненте и настройке для конкретного сайта вне элемента.