在 web 组件 shadowDOM 中使用 bootstrap

如何解决在 web 组件 shadowDOM 中使用 bootstrap

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

1. 在组件中使用链接标签。有效，但会产生 FOUC（无样式内容的闪光）。
2. 将所有内容渲染到 Light DOM（我使用的是 LitElement，它们有一个 createRenderRoot() 覆盖。同样有效，但随着应用变得越来越复杂，保持组件文档隔离会更好。

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

解决方法

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``;
  }
}