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:

  1. let parent context object's parent.
  2. if parent null, terminate these steps. there no way obtain reference nodes created if remaining steps run.
  3. if parent document, throw domexception name "nomodificationallowederror" exception.
  4. if parent documentfragment, let parent new element body local name, html namespace namespace, , context object's node document node document.
  5. let fragment result of invoking fragment parsing algorithm new value markup, , parent context element.
  6. 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

Popular posts from this blog

java - Run spring boot application error: Cannot instantiate interface org.springframework.context.ApplicationListener -

reactjs - React router and this.props.children - how to pass state to this.props.children -

Excel VBA "Microsoft Windows Common Controls 6.0 (SP6)" Location Changes -