light DOM元素移入shadow DOM样式丢失，getComputedStyle赋值失效但getPropertyValue取值正常

问题原因说明 #

1. 控制台打印getComputedStyle返回值为空的原因 #

getComputedStyle返回的CSSStyleDeclaration是懒加载的浏览器代理对象，不会预先将所有CSS属性的计算值填充到对象的可枚举属性中。你的代码在打印该对象后执行了card.remove()销毁了原DOM节点，后续你在控制台展开打印结果时，代理对象已经无法从已销毁的节点上读取样式值，因此展示为空。
而你在删除节点前调用getPropertyValue时原节点仍然存在，因此可以正常读取到正确的样式值。

2. 直接赋值style = getComputedStyle(elem)不生效的原因 #

element.style属性仅支持接收合法的CSS样式字符串作为赋值内容，你传入CSSStyleDeclaration对象时，浏览器会自动将对象转为字符串[object CSSStyleDeclaration]，这不属于合法CSS规则，因此不会生效。
同时根据规范，getComputedStyle返回的CSSStyleDeclaration对象是只读的，设计目的仅为读取元素计算样式，本身就不支持直接用于跨元素样式赋值。

正确实现方案 #

你需要遍历getComputedStyle返回的所有有效CSS属性，逐个写入克隆元素的样式中，修改后的代码如下：

<style>
  .card {
    color: yellow;
    background: green;
  }
</style>

<my-element>
  <div class="card">从light DOM映射到shadow DOM的内容</div>
</my-element>

<script>
  customElements.define("my-element", class extends HTMLElement {
    constructor(){
        super().attachShadow({mode:"open"}).innerHTML = ``;
    }
    connectedCallback() {
      setTimeout(() => {
        let card = this.children[0];
        let clonedCard = card.cloneNode(true);
        this.shadowRoot.appendChild(clonedCard);
        let computedStyle = window.getComputedStyle(card);
        // 遍历所有计算样式逐个赋值
        for (let prop of computedStyle) {
          clonedCard.style.setProperty(prop, computedStyle.getPropertyValue(prop));
        }
        card.remove();
      })
    }
  })
</script>

内容的提问来源于stack exchange，提问作者ADSmith-0