-
-
Notifications
You must be signed in to change notification settings - Fork 18
/
demo-declarative-shadow-dom.html
75 lines (55 loc) · 2.97 KB
/
demo-declarative-shadow-dom.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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
---
layout: layout.html
title: Islands
---
<h1><a href="/">is-land</a></h1>
<p>For <a href="https://github.com/11ty/is-land/issues/13">GitHub issue #13</a>.</p>
<p>As of time of writing, Firefox and Safari do not support Declarative Shadow DOM. This component does include a small (4 LoC) polyfill but it is scoped <strong>exclusively</strong> to elements inside of <code><is-land></code>.</p>
<p>Note that if <code>chocolate-web-component.js</code> is not available on page load, any <code><chocolate-web-component></code> elements outside of <code><is-land></code> will be initialized when the file is loaded. This is better solved by implementing <a href="/demo-defer-hydration/"><code>defer-hydration</code> in your component code</a>.</p>
<script src="/lib/chocolate-web-component.js" type="module"></script>
<p>Declarative shadow DOM polyfill is not applied to elements outside of an <code><is-land></code></p>
<!-- <chocolate-web-component class="demo-component">
<template shadowroot="open">Chocolate shadow root</template>
Chocolate web component
</chocolate-web-component>
<chocolate-web-component class="demo-component">
<template shadowroot="open" shadowrootmode="open">Chocolate shadow root</template>
Chocolate web component
</chocolate-web-component> -->
<chocolate-web-component class="demo-component">
<template shadowroot="open" shadowrootmode="open">Chocolate shadow root</template>
Chocolate web component
</chocolate-web-component>
<is-land on:interaction>
<button type="button" onclick="console.log('Click test')">Click test (log to console)</button>
<chocolate-web-component class="demo-component">
<template shadowroot="open" shadowrootmode="open">Chocolate shadow root</template>
Chocolate web component
</chocolate-web-component>
</is-land>
<div style="display: block; height: 90vh"></div>
<is-land on:visible>
<button type="button" onclick="console.log('Click test')">Click test (log to console)</button>
<chocolate-web-component class="demo-component">
<template shadowroot="open" shadowrootmode="open">Chocolate shadow root</template>
Chocolate web component
</chocolate-web-component>
</is-land>
<is-land on:visible>
<button type="button" onclick="console.log('Click test')">Click test (log to console)</button>
<chocolate-web-component class="demo-component">
<template shadowroot="open" shadowrootmode="open">Chocolate shadow root</template>
Chocolate web component
</chocolate-web-component>
</is-land>
<is-land on:visible>
<button type="button" onclick="console.log('Click test')">Click test (log to console)</button>
<chocolate-web-component class="demo-component">
<template shadowroot="open" shadowrootmode="open">Chocolate shadow root</template>
Chocolate web component
</chocolate-web-component>
</is-land>
<!-- <is-land on:visible>
<button type="button" onclick="console.log('Click test')">Click test (log to console)</button>
<some-other-custom-element>Some other custom element</some-other-custom-element>
</is-land> -->