/
cruk-textarea.js
60 lines (49 loc) · 1.32 KB
/
cruk-textarea.js
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
class Textarea extends HTMLElement {
static tagName = "cruk-textarea";
static css = `
div {
display: grid;
}
div::after {
content: attr(data-replicated-value) " ";
white-space: pre-wrap;
visibility: hidden;
}
::slotted(textarea) {
resize: none;
overflow: hidden;
}
::slotted(textarea),
div::after {
padding: 0.5rem;
font: inherit;
grid-area: 1 / 1 / 2 / 2;
}
`;
connectedCallback() {
const shadowRoot = this.attachShadow({ mode: "open" });
const template = document.createElement("template");
const sheet = new CSSStyleSheet();
sheet.replaceSync(Textarea.css);
shadowRoot.adoptedStyleSheets = [sheet];
template.innerHTML = `
<div>
<slot></slot>
</div>
`;
shadowRoot.appendChild(template.content.cloneNode(true));
const div = shadowRoot.querySelector("div");
const slot = shadowRoot.querySelector("slot");
const textarea = slot.assignedElements()[0];
const form = textarea.form;
textarea.addEventListener("input", (e) => {
div.dataset.replicatedValue = e.target.value;
});
form.addEventListener("reset", () => {
div.dataset.replicatedValue = "";
});
}
}
if ("customElements" in window) {
customElements.define(Textarea.tagName, Textarea);
}