How to add attributes to custom elements?
Question
I am trying to add attributes in my custom elements and use it within my new element, but having a hard time with the syntax. I have seen this article , but not really clear on it's usage. How can I declare and use the custom "label" attribute in my created callback to render it?
<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/ (only works in Google Canary)
3 answers
solution1
1 ACCPTED 2014-01-28 01:11:01
Maybe something like this:
<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>
solution2
0 2014-01-28 00:09:22
Maybe I get you wrong, but have you tried using setAttribute() ?
I also can't try registerElement , but it works the "usual" way:
var el = document.createElement( 'current-date' );
el.setAttribute( 'label', new Date() );
document.body.appendChild( el );
In your case this should be something like:
createdCallback: function() {
this.innerHTML = this.foo + new Date();
this.setAttribute( 'label', this.getAttribute( 'label' ) + new Date() );
}
solution3
0 2014-01-30 04:24:42
您可能正在寻找的是attributeChangedCallback ，这将使您有机会在设置，删除或修改属性时运行用户代码-> http://w3c.github.io/webcomponents/spec/custom/ ＃类型-的-回调
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.