Поведение 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] необходимо выполнить следующие шаги:
- Пусть parent будет родительским объектом контекста.
- Если parent является нулем, прекратите эти шаги. Невозможно получить ссылку на созданные узлы, даже если остальные шаги были выполнены.
- Если parent является Document, выдается исключение DOMException с именем "NoModificationAllowedError".
- Если parent является DocumentFragment, пусть parent будет новым элементом с телом в качестве локального имени, пространством имен HTML в качестве пространства имен и документом узла объекта контекста в качестве документа узла.
- Пусть фрагмент будет результатом вызова алгоритма синтаксического анализа фрагмента с новым значением в качестве разметки и родительским элементом в качестве элемента контекста.
- Замените объект контекста фрагментом в родительском объекте контекста.
<template>
"s content
имеет тип DocumentFragment (шаг 4), но Chrome и Safari обрабатывают (в этом случае) как документ (шаг 3).