Плохо ли стилизовать элемент непосредственно в полимере?

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

<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>

dart css polymer shadow-dom dart-polymer
person Luis Vargas    schedule 22.03.2014    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

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

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

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

person Günter Zöchbauer    schedule 22.05.2014

arrow_upward
0
arrow_downward

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

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

  • предоставить дескрипторы для внешней настройки.
  • динамически обновлять некоторые свойства css, такие как высота поля элемента.
person nunobaba    schedule 08.04.2014