Поведение externalHTML в <шаблоне>

Учитывая это <template>:

<template id="my-template">
    <h1 id="h">Hello!</h1>
</template> 

И JS:

var t = document.querySelector("#my-template");
var h = t.content.querySelector("h1");
h.outerHTML = "<h3>AAAAAAAAAAAAAA</h3>";

Интересно, что это работает в FireFox и Edge, но в Chrome outerHTML требуется родительский элемент, в противном случае он выдает ошибку в консоли ( 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> 

Смотрите https://jsfiddle.net/q5fmn186/11/

Мой вопрос, является ли поведение Chrome правильным? Если установка outerHTML не работать в <template> на прямых детей? Почему другой веб-браузер не воспринимает это как ошибку?

1 ответ

Решение

Другие веб-браузеры не будут воспринимать это как ошибку, потому что они следуют Рекомендации кандидата D3 Parsing and Serialization W3C (которая пока не является стандартом):

При установке [externalHTML] необходимо выполнить следующие шаги:

  1. Пусть parent будет родительским объектом контекста.
  2. Если parent является нулем, прекратите эти шаги. Невозможно получить ссылку на созданные узлы, даже если остальные шаги были выполнены.
  3. Если parent является Document, выдается исключение DOMException с именем "NoModificationAllowedError".
  4. Если parent является DocumentFragment, пусть parent будет новым элементом с телом в качестве локального имени, пространством имен HTML в качестве пространства имен и документом узла объекта контекста в качестве документа узла.
  5. Пусть фрагмент будет результатом вызова алгоритма синтаксического анализа фрагмента с новым значением в качестве разметки и родительским элементом в качестве элемента контекста.
  6. Замените объект контекста фрагментом в родительском объекте контекста.

<template> "s content имеет тип DocumentFragment (шаг 4), но Chrome и Safari обрабатывают (в этом случае) как документ (шаг 3).

Другие вопросы по тегам