forked from 4storia/4storia.github.io
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathcalypso.html
45 lines (39 loc) · 1.32 KB
/
calypso.html
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
<html>
<head>
<title>Calypso test site</title>
</head>
<style>
custom-ele,
custom-ele-with-slot {
display: inline-block;
padding: 40px;
border: 1px solid;
margin-top: 30px;
}
</style>
<body>
<div class="title">HOWDY PARDNER, WELCOME TO...pendo-calypso...town...</div>
<div class="subtext">this site links to subid 5747827141509120 on pendo-calypso</div>
<div id="some-id-rs11223344aabbccdd">Sam's club riversand selector</div>
<custom-ele>
I'm a shadow dom element with a default slot and no wrapping html tag!
</custom-ele>
<custom-ele-with-slot>
<span slot="text">
I'm a shadow dom element with a named slot
</span>
</custom-ele-with-slot>
<script>
const customEle = document.querySelector('custom-ele');
customEle.attachShadow({mode: 'open'});
const slot = document.createElement('slot');
customEle.shadowRoot.appendChild(slot);
// console.log("huh?", customEle)
const customEleWithSlot = document.querySelector('custom-ele-with-slot');
customEleWithSlot.attachShadow({mode: 'open'});
const slot2 = document.createElement('slot');
slot2.setAttribute('name', 'text');
customEleWithSlot.shadowRoot.appendChild(slot2);
</script>
</body>
</html>