web-component - 为什么 Lit 不计算 Web 组件中的背景颜色？

Question

我有一些像这样的非常基本的代码

#component file
import { html, LitElement } from 'lit';
import sheet from './css/styles.js';

export class CaiWc extends LitElement {
  static styles = [sheet];

  render() {
    return html`
      <h2>Hello World</h2>
      <div>ITEM 1</div>
      <div>ITEM 2</div>
      <div>ITEM 3</div>
    `;
  }
}

#styles.js
import { css } from 'lit';

export default css`
  :root {
    background-color: #0000cc;
    color: #ff0000;
  }

  :host {
    background-color: #ff0000;
    color: #0000cc;
  }
`;

我不明白为什么没有显示背景颜色。当我的标记对于第三方 Web 组件更加复杂时，该 Web 组件将具有从 :host 设置的背景颜色。如果我读 https://developer.mozilla.org/en-US/docs/Web/CSS/background-color正确的是，背景颜色不会被继承。但是，如果默认是透明的，为什么不填充呢？

Answer 1

默认情况下，自定义元素宿主默认为 display: inline - 这会导致 background-color 不显示。另外设置宽度和高度不会有任何效果。

将 display: block; 或 display: inline-block; 添加到您的 :host 样式中应该可以解决此问题，这些是 Custom Element Best Practices 推荐的.

在这个 Github 问题中也有一些关于此行为的讨论:Should shadow host have display: block by default。以及围绕解决此问题的后续讨论:Provide a lightweight mechanism to add styles to a custom element。