getComputedStyle()什么也不返回，但是getComputedStyle().getPropertyValue()按预期返回

Question

我试图将一个元素从轻型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()返回正确的值。我肯定我错过了一些显而易见的东西，因为我在任何地方都找不到关于这件事的另一篇文章。

如能提供任何帮助，我们将不胜感激。

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

​

<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>

​

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

• 来自getComputedStyle的对象是只读，应该用于检查元素的样式，包括由元素或外部样式表设置的样式。
• element.style对象应该用于在该元素上设置样式，或者检查通过JavaScript操作或全局样式属性直接添加到它的样式。

Answer 1

来自MDN文档：

Window.getComputedStyle()方法在应用活动样式表并解决这些值可能包含的任何基本计算之后，返回一个包含元素所有CSS属性值的对象。单独的CSS属性值可以通过对象提供的API访问，或者通过用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是只读，因此您不能为它分配任何东西； (我根据注释进行更正；您可以分配一个值，但它将覆盖所有值)
2. 自定义元素的innerHTML是，但在connectedCallback触发时还没有解析connectedCallback。因此，使用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
• *用于嵌套在shadowDOM槽中的子级的时隙CSS选择器
• 在connectedCallback中等待元素升级: FireFox和铬的差异