I'm attempting to incorporate Bulma from CDN within a custom web component, but it doesn't seem to be functioning properly.
Here is my HTML code:
<!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>
And here is the JavaScript file content:
const sheet = new CSSStyleSheet()
sheet.replace('@import url("https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7d1f0811101c3d4d5344534f">[email protected]</a>/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)
}
In testing, when I use
sheet.replaceSync('button { color: green; }')sheet.replace(...), everything works smoothly. What could be the reason for the external CSS link import not working?
UPDATE: I noticed the following warning in the console:
index.js:6 @import rules are not allowed here. See https://github.com/WICG/construct-stylesheets/issues/119#issuecomment-588352418.
Just to clarify, I am pursuing this method to apply consistent styling across multiple custom web components without the need to import the stylesheet repetitively.
Appreciate any insights or advice!