Web Components
HTML Templates
1
2
3
4
5
6
7
8
9
| <template id="radiogroup">
<input type="radio" name=""> <label></label>
<input type="radio" name=""> <label></label>
<style>
label{
color:red;
}
</style>
</template>
|
Custom Elements and Shadow DOM
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| var template = document.querySelector('#radiogroup');
var appInfoProto = Object.create(HTMLElement.prototype);
appInfoProto.createdCallback = function() {
var root = this.createShadowRoot();
// template.content
var clone = template.content.cloneNode(true);
var myInputNodeList = clone.querySelectorAll('input');
for (var i = 0; i < myInputNodeList.length; ++i) {
var item = myInputNodeList.item(i);
item.setAttribute('id',this.getAttribute('data'+i));
item.setAttribute('name',this.getAttribute('name'));
}
var myLabelNodeList = clone.querySelectorAll('label');
for (var i = 0; i < myLabelNodeList.length; ++i) {
var item = myLabelNodeList.item(i);
item.setAttribute('for',this.getAttribute('data'+i));
item.innerHTML = this.getAttribute('message'+i)
}
root.appendChild(clone);
}
document.registerElement('my-radiogroup', {
prototype: appInfoProto
});
|
Use Custom Question in your HTML
1
2
3
4
5
| <my-radiogroup id="group" data0="id0" message0="player0" data1="id1" message1="player1" name="basketball"></my-radiogroup>
<label for=""> I am innocence</label>
<my-radiogroup id="group" data0="leon" message0="Messi" data1="me" message1="Ashley" name="football"></my-radiogroup>
<my-radiogroup id="group" data0="A" message0="A" data1="B" message1="B" data2="C" message2="C" data3="D" message3="D"name="Charctor"></my-radiogroup>
|