JS Custom Elements, Custom Tags
This post was migrated from Tistory. You can find the original here.
Custom Elements
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
class Test extends HTMLElement {
constructor() {
// Start by calling super() so that the correct prototype chain gets established.
super();
}
static get observedAttributes() {
// Names of the attributes to monitor
// This method must return an array containing the names of the attributes you want to observe.
return ['c', 'l'];
}
connectedCallback() {
// Called each time the custom element is added to a connected element in the document.
// This will happen each time the node is moved, and may happen before the element's contents have been fully parsed.
// It's now attached to the DOM. Do things like rendering here.
this.start();
}
disconnectedCallback() {
// Called each time the custom element is disconnected from the document's DOM.
// It's been removed from the DOM. Do cleanup work here.
this.stop();
}
attributeChangedCallback(name, oldVal, newVal) {
// An attribute was added/removed/changed.
// Which attributes trigger this notification is specified in the static get observedAttributes method.
}
adoptedCallback(oldDoc, newDoc) {
// Called each time the custom element is moved to a new document.
// It's been moved from another Document — not something you'll use often.
}
}
customElements.define('test-tag', Test);
You can build components using nothing but JavaScript. As in the code above, you can define the appropriate lifecycle callbacks in a class,
or you can define, inside the class, all the behavior the element should have once an instance of the class is instantiated.
There are rules for tag names: they must contain at least one hyphen ( - ), and uppercase letters don’t seem to be allowed.
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
class SignUpModal extends HTMLElement {
connectedCallback() {
....
this.innerHTML = `
<div id="signup-modal" class="modal">
<div class="modal-content">
<h2>회원가입</h2>
<form id="signup-form" onsubmit="return false;">
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<button type="submit">가입하기</button>
</form>
<button id="signup-modal-close">닫기</button>
</div>
</div>
`;
const modal = document.querySelector("#signup-modal");
const formElem = document.querySelector("#signup-form");
const closeModalButton = document.querySelector("#signup-modal-close");
...
}
}
As shown above, you can also use a custom tag by setting innerHTML inside connectedCallback.
That said, it’s worth paying attention to this part of the description of connectedCallback: “Called each time the custom element is added to a connected element in the document. This will happen each time the node is moved, and may happen before the element’s contents have been fully parsed.”
References
https://developer.mozilla.org/ko/docs/Web/API/Web_components/Using_custom_elements