GetComputedStyle() ничего не возвращает, но getComputedStyle().getPropertyValue() возвращает ожидаемый результат. ⇐ CSS

[Anonymous]

Я пытаюсь переместить элемент из светлого DOM в теневой DOM, но при этом стиль не копируется. Я попытался это исправить, установив newElement.style = window.getComputedStyle(elem), но, похоже, это не сработало. Стили должны быть следующими:

Код: Выделить всё

.card {
color: #ff0;
font-size: 3rem;
font-weight: 600;
border: 3px solid blueviolet;
background-color: greenyellow;
}

но стили не применяются, и когда я печатаю getComputedStyle() для консоли, я вижу следующее:
все значения пусты
Однако, когда я перебираю свойства getComputedStyle() с помощью .getPropertyValue() следующим образом:

Код: Выделить всё

for(let property of style){
console.log(`property: ${property}, value: ${style.getPropertyValue(property)}`);
}

В консоли я получаю:
правильные значения
Поэтому я не понимаю, почему getComputedStyle() не содержит значений, но использование getComputedStyle().getPropertyValue() возвращает правильные значения. Я уверен, что упускаю что-то очевидное, так как нигде не смог найти другого сообщения об этом.
Буду очень признателен за любую помощь, заранее спасибо.РЕДАКТИРОВАТЬ: Я взял код, предоставленный Дэнни ниже, и изменил его, чтобы лучше показать проблему, с которой я столкнулся:
< div class="snippet">

Код: Выделить всё

.card {
color: yellow;
background: green;
}



lightDOM reflected to shadowDOM



customElements.define("my-element", class extends HTMLElement {
constructor(){
super().attachShadow({mode:"open"}).innerHTML = ``;
}
connectedCallback() {
setTimeout(() => { // wait till innerHTML is parsed
let card = this.children[0]; // Get the light DOM Card element
this.shadowRoot.appendChild(card.cloneNode(true)); // Append it to the shadowDOM
let style = window.getComputedStyle(card); // Get style of the Light DOM Card
this.shadowRoot.querySelector('.card').style = style; // Set the ShadowDOM card style equal to the Light DOM Style
console.log(style);
console.log(style.color);      // yellow = rgb:255,255,0
console.log(style.background); // green  = rgb:0,128,0
card.remove(); // Remove the card from the Light DOM to prevent duplication
})
}
})

Обратите внимание, что приведенный выше стиль неприменим, даже если кажется, что он таков. точно так, как указано в документации:
"Возвращаемый объект имеет тот же тип CSSStyleDeclaration, что и объект, возвращаемый из свойства стиля элемента. Однако эти два объекта имеют разные цели:

• Объект из getComputedStyle доступен только для чтения и должен использоваться для проверки стиля элемента, включая те, которые установлены элементом или внешней таблицей стилей.
• Объект element.style следует использовать для установки стилей для этого элемента или для проверки стилей, непосредственно добавленных к нему в результате манипуляций JavaScript или глобального атрибута стиля."
  https://developer.mozilla.org/en-US/doc ... escription

Подробнее здесь: https://stackoverflow.com/questions/688 ... tyvalue-re