-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.mjs
82 lines (62 loc) · 1.79 KB
/
index.mjs
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
72
73
74
75
76
77
78
79
80
81
import {tmpl} from './content.js';
// let tmpl = document.createElement('template');
// tmpl.innerHTML = `<style>:host { ... }</style> <!-- look ma, scoped styles -->
// <b>I'm in shadow dom!</b>
// <slot></slot>`;
export class AppDrawer extends HTMLElement {
static get observedAttributes() {
return ['disabled', 'open'];
}
get open() {
return this.hasAttribute('open');
}
set open(val) {
if(val) {
this.setAttribute('open', '');
} else {
this.removeAttribute('open');
}
this.toggleDrawer();
}
get disabled() {
return this.hasAttribute('disabled');
}
set disabled(val) {
if(val) {
this.setAttribute('disabled', '');
} else {
this.removeAttribute('disabled');
}
}
constructor() {
super();
let shadowRoot = this.attachShadow({mode: 'open'});
shadowRoot.appendChild(tmpl.content.cloneNode(true));
this.addEventListener('click', (ev) => {
if(this.disabled) {
return;
}
this.toggleDrawer();
});
}
connectedCallback() {
this.innerHTML = "<b>I'm an x-foo-with-markup!</b>";
}
disconnectedCallback() {
}
attributeChangedCallback(attrName, oldVal, newVal) {
if(this.disabled) {
this.setAttribute('tabindex', '-1');
this.setAttribute('aria-disabled', 'true');
} else {
this.setAttribute('tabindex', '0');
this.setAttribute('aria-disabled', 'false');
}
}
toggleDrawer() {
}
}
customElements.whenDefined('app-drawer').then(() => {
console.log('app-drawer defined');
});
window.customElements.define('app-drawer', AppDrawer);