Как динамически стилизовать полимерный элемент

Я хочу знать, есть ли способ динамически стилизовать полимерный элемент, например:

coba.dart

@CustomTag('hello-world')
class HelloWorld extends PolymerElement {
  HelloWorld.created() : super.created();
}

coba.html

<polymer-element name="hello-world">
  <template>
    <div class="somediv">
      <h1>hello world!</h1>
    </div>
  </template>
</polymer-element>

Я хочу стилизовать .somediv, но без использования тега <style>. Я попытался запросить его после создания экземпляра HelloWorld.

HelloWorld.create() : super.create() {
  var el = querySelector('.somediv');

  el.style.color = 'blue';
}

Но это ничего не делает.


person Faris Nasution    schedule 01.02.2014    source источник


Ответы (3)


Вам необходимо запросить shadowRoot:

HelloWorld.create() : super.create() {
  var el = shadowRoot.querySelector('.somediv');

  el.style.color = 'blue';
}
person Alexandre Ardhuin    schedule 01.02.2014
comment
Вы также можете присвоить идентификатор элементу <div id="someId"> и получить к нему доступ, используя $['someId'] - person Günter Zöchbauer; 01.02.2014

Вы также можете присвоить идентификатор элементу <div id="someId"> и получить к нему доступ с помощью $['someId'] вместо использования querySelector.

Вы должны были получить ошибку, как

The null object does not have a getter 'style'.

NoSuchMethodError : method not found: 'style'
Receiver: null
Arguments: []

но эта ошибка, вероятно, была проглочена из-за ошибки https://code.google.com/p/dart/issues/detail?id=16372

person Günter Zöchbauer    schedule 01.02.2014

Вы ошиблись при вызове shadowRoot в созданной функции. Вы можете использовать его в функции enterView(). Мой пример кода:

    void enteredView() {
       super.enteredView();            
         new Timer(new Duration(milliseconds:10), () { 
        var el = shadowRoot.querySelector('.somediv');
        el.style.color = 'blue';
    });
}
person Mr.Bui    schedule 08.02.2014