Question

我想知道是否有一些方法可以动态设置聚合物元素的样式，例如：

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';
}

但它什么也没做。

Answer 1

您需要查询shadowRoot：

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

  el.style.color = 'blue';
}

Answer 2

您还可以为元素<div id="someId">添加ID，并使用$['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

Answer 3

在函数中调用shadowRoot时出错。您可以在函数enteredView（）中使用它。我的示例代码：

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

如何动态设计聚合物元素

3 个答案: