blob: 327840d9d26460aa0b8086175f2858d2a81fbb48 (
plain)
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
|
<!DOCTYPE html>
<html>
<head>
<script>
customElements.define("custom-element", class extends HTMLElement {
constructor() {
super();
const template = document.getElementById("template");
const shadowRoot = this.attachShadow({mode: "open"})
.appendChild(template.content.cloneNode(true));
}
});
function doit() {
var newNode = document.createElement("span");
newNode.appendChild(document.createTextNode("Nine"));
document.getElementById("target").appendChild(newNode);
}
</script>
<style>
body > custom-element { border: 3px solid blue }
</style>
</head>
<body onload='doit()'>
<template id="template">
<!-- Multiple insertion points to force appends to be handled via
ContentInserted -->
<slot name="foo"></slot>
<slot name="bar"></slot>
<slot></slot>
</template>
<custom-element id="target"
><span>One</span
><span>Two</span
><span>Three</span
><div>Four</div
><div>Five</div
><span>Six</span
><div>Seven</div
><div>Eight</div
></custom-element>
</body>
</html>
|
