Как оформить полосу прокрутки iframe в vue при использовании реактивной переменной для содержимого ⇐ CSS

[Anonymous]

Я загружаю шаблон электронной почты в свое приложение, используя следующий код:







{{currentEmail?.subject}}





{{currentEmail?.from.name ? currentEmail?.from.name.split(",").slice(0, 2).map((n: any[])=>n[0]).join("") : ""}}




{{currentEmail?.from.name +' '}}




To:


{{ contact.name + ';'}}
{{contact.email_address}}


0" class="cc d-flex my-2 flex-wrap">

Cc:


{{ contact.name + ';'}}
{{contact.email_address}}




{{attachment.file_name.length > 20 ? attachment.file_name.slice(0, 20) + '...' : attachment.file_name}}
{{attachment.file_name}}











По сути, я имитирую почтовый ящик Outlook, поэтому опубликованный мной правый столбец содержит контактную информацию и текст электронного письма. HTML-код электронного письма содержит стили, которые могут повлиять на мой SPA, поэтому вместо этого он вводится через iframe. Мне бы хотелось использовать стиль полос прокрутки моих приложений вместо панелей стилей по умолчанию в iframe, которые очень уродливы и не совпадают. Так могу ли я настроить полосу прокрутки? Или, может быть, есть лучший способ расположить мой CSS для этого гибкого контейнера с правой стороны?
Мой CSS для полосы прокрутки выглядит следующим образом:
/* custom scrollbar */
::-webkit-scrollbar {
width: 20px;
}

::-webkit-scrollbar-track {
background-color: transparent;
}

::-webkit-scrollbar-thumb {
background-color: rgb(var(--v-theme-primaryLighten4));
border-radius: 20px;
border: 6px solid transparent;
background-clip: content-box;
}


Подробнее здесь: https://stackoverflow.com/questions/787 ... ble-for-co