-
Notifications
You must be signed in to change notification settings - Fork 1
/
test.html
98 lines (88 loc) · 2.21 KB
/
test.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
<body>
<script type="module">
// https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements
// Create a class for the element
class CSVTable extends HTMLElement {
constructor () {
super();
// const shadow = this.attachShadow({ mode: 'open' });
const shadow = this;
const ss = this.textContent.trim().split("\n");
this.textContent = "";
const c = tag => document.createElement(tag);
const tbl = c("table");
for (const s of ss) {
const tr = c("tr");
tbl.append(tr);
const s2 = s.split(",");
for (const s3 of s2) {
const td = c("td");
tr.appendChild(td);
td.textContent = s3;
}
tbl.appendChild(tr);
}
shadow.appendChild(tbl);
/*
// Create spans
const wrapper = document.createElement('span');
wrapper.setAttribute('class', 'wrapper');
const icon = document.createElement('span');
icon.setAttribute('class', 'icon');
icon.setAttribute('tabindex', 0);
const info = document.createElement('span');
info.setAttribute('class', 'info');
// Take attribute content and put it inside the info span
const text = this.getAttribute('data-text');
info.textContent = text;
// Insert icon
let imgUrl;
if(this.hasAttribute('img')) {
imgUrl = this.getAttribute('img');
} else {
imgUrl = 'img/default.png';
}
const img = document.createElement('img');
img.src = imgUrl;
icon.appendChild(img);
*/
// Create some CSS to apply to the shadow dom
const style = document.createElement('style');
console.log(style.isConnected);
style.textContent = `
table {
border-collapse: collapse;
}
td {
border: 1px solid #333;
padding: .1em .5em;
font-size: 90%;
}
`;
// Attach the created elements to the shadow dom
shadow.appendChild(style);
/*
console.log(style.isConnected);
shadow.appendChild(wrapper);
wrapper.appendChild(icon);
wrapper.appendChild(info);
*/
}
}
// Define the new element
customElements.define('csv-table', CSVTable);
</script>
</body>
<style>
td {
background-color: red;
}
</style>
a
<br>
<br>
<csv-table>
name,id
なまえ,1
名前,2
</csv-table>