如何向自定义元素添加属性?

时间:2014-01-27 23:00:35

标签: javascript html5 web-component

我正在尝试在自定义元素中添加属性并在我的新元素中使用它,但是语法很难。我看过this article,但对它的用法并不十分清楚。如何申报和使用自定义"标签"我创建的回调中的属性来渲染它吗?

<current-date foo="Today is: "></current-date>

<script>
  document.registerElement('current-date', {
    prototype: {
      createdCallback: function() {
        this.innerHTML = this.foo + new Date();
      },
      foo: {
        value: function() {
          alert('foo() called');
        }
      }
    }
  });
</script>

http://jsbin.com/UdOwizU/4/(仅适用于Google Canary)

3 个答案:

答案 0 :(得分:1)

也许是这样的:

<body>
  <current-date label="Today is: "></current-date>

  <script>
    document.registerElement('current-date', {
      prototype: {
        createdCallback: function() {
          this.foo = {value: function() {
            return this.attributes.getNamedItem("label").value;
          }},
          this.innerHTML = this.foo.value.call(this) + new Date();
        }
      }
    });
  </script>
</body>

http://jsbin.com/ivaWUyAL/3/edit

答案 1 :(得分:0)

也许我弄错了你,但你尝试过使用setAttribute()吗?

我也无法尝试registerElement,但它以“通常”的方式运作:

var el = document.createElement( 'current-date' );
el.setAttribute( 'label', new Date() );
document.body.appendChild( el );

在你的情况下,这应该是这样的:

createdCallback: function() {
    this.innerHTML = this.foo + new Date();
    this.setAttribute( 'label', this.getAttribute( 'label' ) + new Date() );
}

答案 2 :(得分:0)

您可能正在寻找的是attributeChangedCallback,它可以让您在设置,删除或修改属性时运行用户代码 - &gt; http://w3c.github.io/webcomponents/spec/custom/#types-of-callbacks