在网络组件 shadowDOM 中使用 bootstrap

Question

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

在组件中使用 link 标签。有效，但会创建 FOUC（无样式内容的闪光）。
将所有内容渲染为 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

}

有许多专门用于此的插件：例如参见 [=19=]。

封装方式

如果您想（几乎）保持无构建状态，您可以编写一个简单的 postinstall 脚本来生成一个 .js 导出 lit-ified 样式的文件：

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

关于阴影DOM

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

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

在网络组件 shadowDOM 中使用 bootstrap

Using bootstrap in web components shadowDOM

css

web-component

shadow-dom

bootstrap-4

lit-element