在 web 组件 shadowDOM 中使用引导程序

Question

在使用 LitElement 的 Web 组件/shadowDOM 应用程序中使用大型 css 库（如引导程序）的最简单方法是什么？
尝试了以下方法：

1. 在组件中使用链接标签。有效，但会创建 FOUC（无样式内容的闪存）。
2. 将所有内容渲染到 Light DOM（我正在使用 LitElement，它们有一个 createRenderRoot() 覆盖。也可以，但随着应用程序变得越来越复杂，维护组件文档隔离会很好。

寻找在此设置中使用 boostrap 的最简单方法。

Answer 1

LitElement 推荐的向组件添加样式的方法是通过styles 属性。以这种方式加载外部.css 文件并不简单，但有一些解决方案。

import 方式

如果您对“最简单方式”的定义包括使用转译器或模块捆绑器，那么您可以使用非 js 内联导入来完成以下操作：

import bootstrap from './path/to/bootstrap.css';
// ...

class MyElement extends LitElement {

  static styles = bootstrap; // If your build system already converted
                             // the stylesheet to a CSSResult

  static styles = unsafeCss(bootstrap); // If bootstrap is plain text

}

有许多专门用于此的插件：例如参见babel-plugin-inline-import、rollup-plugin-lit-css、rollup-plugin-postcss-lit、webpack-lit-loader。

包装方式

如果您想保持（几乎）无构建，您可以编写一个简单的postinstall 脚本，该脚本会生成一个导出点亮样式的.js 文件：

// bootstrap.css.js
import {css} from 'lit-element';

export const bootstrap = css`
<bootstrap here>
`;

// my-element.js
import {bootstrap} from './bootstrap.css.js';

class MyElement extends LitElement {
  static styles = bootstrap;
}

关于 Shadow DOM

如果您想使用 Shadow DOM，您必须在需要使用它的每个 组件中导入该库，甚至是嵌套组件。多亏了Constructable Stylesheets，这并不像看起来那么繁琐，Lit 在后台使用了它；将其视为组件加入样式上下文的一种方式，而不是复制相同的样式表。此外，为了让事情井井有条，您可以创建一个“基础”组件来导入引导程序并在需要的地方扩展它：

import bootstrap from 'path/to/bootstrap.css';

export class BaseElement extends LitElement {
  static styles = bootstrap;
}

class MyElement extends BaseElement {
  render() {
    // Bootstrap is ready to use here!
    return html``;
  }
}