Javascript 如何将CSS框架与LitElement一起使用

我想将CSS框架Bulma与LitElement一起使用。我知道我可以用一个，但是他们说这样做是不好的做法。我还有一个问题，就是我必须将它导入到每个元素中，这感觉不对劲

因此，我将整个Bulma文件内容复制到一个js模块中，但导入后不会应用样式

从'lit element'导入{css}
导出默认css`
@-webkit关键帧{
从{
变换：旋转（0度）；
}
...

将样式作为链接标记导入是可行的，但如上所述，这是一种不好的做法

从'lit element'导入{LitElement，html，css}
导入“./src/table.js”
从“./styles.js”导入样式
类LitApp扩展了LitElement{
构造函数（）{
超级（）
this.tHeader=['status'，'name'，'alias']
此参数。数据=[
['connect'、'john'、'jdoe']，
['disconnect'、'carol'、'carbon']，
['disconnect'、'mike'、'mkan']，
[‘断开连接’、‘蒂娜’、‘蒂巴’]，
]
}
静态获取样式（）{
返回[
样式，//不起作用
css`
：主机{
填充物：5vw；
最小高度：100vh；
}
桌子{
宽度：100%；
}`
] 
}
render（）{
返回html`
但我不能让它工作

很抱歉，如果这有点含糊不清或难以理解，我很难正确表达这个问题。
导入带有链接标记的样式时存在一些问题。这就是为什么这是一种不好的做法：


每次创建元素的实例时，都会创建一个新的样式表。LitElement使用可构造的样式表（如果支持）在所有元素之间共享一个样式表实例
样式表是在元素呈现后加载的，因此可能会出现未设置样式的内容
ShadyCSS polyfill不起作用
href属性相对于主文档
将数千条css规则添加到一个只需要少量css规则的自定义元素中，这不是它的本意。css框架应该由自定义元素分割

也就是说，你可以做你在那里做的事情，把整个Bulma复制到一个js模块中。问题是你必须转义CSS中的“”字符

css`
.面包屑李+李：：之前{
颜色：#b5；
内容：“\0002f”；
}
`

这不会像预期的那样工作，但不会失败，因为模板文本允许您在输入原始字符串时读取它们，而无需处理转义序列。因此没有任何JS错误

摆脱这些，一切都会好起来：

css`
.面包屑李+李：：之前{
颜色：#b5；
内容：“\\0002f”；
}
`
注意，目前浏览器对以下内容的支持非常糟糕。据我所知，默认情况下它只在chrome上运行。Firefox已经实现了它，但您需要。
在《苗条的创造者》一书中，造型问题也被提了出来。在整个讨论中，有一些有趣的地方可以去掉

正如前段时间暗示的，我已经受到怀疑，我对这个问题又做了一次尝试

所以我现在在这个变体中使用采用的样式表

在某些情况下，这似乎是一种合法的方式


“严格使用”；
//定义一些web组件
类WebComponent扩展了HtmleElement{
构造函数（）{
超级（）
this.attachShadow（{mode:'open'}）
this.text=“”
}
connectedCallback（）{
this.shadowRoot.innerHTML=`
p{填充：1rem；背景色：粉红色；}
${this.text}
`
}
}
customElements.define（'web-component'，WebComponent）
//创建构件的两个实例，以查看是否采用了该样式
//都将更改，这意味着它们都引用相同的对象
//记忆中的东西
const webComponentA=document.createElement（'web-component'））
webComponentA.text='cowsay'
const webComponentB=document.createElement（'web-component'））
webComponentB.text='web'
//构造一个空白样式表
const sheet=新的CSSStyleSheet（）；
（异步（）=>{
//获取一些css样式作为文本，如果纯在浏览器中，可能使用fetch
//或通过模块分解器，如汇总和网页包
常量url=https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css'
const response=等待获取（url）
wait sheet.replace（wait response.text（））；
//在两个组件上设置样式并将它们添加到dom中
webComponentA.shadowRoot.adoptedStyleSheets=[sheet]；
webComponentB.shadowRoot.adoptedStyleSheets=[sheet]；
document.body.append（webComponentA、webComponentB）
})（）捕捉（控制台、警告）；
//稍后，清除样式表
//并观察两个组件失去框架样式
setTimeout（（）=>sheet.replaceSync（``），3000）；
我不知道lit元素，但我假设您的问题是这些元素使用阴影DOM？是的，这些是web组件。因此它们使用阴影DOM。web组件不必使用阴影DOM。它们可以，但不是强制性的。Google“可构造样式表”@connexo如果它不使用阴影dom，那么它是一个自定义元素而不是web组件。web组件是一个使用阴影dom的自定义元素。但是，是的，采用的样式表可能是一个解决方案。