Css 在web组件DOM中使用引导

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

在组件中使用链接标记。工作，但创建FOUC（未格式化内容的flash）

将所有内容渲染到Light DOM（我使用的是LitElement，它们有一个createRenderRoot（）覆盖。也可以工作，但随着应用程序变得更复杂，保持组件文档隔离会更好

---

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

LitElement建议通过属性向组件添加样式。以这种方式加载外部

.css

文件并不简单，但有一些解决方案

导入方式

如果您对“最简单方式”的定义包括使用transpilers或module Bundler，那么您可以使用非js内联导入来完成以下任务：

import bootstrap from./path/to/bootstrap.css'；
// ...
类MyElement扩展了LitElement{
静态样式=引导；//如果生成系统已转换
//将样式表转换为CSSResult
静态样式=未完成（引导）；//如果引导是纯文本
}

有许多插件专用于此：例如，请参见

包装方式

如果您想让事情（几乎）无需构建，您可以编写一个简单的

postinstall

脚本，生成一个

.js

文件，导出以下样式：

//bootstrap.css.js
从'lit element'导入{css}；
export const bootstrap=css`
`;
//my-element.js
从“./bootstrap.css.js”导入{bootstrap}；
类MyElement扩展了LitElement{
静态样式=引导；
}

关于阴影DOM

如果你想使用阴影DOM，你必须在每个需要使用它的组件中导入库，即使是嵌套的组件。这并不像Light under hood使用的库看起来那么繁重；把它看作是组件连接样式上下文的一种方式，而不是复制相同的样式表。另外，为了使事情保持有序，你可以创建导入引导的“基本”组件，并在需要时对其进行扩展：

从'path/to/bootstrap.css'导入引导程序；
导出类BaseElement扩展了LitElement{
静态样式=引导；
}
MyElement类扩展了BaseElement{
render（）{
//引导已准备好在这里使用！
返回html``；
}
}

太棒了-谢谢！我已经在使用webpack，而且还有一个基类，无论如何，基类+绑定器看起来是一个不错的选择。我将尝试一些绑定器并从那里开始。很高兴我能提供帮助！：）太棒了！这似乎有一个缺点——如果您的整个站点没有内置webcomponents，那么这两种方法都将涉及两次加载css文件——一次加载在站点html的样式标记中，一次加载在网页内容中。尽管如此，这比“未格式化内容的闪现”问题要好得多。@MichaelScottCuthbert你说得对。您可以重用组件的相同构造样式表，并将其应用于

文档

，请参见。虽然这对于引导非常有效，但对于导入webfont的我的站点自定义css，它却不起作用，因为

@import

在CSSResult中不可用。但它给了我们很多好的方向。