Парсинг декларативного shadow DOM

parseFromString не очень хорошо сочетается с декларативным shadow DOM. Допустим, вы получаете HTML-документ, берёте часть его содержимого и вставляете в текущую страницу:

<div id="container"></div>
<script>
    const container = document.getElementById('container');
    fetch('stuff.html')
    .then(response => response.text())
    .then((html) => {
        const parser = new DOMParser();
        const fetcheddoc = parser.parseFromString(html, "text/html");
        const main = fetcheddoc.getElementsByTagName('main')[0];
        container.appendChild(main);
    })
</script>

Если полученный HTML содержит элемент <template> с атрибутом shadowrootmode, он останется просто <template>, а не станет shadow DOM.

parseHTMLUnsafe — новая альтернатива parseFromString, которая будет корректно создавать shadow DOM из элемента template.

const container = document.getElementById('container');
fetch('stuff.html')
.then(response => response.text())
.then((html) => {
    const fetcheddoc = Document.parseHTMLUnsafe(html);
    const main = fetcheddoc.getElementsByTagName('main')[0];
    container.appendChild(main);
    })

parseHTMLUnsafe поддерживается в Chrome и Edge 124, Safari 17.4 и Firefox 123.

Если вы не используете shadow DOM в своём проекте, это всё равно на одну строку кода меньше. В HTML спецификации говорится:

Создание DOMParser как класса, который нужно создать, а затем вызвать его метод parseFromString, является неудачным историческим артефактом. Если бы мы разрабатывали эту функциональность сегодня, это была бы отдельная функция. Для парсинга HTML современной альтернативой является Document.parseHTMLUnsafe().

Название может смутить, но parseHTMLUnsafe не более "небезопасен", чем .parseFromString. В HTML спецификации оба метода отображают одно и то же предупреждение:

Этот метод не выполняет никакой очистки, удаляющей потенциально опасные элементы и атрибуты, такие как скрипт или атрибуты обработки событий.

Shadow DOM — основная причина существования новой функции, но она может быть использована в качестве общей замены .parseFromString.