CSS没有完全使用<slot>

Question

我有以下简单组件：

用法：

<style>
        my-element {
            --my-bg: green;
            --my-text: red;
        }
</style>

<my-element myStyling>
        <p>Test</p>
</my-element>

组件：

const template = document.createElement('template');
template.innerHTML = `
<style>
:host([myStyling]), :host([myStyling]) {
    background-color: var(--my-bg);
    color: var(--my-text);
}
</style>
<slot></slot>
      Static
`;
class MyElement extends HTMLElement {

    constructor() {
        super();
        // Attach a shadow root to the element.
        let shadowRoot = this.attachShadow({mode: 'open'});
        shadowRoot.appendChild(template.content.cloneNode(true));
    }
}

window.customElements.define('my-element', MyElement);

代码输出以下结果：

为什么color: green既适用于静态文本又适用于阴影DOM，而背景颜色样式仅适用于静态文本？

Answer 1

CCS属性color的默认值为继承。

CSS属性background-color的默认样式是透明（不会从其父元素继承）。

默认的自定义元素display属性为内联（=措词内容），因此不会为其子元素设置背景属性。

在您的代码中，“测试”文本位于<p>元素中，该元素不会继承自:host背景色，而是透明的，因此将显示主页，即white。

有关完整的用例，请参见下面的实时示例。

const template = document.createElement('template')
template.innerHTML = `
  <style>
    :host  {
      background-color: var(--my-bg);
      color: var(--my-text);
    }
  </style>
  <slot></slot>
  <hr>
  Text in Shadow DOM root
  <p>Text in Paragraph in Shadow DOM <span>and child Span</span></p>
  <span>Text in Span in Shadow DOM <p>and child Paragraph</p></span>`
class MyElement extends HTMLElement {
  constructor() {
    super()
    this.attachShadow({mode: 'open'})
        .appendChild(template.content.cloneNode(true))
 }
}
window.customElements.define('my-element', MyElement)

body {
  background-color: lightblue;
}

my-element {
  --my-bg: green;
  --my-text: red;
}

<my-element myStyling>
  Text in Light DOM root
  <p>Text in Paragraph in Light DOM  <span>and Child Span</span></p>
  <span>Text in Span in Light DOM <p>and child Paragraph</p></span>
</my-element>

如果您想将background-color应用于Shadow DOM中的所有子元素，则必须将css规则也应用于*选择器：

:host, * {
   background-color: ...
}

如果要将background-color应用于插入了<slot>的所有轻型DOM元素，则必须添加::slotted(*)伪元素规则：

:host, *, ::slotted(*) {
   background-color: ...
}

替代方法

如果您希望在文本的不同部分之间应用background-color，请不要伪造将display属性定义为内嵌块或阻止（=助焊剂含量）。

因此，所有子代将显示根块background-color。 这是Shadow DOM的完整<style>定义：

:host  {
    display: inline-block ;
    color: var(--my-text);
    background-color: var(--my-bg);
}