-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
57 lines (52 loc) · 2.78 KB
/
index.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
46
47
48
49
50
51
52
53
54
55
56
57
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta name="description" content="XPostpress">
<meta name="theme-color" content="#333">
<base href="/">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<title>x-postpress</title>
</head>
<body>
<x-postpress>
<template shadowroot="open">
<slot name="posts"></slot>
</template>
<!-- slotted content, static generated from server -->
<section slot="posts">
<article>
<h1>
<a href="https://kherrick.github.io/x-postpress/">
x-postpress
</a>
</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ornare sollicitudin tristique. Maecenas fringilla semper volutpat. Curabitur non lorem sagittis, consequat nunc in, commodo mauris. Cras vitae mi a ligula tincidunt auctor. Vestibulum odio risus, semper sit amet finibus in, commodo auctor ex. Praesent faucibus neque ultricies commodo bibendum. Nulla facilisi. Etiam vitae consequat ligula, at vestibulum arcu. Aenean egestas gravida auctor. Aliquam ac rutrum nunc. Aliquam erat volutpat. Praesent faucibus aliquam ligula, eu semper libero tristique in. Vivamus porttitor faucibus dui sodales rhoncus. Vestibulum in luctus eros, ac hendrerit purus.</p>
<p>Etiam vitae elit quis urna sagittis blandit. Cras varius diam magna. Sed sed velit ut leo egestas pretium vel non massa. Sed eleifend tellus id nibh imperdiet imperdiet. Suspendisse consectetur blandit sollicitudin. Vestibulum lorem urna, aliquet non libero sed, interdum rutrum ligula. Fusce scelerisque lorem sit amet finibus condimentum. Nunc vitae erat est. Ut eu odio elementum, blandit purus interdum, varius massa. Vivamus vel nibh et orci viverra egestas ut feugiat nunc. Aliquam id ultricies augue. Sed id vehicula leo, vitae pharetra sem. Quisque ultricies metus non ex efficitur blandit.</p>
<hr />
</article>
</section>
</x-postpress>
<script>
if (window.customElements) {
// Declarative ShadowDom Polyfill, see: https://web.dev/declarative-shadow-dom/#detection-support
// needs to load after HTML element is parsed, but before custom element is defined
document.querySelectorAll('template[shadowroot]').forEach(template => {
const mode = template.getAttribute('shadowroot');
const shadowRoot = template.parentNode.attachShadow({
mode
});
shadowRoot.appendChild(template.content);
template.remove();
});
}
</script>
<script type="module">
import 'https://unpkg.com/[email protected]/dist/index.js';
</script>
<script type="module">
import './out-tsc/src/x-postpress.js';
</script>
</body>
</html>