forked from mathiasbynens/css-dbg-stories
/
dom-insert.html
39 lines (36 loc) · 1.07 KB
/
dom-insert.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
<!DOCTYPE html>
<title>Minimal shadow DOM example</title>
<h1>Minimal shadow DOM example</h1>
<button onclick="render(createShadowDomElement);">
Render shadow DOM elements
</button>
<button onclick="render(createNormalElement)">
Render normal elements
</button>
<div id="dom">
</div>
<script>
function createShadowDomElement() {
const target = document.createElement('div');
const shadowRoot = target.attachShadow({ mode: 'open' });
const span = document.createElement('span');
span.textContent = 'Test span';
shadowRoot.appendChild(span);
return target;
}
function createNormalElement() {
const target = document.createElement('div');
const span = document.createElement('span');
span.textContent = 'Test span';
target.appendChild(span);
return target;
}
const dom = document.getElementById("dom");
function render(fn) {
const f = document.createDocumentFragment();
for (let i = 0; i < 7000; i++) {
f.appendChild(fn())
}
dom.appendChild(f);
}
</script>