@import内部HTML web组件中的CSS文件不起作用

Question

我正在用Javascript制作一个web组件，并将其命名为NavBar，新的自定义HTML标记的所有样式都在一个CSS文件中，该文件的名称为"style.css"。我试图以这种方式导入它，但它不起作用：

this.innerHTML = `
<style>
@import "style.css";
</style>
<nav>
...code...
</nav>
`;
}

我能知道为什么这种方式不起作用吗？导入样式表的正确方法是什么吗？谢谢

Answer 1

通常情况下，@import被认为很方便，但不是首选，请参阅所有import VS链接博客。

用途：

• <链接>
• 在STYLE标记中内联CSS
• (获取(也异步(CSS文件并将其写入STYLE标记(

最方便？，因为您是在STYLE标记中编写CSS，而不是在文本字符串中编写，所以
可能需要从<模板>带有内联CSS

<template id="MY-ELEMENT">
<style id=custom></style>
<style>
:host() {
display: inline-block;
}
span{
font-size:3em;
color: var(--color);
}
</style>
<span>
<slot></slot>
</span>
</template>
<script>
customElements.define('my-element', class extends HTMLElement {
connectedCallback() {
this.attachShadow({mode: 'open'})
.append(
document.getElementById(this.nodeName).content.cloneNode(true)
);
const color = `:host{--color:${this.getAttribute("color")}}`;
this.shadowRoot.getElementById("custom").sheet.insertRule(color,0);
}
});
</script>
<my-element color=red>Hello</my-element>
<my-element color=green>World</my-element>

另请参阅：

• 使用自定义HTML元素共享样式
• 如何将CSS文件内容导入Javascript变量
• https://developers.google.com/web/updates/2019/02/constructable-stylesheets

Answer 2

尽管样式表位于NavBar.js文件的同一目录中，但目录导入路径应该不同，并与使用新HTML标记的HTML文件相关：<nav-bar></nav-bar>。例如，当我想在index.html文件中使用导航栏标记时，导入路径应该是：@import "./modules/nav-bar/style.css"这个问题将阻止我在不同的HTML文件中使用新标记。我希望我能找到一个为每个特定文件生成不同路径的解决方案。