Lifecycle

by Aggre _--

HTML

<x-app></x-app>

JavaScript

// 見やすいようにロギング関数を作っておきます
const log = text => document.body.insertAdjacentHTML('beforeend', `<p>${text}</p>`)

window.customElements.define('x-app', class extends HTMLElement {
	static get observedAttributes() {
		return ['my-name']
	}
	constructor() {
		super()
		log('要素が作成されました。')
	}
	connectedCallback() {
		this.innerHTML = `<p>Hello!</p>`
		log('要素が挿入されました。')
	}
	disconnectedCallback() {
		log('要素が削除されました。')
	}
	attributeChangedCallback(name, oldValue, newValue) {
		log(`${name}属性が書き換わりました。
		古い値は${String(oldValue)}で、
		新しい値は${String(newValue)}です。`)
	}
	adoptedCallback() {
		log('要素が新しい文書に追加されました')
	}
})