-
Notifications
You must be signed in to change notification settings - Fork 139
/
with-context.js
39 lines (36 loc) · 951 Bytes
/
with-context.js
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
import { withContext } from 'skatejs';
class WithContext extends withContext() {
context = {
background: 'white',
color: 'black',
margin: '10px 0',
padding: '10px'
};
connectedCallback() {
this.attachShadow({ mode: 'open' }).innerHTML = `
<slot></slot>
<with-context-descendant>
...and shadow DOM!
</with-context-descendant>
`;
}
}
class WithContextDescendant extends withContext() {
connectedCallback() {
const { background, color, margin, padding } = this.context;
this.attachShadow({ mode: 'open' }).innerHTML = `
<style>
:host {
background: ${background};
color: ${color};
display: block;
margin: ${margin};
padding: ${padding};
}
</style>
<slot></slot>
`;
}
}
customElements.define('with-context', WithContext);
customElements.define('with-context-descendant', WithContextDescendant);