This repository has been archived by the owner on Oct 7, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 10
/
demo.html
120 lines (97 loc) · 4.35 KB
/
demo.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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!--
Copyright 2018 Google LLC
Licensed under the Apache License, Version 2.0 (the "License"); you may not
use this file except in compliance with the License. You may obtain a copy of
the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
License for the specific language governing permissions and limitations under
the License.
-->
<!DOCTYPE html>
<html>
<head>
<script type="module">
import * as shadow from './shadow.js';
const root1 = host1.attachShadow({mode: 'open'});
host1.style.border = 'blue 4px solid';
root1.innerHTML = `
This text starts with extra whitespace, and contains an ignored <style> node right after this.
<style type="ignored">Hello, I'm a secret style node.</style>
<div>
<strong>Strong text</strong> <em>@</em> <div style="background: #eee"><slot></slot></div><-- slot for Light DOM<div id="host2"></div>
More DOM text nodes after our host</div>`;
const host2 = root1.getElementById('host2');
host2.style.border = 'red 4px solid';
const root2 = host2.attachShadow({mode: 'open'});
root2.innerHTML = `<div>This is an inner Shadow Root with images: <img data-first src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" /><img data-second src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" /><em>Trailing element</em></div>`;
const renderTree = (node) => {
const out = [];
while (node && !(node instanceof DocumentFragment)) {
if (node.nodeType === Node.TEXT_NODE) {
out.unshift('#text')
} else {
out.unshift(node.localName);
}
node = node.parentNode;
}
return out.join('/');
};
const formatRange = (r) => {
if (!r) {
return '-';
} else if (r.startContainer === r.endContainer) {
return `"${r.toString()}" (${renderTree(r.startContainer)}:${r.startOffset}-${r.endOffset})`;
}
return `"${r.toString()}" (${renderTree(r.startContainer)}:${r.startOffset},${renderTree(r.endContainer)}:${r.endOffset})`;
};
// nb. We don't need to use "-shadow-selectionchange", but it only fires _once_, whereas
// "selectionchange" will fire multiple times (i.e., hundreds!) due to us changing it.
document.addEventListener(shadow.eventName, () => {
const ss1 = shadow.getRange(root1);
out1.textContent = formatRange(ss1);
const ss2 = shadow.getRange(root2);
out2.textContent = formatRange(ss2);
});
extendForward.addEventListener('click', () => {
window.getSelection().modify('extend', 'forward', 'character');
});
extendBackward.addEventListener('click', () => {
window.getSelection().modify('extend', 'backward', 'character');
});
</script>
<style>
body {
font-family: 'Roboto', 'Open Sans', Sans-Serif;
/* white-space: pre; */
}
main {
font-size: 2em;
}
</style>
<body>
<h1>Shadow DOM selection page</h1>
<p>This page demos detecting the selection range within a shadow root, for Safari, which does not yet support <code>ShadowRoot.getSelection</code>.
(It still works in Chromium and Firefox, it just uses the native versions.)</p>
<p>Note that Chromium and Safari allow selection across Shadow DOM boundaries, sometimes with unpredictable results.
Please <a href="https://github.com/GoogleChromeLabs/shadow-selection-polyfill/issues" target="_blank">provide feedback</a> if you have opinions or real-world experience with this problem.</p>
<h2>Selection</h2>
<ul>
<li>root1 selection: <span id="out1">-</span></li>
<li>root2 selection: <span id="out2">-</span></li>
</ul>
<button id="extendForward">Extend Selection Forwards</button>
<button id="extendBackward">Extend Selection Backwards</button>
<main>
<div>
Content is below me<br />
</div>
<div id="host1">
I'm some content in the DOM
</div>
^^ That's my host above
</main>
</body>
</html>