スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ChildNodeのPolyfillを乗り換えたら文字列→要素にパースされなくなった

英MDNのChildNodeページにあるやつからDOM4へChildNode各メソッドのPolyfillを乗り換えたら、Element#before, after, replaceWithの引数にHTMLな文字列を突っ込んで要素に変換してもらってから挿入していた部分が軒並みただのテキストノードとして挿入されるようになった。一体どっちのPolyfillの実装が正しいのか、まずは日本語で優しく教えてくれる方のMDNへ行って解説を見てみる。

ChildNode - Web API インターフェイス | MDN

...DOMStringオブジェクトは、それと等価なTextノードとして挿入されます。


だろうとは思ってた、因みに日本語版の記事には当該Polyfillへのリンクがない。
一応仕様も見に行ってみる。

DOM Standard

...,while replacing strings in nodes with equivalent Text nodes.


だろうとは思ってたし……もう観念して使用箇所を手当たり次第調べて事前に要素へパースしてから渡すように書き直すしかないようだ。今にして思えば文字列を突っ込んだらホイホイなんでもパースしてくれるって危うい挙動だし疑問に思うべきだったのかもしれない。同じような挙動をするinnerHTMLやinsertAdjacentHTMLもAMOの自動チェックでガンガン引っ掛かるし。

最後にこれまでお世話になっていた方のパース処理を覗いてみる。

// https://github.com/seznam/JAK/blob/master/lib/polyfills/childNode.js
if (typeof node == "string") {
div = document.createElement("div");
div.innerHTML = node;
while (div.firstChild) {
frag.appendChild(div.firstChild);
}
} else {
frag.appendChild(node);
}

なかなか豪快な実装だった。メソッドチェーンのまま要素作って突っ込めるからとても便利で重宝していました、今までありがとう……。おしまい。
関連記事

コメントの投稿

非公開コメント

すポンサードリンク
最新記事
カテゴリ
DN (57)
CSS (2)
いろいろ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。