html - outerHTML behavior in a <template> -
given <template>
:
<template id="my-template"> <h1 id="h">hello!</h1> </template>
and js:
var t = document.queryselector("#my-template"); var h = t.content.queryselector("h1"); h.outerhtml = "<h3>aaaaaaaaaaaaaa</h3>";
it's interesting works in firefox , edge in chrome outerhtml
requires parent element, otherwise throws error in console (https://chromium.googlesource.com/chromium/blink/+/master/source/core/dom/element.cpp#2528):
<template id="my-template"> <div> <h1 id="h">hello!</h1> </div> </template>
see https://jsfiddle.net/q5fmn186/11/
my question is, chrome behavior correct one? should setting outerhtml
not work in <template>
on direct children? why aren't other web-browser treat error?
the other web browsers won't treat error because following dom parsing , serialization w3c candidate recommendation (which not standard yet):
on setting [outerhtml], following steps must run:
- let parent context object's parent.
- if parent null, terminate these steps. there no way obtain reference nodes created if remaining steps run.
- if parent document, throw domexception name "nomodificationallowederror" exception.
- if parent documentfragment, let parent new element body local name, html namespace namespace, , context object's node document node document.
- let fragment result of invoking fragment parsing algorithm new value markup, , parent context element.
- replace context object fragment within context object's parent.
the <template>
's content
of type documentfragment (step 4) treated (in situation) document (step 3) chrome , safari.
Comments
Post a Comment