从静态样式属性中对`:: slotted（）`元素进行样式设置

Question

我正尝试根据docs中的建议，通过static styles属性为组件中的: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 */
        }
      `
      ];
  }