Skip to content
This repository was archived by the owner on Sep 22, 2022. It is now read-only.

Commit 498566d

Browse files
muanmuan
committed
Pull shadow dom demo code out
1 parent b0ac326 commit 498566d

File tree

2 files changed

+53
-54
lines changed

2 files changed

+53
-54
lines changed

‎example/index.html

Lines changed: 2 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5+
<script src="./shadow-demo.js"></script>
56
<!-- <script type="module" src="../dist/index.js"></script> -->
67
<script type="module" src="https://unpkg.com/@github/details-dialog-element@latest"></script>
78
<script type="text/javascript" src="https://unpkg.com/@github/include-fragment-element@latest"></script>
@@ -96,59 +97,6 @@
9697

9798
<button type="button" class="btn mt-4" onclick="document.querySelector('details').open = true">JS trigger: focus should return here</button>
9899

99-
<div id="shadow">
100-
</div>
101-
102-
<template id="shadow-template">
103-
<style>
104-
details {
105-
margin-top: 2em;
106-
}
107-
summary {
108-
padding: .5em;
109-
border: 1px solid;
110-
border-radius: .3em;
111-
display: inline-block;
112-
}
113-
details[open] summary:before {
114-
position: fixed;
115-
content: '';
116-
display: block;
117-
left: 0;
118-
right: 0;
119-
bottom: 0;
120-
top: 0;
121-
background: rgba(0, 0, 0, 0.3);
122-
}
123-
details-dialog {
124-
position: fixed;
125-
height: 50vh;
126-
top: 50%;
127-
margin-top: -25vh;
128-
width: 50vw;
129-
min-width: 20em;
130-
left: 50%;
131-
transform: translateX(-50%);
132-
background: #fff;
133-
border-radius: .5em;
134-
padding: 1em;
135-
}
136-
</style>
137-
<details>
138-
<summary>Dialog with Shadow DOM</summary>
139-
<details-dialog aria-label="Shadow dialog">
140-
<button type="button" data-close-dialog>Close</button>
141-
content
142-
<button type="button" data-close-dialog>Close</button>
143-
</details-dialog>
144-
</details>
145-
</template>
146-
147-
<script>
148-
const shadow = document.getElementById('shadow')
149-
const template = document.getElementById('shadow-template')
150-
const root = shadow.attachShadow({mode: 'open'})
151-
root.append(template.content.cloneNode(true))
152-
</script>
100+
<shadow-dialog></shadow-dialog>
153101
</body>
154102
</html>

‎example/shadow-demo.js

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
class ShadowDialog extends HTMLElement {
2+
constructor() {
3+
super()
4+
const root = this.attachShadow({mode: 'open'})
5+
root.innerHTML = `
6+
<style>
7+
details {
8+
margin-top: 2em;
9+
}
10+
summary {
11+
padding: .5em;
12+
border: 1px solid;
13+
border-radius: .3em;
14+
display: inline-block;
15+
}
16+
details[open] summary:before {
17+
position: fixed;
18+
content: '';
19+
display: block;
20+
left: 0;
21+
right: 0;
22+
bottom: 0;
23+
top: 0;
24+
background: rgba(0, 0, 0, 0.3);
25+
}
26+
details-dialog {
27+
position: fixed;
28+
height: 50vh;
29+
top: 50%;
30+
margin-top: -25vh;
31+
width: 50vw;
32+
min-width: 20em;
33+
left: 50%;
34+
transform: translateX(-50%);
35+
background: #fff;
36+
border-radius: .5em;
37+
padding: 1em;
38+
}
39+
</style>
40+
<details>
41+
<summary>Dialog with Shadow DOM</summary>
42+
<details-dialog aria-label="Shadow dialog">
43+
<button type="button" data-close-dialog>Close</button>
44+
content
45+
<button type="button" data-close-dialog>Close</button>
46+
</details-dialog>
47+
</details>`
48+
}
49+
}
50+
51+
window.customElements.define('shadow-dialog', ShadowDialog)

0 commit comments

Comments
 (0)