Javascript 在web组件中使用外部CSS链接引用_Javascript_Css_Web Component

Javascript 在web组件中使用外部CSS链接引用

javascript css

Javascript 在web组件中使用外部CSS链接引用,javascript,css,web-component,Javascript,Css,Web Component,我试图在自定义web组件中使用CDN中的Bulma，但它似乎不起作用我的html中有以下内容： <!DOCTYPE html> <html lang="en"> <head> <title>hello</title> <meta charset="utf-8"> </head> <body> <my-element></my-

我试图在自定义web组件中使用CDN中的Bulma，但它似乎不起作用

我的html中有以下内容：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>hello</title>
  <meta charset="utf-8">
</head>
<body>
    <my-element></my-element>
    <script src="index.js"></script>

</body>
</html>

值得注意的是，我正在尝试使用这种方法，这样我就可以以相同的方式设计多个自定义web组件的样式，而无需多次导入样式表

谢谢

我的方法是对所有组件使用一个实例，如下所示：

import bulmaStyles from'https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css'；
const bulmaCSS=新的CSSS样式表；
鳞茎；鳞茎；
导出类样式{
静态get bulma（）{return bulmaCSS}
}

然后，在组件中导入此类

从'path/to/Styles.js'导入{Styles}；
类MyElement扩展了HtmleElement{
构造函数（）{
超级（）；
//并在创建阴影DOM后在构造函数中使用它
this.attachShadow（{mode:'open'}）
this.shadowRoot.adoptedStylesheets=[Styles.bulma]；
}
}

为了能够

将样式表的CSS导入到变量中，您需要构建堆栈来支持它。Webpack支持它，例如借助Webpack原始加载程序

如果你没有捆绑你的代码，你将不得不等待CSS模块，或者从DOM中获取样式。
你在Devtools的网络选项卡中有任何Cors错误吗？@zergski-没有Cors错误，但我刚刚意识到我得到了一个相关的警告，我已经添加到了这个问题中。我认为@import
规则不能动态使用，您可以通过将
附加到文档中来添加样式表。另外，您应该在构造函数中而不是在connectedCallback中创建影子DOM，因为后者可以多次调用（例如，在DOM中添加或移动元素时）。const shadowRoot
此变量是不必要的。shadowRoot始终可用于位于this.shadowRoot
的实例。我收到以下错误：加载模块脚本失败：服务器使用非JavaScript MIME类型“text/css”进行响应。根据HTML规范对模块脚本执行严格的MIME类型检查。我尝试通过在Styles.jsstatic get bulma（）{…}
函数中返回fetch
来解决此错误，然后使用bulbmaCSS.replaceSync（bulmaStyles）
应用返回的CSS。我可以在我的组件构造函数中看到样式，但我附加到自定义元素的子元素没有采用该样式。如前所述，在CSS模块进入规范和浏览器之前，您需要一个类似webpack的构建堆栈以及原始加载程序
，以便能够将CSS导入Javascript变量。只需重复检查，我没有看到提到浏览器；你知道adoptyedStyleSheets在Firefox和Safari中还不能工作吗@Danny的365CSI'Engelman Firefox现在支持在标志后面构建样式表。在about:config
中，将layout.css.constructable stylesheets.enabled
设置为true。
const sheet = new CSSStyleSheet()

sheet.replace('@import url("https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css")');

class MyElement extends HTMLElement {
    connectedCallback(){
        let that = this
        let id = Math.random()
        this.id = id

        const shadowRoot = this.attachShadow({ mode: 'open' })
        shadowRoot.adoptedStyleSheets = [sheet]

        let child = document.createElement('button')
        child.classList.add("button")
        child.innerText = id

        child.id = count

        shadowRoot.appendChild(child)

        this.addEventListener('click', e => {
            e.target
            console.log(that.id)
            that.remove()
        })
    }
}

if(!customElements.get('my-element')){
    customElements.define('my-element', MyElement)
}

let count = Math.floor(Math.random() * 10) + 1
for(i = 0; i <= count; i++){
    let el = document.createElement('my-element')
    document.body.appendChild(el)
}

index.js:6 @import rules are not allowed here. See https://github.com/WICG/construct-stylesheets/issues/119#issuecomment-588352418.