adoptNode では CustomElements はアップグレードされない

以前カスタムエレメントのアップグレード記事を書いたときに importNode のタイミングでアップグレード処理が起きるので adopt 時にアップグレードされるものと書きました

customElements.define("ele-ment", class extends HTMLElement { constructor(){ super(),console.log(1) } })
const tpl = document.createElement("template")
tpl.innerHTML = `<ele-ment></ele-ment>`
const frag = document.importNode(tpl.content, true)
console.log(0)
document.body.append(frag)
console.log(2)

これは

1
0
2

という結果になります
importNode のタイミングでアップグレードされるのでコンストラクタが実行され 1 が表示されます

これを importNode から adoptNode に変えてみます

customElements.define("ele-ment", class extends HTMLElement {constructor(){super(),console.log(1)}})
const tpl = document.createElement("template")
tpl.innerHTML = `<ele-ment></ele-ment>`
const frag = tpl.content.cloneNode(true)
document.adoptNode(frag)
console.log(0)
document.body.append(frag)
console.log(2)

結果は

0
1
2

adoptNode のタイミングではアップグレードされず append 時にアップグレードされています
importNode と adoptNode はどちらも ownerDocument を設定するもので importNode ではクローンも行います
ownerDocument を自身のドキュメントと設定してクローンします
adoptNode ではクローンせず引数に渡した Node そのものの ownerDocument を変更します

const tpl = document.createElement("template")
tpl.innerHTML = `<ele-ment></ele-ment>`

const frag1 = tpl.content.cloneNode(true)
console.log(frag1.ownerDocument === document)
// false
document.adoptNode(frag1)
console.log(frag1.ownerDocument === document)
// true

const frag2 = tpl.content.cloneNode(true)
console.log(frag2.ownerDocument === document)
// false
const frag3 = document.importNode(frag2)
console.log(frag3.ownerDocument === document)
// true

アップグレードは adopt 時ではなく 要素の作成時にその ownderDocument の window に要素が登録されていた場合か DOM に connect されたときに行われるみたいです
ところで こっちの記事の on*** 属性の方は importNode でも adoptNode でも実行されてました