Как получить уровень изоляции для div, аналогичный тому, который обеспечивает iframe?

Question

Итак, у меня есть проект с page.html, который имеет JS и CSS, который может конфликтовать с моим main.html. Я хочу вставить page.html содержимое в main.html без повреждения main.html logi c. iframe в настоящее время делает это для меня, но я хочу, чтобы элементы из main.html иногда зависали над ним, и вот тут я подхожу к проблеме с подходом iframe. Итак, я хочу изолировать div это возможно?

Answer 1

Вам нужно будет применить all: initial к вашему div и all: unset к его потомкам.

#targetDiv {
  all: initial; /* blocking inheritance for all properties */
}
#targetDiv * {
  all: unset; /* allowing inheritance within #mydiv */
}