从静态样式中为 `::slotted()` 元素设置样式 属性

Question

我正尝试按照文档中的建议从静态样式 属性 中为组件中的 :slotted 元素设置样式。

static get styles() {
    return [
      css `
        ::slotted(*) {
          color: var(--white, #fff);
          font-family: "Open Sans", sans-serif;
        }
      `,
      // more styles...
     ]
}

但由于某种原因，没有效果。

相反，如果将样式元素中的相同样式定义到 render() 函数中，它会按预期工作

    <style>
        ::slotted(*) {
          color: var(--white, #fff);
          font-family: "Open Sans", sans-serif;
        }
        // more styles...
    </style>

我不确定这是否符合预期（以及为什么）或者这是一个错误。

Answer 1

在我的示例中似乎是一个语法问题。我正在使用样式数组。

这工作正常

static get styles(): CSSResultArray {
    return [ 
      css`
        :host {
          /* styles */
        }

        ::slotted(span) {
          /* styles */
        }
      `,
      css`
        :host([data-type="primary"]) button {
          /* styles */
        }
      `
      ];
  }