-
-
Notifications
You must be signed in to change notification settings - Fork 18
/
demo-defer-hydration.html
62 lines (47 loc) · 2.33 KB
/
demo-defer-hydration.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
---
layout: layout.html
title: Islands
---
<h1><a href="/">is-land</a></h1>
<p>Related to <a href="/issues/13">the test case for GitHub issue #13</a>.</p>
<p><code>defer-hydration</code> solves the problem of <code><chocolate-web-component></code> elements outside of <code>is-land</code>s hydrating when <code>chocolate-web-component.js</code> is loaded.</p>
<chocolate-web-component defer-hydration class="demo-component">
<template shadowroot="open">Chocolate shadow root</template>
Chocolate web component
</chocolate-web-component>
<script src="/lib/chocolate-web-component.js" type="module"></script>
<is-land on:interaction import="/lib/chocolate-web-component.js">
<button type="button" onclick="console.log('Click test')">Click test (log to console)</button>
<p>Using <code>defer-hydration</code>.</p>
<chocolate-web-component defer-hydration class="demo-component">
<template shadowroot="open">Chocolate shadow root</template>
Chocolate web component
</chocolate-web-component>
</is-land>
<is-land on:interaction import="/lib/chocolate-web-component.js">
<button type="button" onclick="console.log('Click test')">Click test (log to console)</button>
<p>Using <code>defer-hydration</code>.</p>
<chocolate-web-component defer-hydration class="demo-component">
<template shadowroot="open">Chocolate shadow root</template>
Chocolate web component
</chocolate-web-component>
</is-land>
<!-- <is-land on:interaction import="/lib/chocolate-web-component.js">
<button type="button" onclick="console.log('Click test')">Click test (log to console)</button>
<chocolate-web-component class="demo-component">
<template shadowroot="open">Chocolate shadow root</template>
Chocolate web component
</chocolate-web-component>
</is-land>
<div style="display: block; height: 90vh"></div>
<is-land on:visible import="/lib/chocolate-web-component.js">
<button type="button" onclick="console.log('Click test')">Click test (log to console)</button>
<chocolate-web-component class="demo-component">
<template shadowroot="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> -->