Lifecycle

by Aggre _--

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('要素が新しい文書に追加されました')
	}
})

// 要素を作成
const app = document.createElement('x-app')

// 要素を追加
document.body.appendChild(app)

// 属性を変更
app.setAttribute('my-name', 'John')

// 観測対象外の属性を変更
app.setAttribute('x-name', 'X')

// 要素を削除
app.parentNode.removeChild(app)