Smart DOM Insertion (сохранить стили дочернего элемента)

Question

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

В настоящее время я пишу плагин, который принимает определенный элемент (может быть любым узлом DOM) и оборачивает его div. Целью плагина является добавление эффекта «жалюзи» к элементам, который затем можно использовать для раскрытия элемента при прокрутке.

Примечание: Обертывание с div абсолютно необходимо для реализуемой мной функциональности.

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

См. Этот очень простой пример (до и после - обратите внимание на синего блайнда ):

.test {
  display: flex;
  flex-flow: column;
  height: 200px;
  text-align: center;
}

.test:nth-child(1) {
  background: #999;
}

.test:nth-child(2) {
  background: #666;
}

.test > * {
  flex: 0 1 auto;
}

.test h1 {
  margin: auto 0 0;
  color: #fff;
}

.test p {
  margin: 0 0 auto;
  color: #fff;
}

.test-wrapper {
  position: relative;
  width: max-content; /* Fix for example purposes */
  margin: 0 auto; /* Fix for example purposes */
}

.test-wrapper .blind {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: blue;
  opacity: 0.5;
}

<div class="test">
  <h1>Before wrapper inserted</h1>
  <p>Some description</p>
</div>

<div class="test">
  <div class="test-wrapper">
    <div class="blind"></div>
    <h1>After wrapper inserted</h1>
  </div>
  <p>Some description</p>
</div>

Прежде чем ответить, я стараюсь избегать следующих решений:

• «копирование» или «перемещение» стилей (или определенных стилей) от дочернего элемента к родительскому, поскольку это может привести к огромному беспорядку ... Хотя открыт для предложений
• Определение стилей для test-wrapper в CSS сайта, так как test-wrapper является специфическим элементом плагина.

Очевидное и очень простое решение - просто определить стили для обертки вместо дочернего в моем CSS (SCSS). Я ценю, что это может быть единственным способом, но в идеале я хочу избежать этого, поскольку то, что я создаю, является плагином, и я хочу, чтобы HTML / CSS работал с оберткой элемента и без нее.