DOMDOMタイムス#7: getRootNode()は何を返すのか
先週ちょっと長めだったアンド今週は発表があったという理由から、今日はみじかめの話！
getRootNode()の返り値の型がDocument | ShadowRoot | nullとかではなくてNodeになっている理由が気になる人は読んでいってみてね🐶
getRootNode()のよくある使い方
一般的にはshadow rootの中で使う人が多そう。
shadow treeの中の要素をコンテクストとして実行すれば、shadow rootを取得することができるヨネ👶
const div = document.createElement('div')
const shadow = div.attachShadow({mode:'open'})
const p = document.createElement('p')
shadow.appendChild(p)
console.log(p.getRootNode())
// => #shadow-root (open)
仕様を見てみる
getRootNode()は与えられたnodeのrootを返してくれるらしい。
optionを与えられるの知らなかった🌝
The getRootNode(options) method steps are to return this’s shadow-including root if options["composed"] is true; otherwise this’s root.
https://dom.spec.whatwg.org/#dom-node-getrootnode
ではではここからもう一段、いつものように深掘りしてみる。rootってなんやねんと。
The root of an object is itself, if its parent is null, or else it is the root of its parent. The root of a tree is any object participating in that tree whose parent is null.
https://dom.spec.whatwg.org/#concept-tree-root
これはけっこう面白いですね！？
あるobjectのrootは、親がないならそのobject自身であり、親がいるなら親のrootなんだって(再帰的だねえ)。
そのうえでtreeのrootは、そのtreeに属するobjectのうち、親を持たないものだということ。
普段、isConnected=trueな要素でgetRootNode()やるとdocumentが返ってきたり、shadow root内の要素ではshadow rootが返ってきたりは、こういうことだったのねと。
ひっかけポイント
この定義に照らし合わせて考えると、途中でちぎれたtree(定式化するなら、そのtreeのrootについてisConnected=false)内の要素や、独立した要素の場合はgetRootNode()はdocumentでもshadow rootでもないものを返してくるね。
const div = document.createElement('div')
const p = document.createElement('p')
div.appendChild(p)
console.log(p.getRootNode())
// => <div></div>
const span = document.createElement('span')
console.log(span.getRootNode())
// => <span></span>
これ意外と怖いね〜！nullが返ってくるわけじゃないというのがちょっとひっかけかも。
はい、今日は短いけどここまで！おしまいおしまい！
そうだ、この記事は下記のイシューに着想を得ています✌
Discussion