为什么 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

在这个 Github 问题中也有一些关于此行为的讨论：影子主机应该display: block默认具有. 以及围绕解决此问题的后续讨论：提供一种轻量级机制来向自定义元素添加样式。