Как разместить html страницу со своими изолированными стилями?

Question

[dev_f]

На своем сайте мне нужно разместить HTML страницу со своими кастомными внутренними стилями.
Производитель отправил 60 HTML страниц и 60 файлов CSS стилей к каждой странице, в этих стилях есть классы которые одинаковые и которые разливаются свойствами.

Мне нужно как-то ограничить подключаемую страницу с ее стилями, так как каждая страница будет находиться в отдельных товарах на моем сайте.

Почему это нужно? Потому как в этих файлах прописаны стили для общих тегов, или есть дублирующиеся классы, которые будут перетирать мои собственные стили для сайта.
Создавать один файл стилей для всех 60 файлов не хотелось бы, я буду сидеть ** часов над этим и сравнивать все различия, переименовывать все что дублируется и т.п.

Подскажите пожалуйста, есть ли "грубая" изоляция стилей, чтобы они не распространялись на всю страницу моего сайта, а применялись только под один конкретный блок в котором будет сидеть эта HTML от производителя?

Comments

[Mors Clamor]

frame?

Answer 1

[Дмитрий Беляев]

Веб-компоненты + shadow DOM
iframe

Answer 2

[iBird Rose]

как то подобное делал. мне помог костыль вида:
1) открываешь стили, которые тебе прислали. копируешь их в scss, если они не scss.
2) все стили оборачиваешь в какой то класс

.my-class {
   *все стили, которые были в файле*
}

3) ну и вставляешь html предварительно тоже обернув в этот класс.

НО тут есть шанс, что уже твои стили сломают эти новодобавленные. но обращение к ним через .my-class это как-то спасет. если нужно приоритет еще выше поднять - можешь обернуть не в class, а в блок с id. и в scss тоже id