Custome Elementのlife cycle
要素の作成
この段階ではまだ属性が設定されていない
getAttribute() を使っても null しか返ってこない
派生クラスなので super() を呼んでおく
constructor() をoverrideしない場合はいらないと思う
document に追加されたときに呼び出される関数
appendChild() などで呼び出されたタイミングではなく、実際にrenderされたタイミングで呼び出されるんだと思う
CustomElement.js connectedCallback() {
if (this.rendered) return;
this.render();
this.rendered = true;
}
要素のrender処理
複数の場所で要素のrender処理が行われるので、関数化してひとまとめにしておくと扱いやすくなる
名前は何でもいいが、 render() がわかりやすいと思う
属性の変更
予め指定した属性が変更されると呼び出される関数
name : 変更された属性の名前
oldValue : 変更前の値
newValue : 変更後の値
CustomElement.js attributeChangedCallback(name, oldValue, newValue) {
this.render();
}
CustomElement.js static get observedAttributes() {
return [/* 変更を監視する属性名の配列 */];
}
要素の削除
めったに使わないやつ
要素が別のNodeに移動されたときに呼び出されるやつ
まず使うことはないだろう
Reference