CSS 没有完全应用到使用 <slot> 的 shadow DOM答案

【问题标题】：CSS is not fully applying on a shadow DOM using <slot>CSS 没有完全应用到使用 <slot> 的 shadow DOM
【发布时间】：2018-08-02 17:24:48
【问题描述】：

我有以下简单的组件：

用法：

<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适用于静态文本和shadow DOM，而背景颜色样式只适用于静态文本？

【问题讨论】：

标签： css web-component shadow-dom

【解决方案1】：

CCS 属性color 的默认值为inherit。

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 属性定义为inline-block 或block（= 助焊剂含量）。

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

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

【讨论】：