getComputedStyle() 不返回任何内容，但 getComputedStyle().getPropertyValue() 按预期返回

Question

我正在尝试将一个元素从 light DOM 移动到 shadow DOM，但是当我这样做时，样式不会被复制。我试图通过设置newElement.style = window.getComputedStyle(elem) 来解决这个问题，但这似乎不起作用。样式应该是：

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

但样式不适用，当我打印 getComputedStyle() 以控制台时，我看到的是： all the values are empty

但是，当我像这样循环使用 getComputedStyle() 和 .getPropertyValue() 的属性时：

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

我在控制台中得到的是： the correct values

所以我很困惑为什么getComputedStyle() 不包含这些值，但使用getComputedStyle().getPropertyValue() 会返回正确的值。我确定我遗漏了一些明显的东西，因为我在任何地方都找不到关于此的其他帖子。

任何帮助将不胜感激，在此先感谢。

编辑：我采用了下面 Danny 提供的代码并对其进行了修改，以更好地显示我面临的问题：

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

<my-element>
  <div class="card">lightDOM reflected to shadowDOM</div>
</my-element>

<script>
  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
      })
    }
  })
</script>

请注意，上面的样式并不适用，即使它似乎与文档指定的完全一样： "返回的对象与从元素的 style 属性返回的对象的 CSSStyleDeclaration 类型相同。但是，这两个对象有不同的用途：

• getComputedStyle 中的对象是只读的，应用于检查元素的样式——包括由元素或外部样式表设置的样式。
• 应使用 element.style 对象在该元素上设置样式，或检查通过 JavaScript 操作或全局样式属性直接添加到该元素的样式。” https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle#description

Answer 1

来自 MDN 文档：

Window.getComputedStyle() 方法在应用活动样式表并解析这些值可能包含的任何基本计算之后，返回一个包含元素所有 CSS 属性值的对象。 可以通过对象提供的 API 或使用 CSS 属性名称进行索引来访问各个 CSS 属性值。

上面说需要使用API​​函数，比如getPropertyValue()来获取它的值。

参考：https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

如果你想打印特定元素的所有 CSS 样式，你可以像这样迭代所有属性：

function dumpCSSText(element){
  var s = '';
  var o = getComputedStyle(element);
  for(var i = 0; i < o.length; i++){
    s+=o[i] + ': ' + o.getPropertyValue(o[i])+';\n';
  }
  return s;
}

var e = document.querySelector('.card');
console.log(dumpCSSText(e));

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

<div class="card"></div>

Answer 2

1. 属性style 是只读，因此您不能为其分配任何内容；
   （我根据 cmets 进行纠正；您可以指定一个值，但它 将覆盖所有值）

2. connectedCallback 触发时，自定义元素的 innerHTML尚未解析。因此，使用getComputedStyle 获取其子元素的样式是对不存在元素的操作。

3. 如果您将 lightDOM 内容反射到 shadowDOM 中的 <slot>，则无需复制样式，因为来自 lightDOM 的样式已反射

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

<my-element>
  <div class="card">lightDOM reflected to shadowDOM</div>
</my-element>

<script>
  customElements.define("my-element", class extends HTMLElement {
    constructor(){
        super().attachShadow({mode:"open"}).innerHTML = `<slot></slot>`
    }
    connectedCallback() {
      setTimeout(() => { // wait till innerHTML is parsed
        let card = this.querySelector(".card"); // in lightDOM!
        let style = window.getComputedStyle(card);
        console.log(style.color);      // yellow = rgb:255,255,0
        console.log(style.background); // green  = rgb:0,128,0
      })
    }
  })
</script>

更多阅读：

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot

• ::slotted CSS selector for nested children in shadowDOM slot

• wait for Element Upgrade in connectedCallback: FireFox and Chromium differences