Могут ли ошибки в HTML/CSS теневого DOM повлиять на макет родительского DOM? ⇐ CSS

[Anonymous]

Если пользовательский ввод HTML/CSS отображается в теневом дереве DOM, гарантируется ли, что, если этот контент имеет неверный формат, это не нарушит рендеринг содержимого родительского или легкого DOM?

Может ли он функционировать так же, как фрагмент кода SO в iframe, но исключая, конечно, JS, так что HTML/CSS в противном случае будет изолирован от макета страницы?

Я полагаю, что это в некотором роде противоположно цели веб-компонентов и теневого DOM: они должны быть изолированы от манипуляций со стороны родительских CSS и JS; но я спрашиваю, могут ли ошибки в их содержании повлиять на родителя.

Спасибо.

"use strict"; вар тень = document.querySelector('.shadowHost') .attachShadow({режим: "открыть" }), кнопки = document.querySelectorAll('button.md0'), ta = document.querySelectorAll('textarea'), boxTA = document.querySelector('div.can.evt1'); //const linkElem = document.createElement("LINK"); //linkElem.setAttribute("rel", "таблица стилей"); //linkElem.setAttribute("href", "shadow.css"); константа CSS = []; css[0] = document.createElement("СТИЛЬ"); css[1] = document.createElement("СТИЛЬ"); css[0].textContent = "div.main { высота: 100%; ширина: 100%; переполнение-y: прокрутка;\ размер шрифта: 1,5рем; семейство шрифтов: Verdana}"; let d = document.createElement("DIV"); d.className = "основной"; тень.добавление( // ссылкаЭлем, CSS[0], CSS[1], д ); функция WriteToShadow() { d.innerHTML = ""; css[1].textContent = ta[1].value; d.insertAdjacentHTML('afterbegin', ta[0].value); } функция ToggleTA(evt) { пусть m = mapTA.get(evt.target); boxTA.classList.replace(m.old,m.name); } var mapTA = новая карта( ​​[ [buttons[0], {name: 'html', old: 'css'}], [кнопки[1], {имя: 'css', 'старый': 'html'}] ]); button[0].addEventListener('mousedown', ToggleTA, false); button[1].addEventListener('mousedown', ToggleTA, false); button[2].addEventListener('mousedown', WriteToShadow, false); ta[0].value = "Это короткий абзац.
"; ta[1].value = `p { заполнение: 1,0 бэр 2,0 бэр; цвет фона: белый; }`;
* { размер коробки: граница-коробка; } html { размер шрифта: 62,5%; } дел { заполнение: 0; маржа: 0; } div.flex { дисплей: гибкий; гибкий поток: строка Nowrap; ширина: 100vw; } div.can { положение: относительное; гибкий: 1 1 675 пикселей; цвет фона: RGB(170,180,185); отступ: 1,0рем; высота: 100вх; } текстовая область { дисплей: нет; высота: 100%; ширина: 100%; отступ: 2,0рем; изменение размера: нет; маржа: 0; высота строки: 2; font-family: "исходный код полужирным шрифтом"; размер шрифта: 1,5рем; цвет фона: RGB(170,180,185); граница: 0,1рем, сплошной RGB (220 220 220); } div.can.html > textarea.html, div.can.css > textarea.css { дисплей: блок; } меню { дисплей: гибкий; позиция: абсолютная; верх: 0,5бэр; слева: 1,0 бэр; } .shadowHost { граница: 0,1рем, сплошной RGB (220 220 220); высота: 100%; HTML CSS Рендеринг