-
-
Notifications
You must be signed in to change notification settings - Fork 111
Expand file tree
/
Copy pathe-icon.html
More file actions
71 lines (57 loc) · 1.21 KB
/
e-icon.html
File metadata and controls
71 lines (57 loc) · 1.21 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!doctype html>
<script src="../index.js"></script>
<script>
class EValidator extends HTMLElement {
constructor() {
super();
this._iconName = null;
}
connectedCallback() {
this._render();
}
attributeChangedCallback(name, oldValue, newValue) {
this[name] = newValue;
}
static get observedAttributes() {
return ['header'];
}
set header(value) {
this._iconName = value;
this._render();
}
_render() {
hyperHTML.bind(this)`<e-icon icon="${this._iconName}"></e-icon>`;
}
};
class EIcon extends HTMLElement {
constructor() {
super();
this._state = {};
this._state.icon = 'cog';
}
connectedCallback() {
this._render();
}
static get observedAttributes() {
return ['icon'];
}
attributeChangedCallback(name, oldValue, newValue) {
this[name] = newValue;
}
get icon() {
return this._state.icon;
}
set icon(value) {
debugger;
console.log('setter called');
this._state.icon = value;
this._render();
}
_render() {
hyperHTML.bind(this)`${this._state.icon}`;
}
};
customElements.define('e-icon', EIcon);
customElements.define('e-validator', EValidator);
</script>
<e-validator header="working"></e-validator>