-
Notifications
You must be signed in to change notification settings - Fork 119
Expand file tree
/
Copy pathwith-open-web-component.js
More file actions
46 lines (41 loc) · 1.34 KB
/
with-open-web-component.js
File metadata and controls
46 lines (41 loc) · 1.34 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
const { createFocusTrap } = require('../../index');
module.exports = () => {
const container = document.getElementById('with-open-web-component');
customElements.define(
'open-web-component',
class extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<p>
<button id="with-open-web-component-button">open-web-component</button>
</p>
`;
}
}
);
container.innerHTML = `
<button>button 1</button>
<button>button 2</button>
<button>button 3</button>
<open-web-component></open-web-component>
<button>button 4</button>
<button>button 5</button>
<p>
<button id="deactivate-with-open-web-component" aria-describedby="with-open-web-component-heading">
deactivate trap
</button>
</p>
`;
const focusTrap = createFocusTrap('#with-open-web-component', {
onActivate: () => container.classList.add('is-active'),
onDeactivate: () => container.classList.remove('is-active'),
tabbableOptions: { getShadowRoot: true },
});
document
.getElementById('activate-with-open-web-component')
.addEventListener('click', focusTrap.activate);
document
.getElementById('deactivate-with-open-web-component')
.addEventListener('click', focusTrap.deactivate);
};