Lit-Element：如何设置全局/重置 css

Question

如果我使用 Lit-element，当前设置全局/重置 CSS 的最佳实践是什么？

我已经尝试过 1) 将它们内联到<style>我的文档根目录中，2) 像这个答案一样构建样式表

<script>
  var css = new CSSStyleSheet()
  css.replace('@import url("./style/static/reset.css")')
  document.adoptedStyleSheets = [css]
</script>

但没有任何作用...

编辑 我的reset.css：

blockquote,
body,
dd,
dl,
fieldset,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
legend,
p,
pre,
button,
ul {
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
}

我建立在来自https://open-wc.org/guide/#quickstart的文件夹结构脚手架之上

Answer 1

这不会像您预期的那样工作，因为 LitElement 默认使用 Shadow DOM，旨在防止外部 CSS 影响组件的内部树（反之亦然）

影响 Web 组件内样式的唯一方法是该组件是否使用 CSS 变量，或者是否在 Web 组件内未定义继承样式的属性（有关更多信息，请查看本指南）

但是，如果这是一个完全基于 LitElement 的项目，您可以很容易地在组件之间共享样式并使用它来执行此重置：

1. 首先为你的共享css创建一个js文件（例如reset-css.js）

import { css } from 'lit-element';

export default css `
blockquote,
dd,
dl,
fieldset,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
legend,
p,
pre,
button,
ul {
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
}
`;

2. 然后在您的组件中导入您的样式

import {LitElement, html, css} from 'lit-element';

// include your reset styles
import resetCSS from './reset-css.js';

class MyComponent extends LitElement {

  static get styles() {
    // this is the important part, this array includes our resetted styles and this components styles
    return [
      resetCSS, 
      css`
        h1 {
          color: blue;
        }
      `
    ]; 
  }
  
  render() {
    html`<h1>Something Blue</h1>`
  }
}

就像那样，任何包含共享重置样式的组件都将使用它们