Сериализация и десериализация тега стиля HTML с помощью CSS

Что я пытаюсь сделать:

  • Сохраните/скопируйте фрагмент HTML в одном месте, вставьте его в другое место и десериализуйте его в аналогичный DOM.

Как мне сделать сериализацию сейчас

  • Вызовите element.outerHTML элемент контейнера
    • Я также пытался использовать new XMLSerializer().serializeToString(element) с тем же результатом

Проблема

Когда я сериализую style узлы, которые содержат CSS, например:

.a > .b {
  color: red
}

Они на самом деле сериализуются, как

.a > .b {
  color: red
}

Который не является допустимым CSS и поэтому не анализируется должным образом.

Проблема с большим знаком — единственная, которую я наблюдаю, но она заставляет задуматься о других потенциальных проблемах с сериализацией.

Вопрос: Как мне сериализовать узлы стилей таким образом, чтобы не нарушать в них CSS?

это то, что я делаю, как я сказал в разделе «Как мне сейчас сделать сериализацию» ?

Stvad 23.04.2022 02:57

вот полный пример сериализованного вывода, дайте мне знать, если вам удастся правильно его отобразить;) gist.github.com/Stvad/40af2951ddfe06134b341424b5a57fe1

Stvad 23.04.2022 03:24
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
1
2
63
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Таким образом, кажется, что это связано с динамическим созданием узла стиля в новом документе.

Самое простое размножение выглядит следующим образом:

const doc = new Document()

const style = doc.createElement('style')
style.textContent = '.a>.b { color: red; }'

console.log(style.outerHTML)

Что дает <style>.a&gt;.b {color:red}</style>

Кажется, что быть частью активно визуализируемого документа/или просто добавляться в документ, а не просто создаваться с его использованием, имеет некоторый побочный эффект на узле стиля, что приводит к его правильной сериализации. Итак, теперь я делаю следующее в качестве обходного пути, который немного уродлив, но работает:

const doc = new DOMParser().parseFromString('<html><head></head><body></body></html>', 'text/html')


const style = doc.createElement('style')
style.textContent = '.a>.b { color: red; }'

doc.body.append(style)

console.log(style.outerHTML)

doc.body.removeChild(style)

Что производит правильно сериализованный <style>.a>.b { color: red; }</style>

Теперь это решает мою проблему, но я все же очень хотел бы понять что здесь происходит более подробно (например, что такое побочный эффект и как/когда он срабатывает), поэтому был бы признателен за комментарии по этому поводу!

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