Jam*_*sgt 5 web-component css-import native-web-component material-design-icons
看起来 mdi 无法在 Web 组件内工作，或者我错过了什么？
我想开发一个封装其依赖项的 Web 组件，将链接添加到父文档是可行的，但它违反了初衷。
<html>
<body>
<x-webcomponent></x-webcomponent>
<script>
customElements.define(
"x-webcomponent",
class extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" });
this.shadowRoot.innerHTML = `
<style>@import url('https://cdn.materialdesignicons.com/4.9.95/css/materialdesignicons.min.css');</style>
<span class="mdi mdi-home"></span>
`;
}
}
);
</script>
</body>
</html>
您要使用的字体的CSS @font-faceat 规则必须在主文档中声明，而不是在 Shadow DOM 中。
因为在您的情况下它是在materialdesignicons.min.css文件中定义的，所以您需要通过全局<link>.
请注意，由于浏览器的缓存，CSS 文件不会被加载两次。
或者，您可以将其添加到 Web 组件的 light DOM 中，或者您可以只声明 at@font-face规则（从materialdesignicons.css文件复制）。
这是一个运行示例：
customElements.define( "x-webcomponent", class extends HTMLElement {
constructor() {
super()
this.attachShadow({ mode: "open" })
this.shadowRoot.innerHTML = `
<link rel=stylesheet href=https://cdn.materialdesignicons.com/4.9.95/css/materialdesignicons.min.css>
<span class="mdi mdi-home"></span>`
}
connectedCallback () {
this.innerHTML = `<style>
@font-face {
font-family: "Material Design Icons";
src: url("https://cdn.materialdesignicons.com/4.9.95/fonts/materialdesignicons-webfont.woff?v=4.9.95") format("woff");
}
</style>`
}
} )<x-webcomponent></x-webcomponent>| 归档时间： |
|
| 查看次数： |
5655 次 |
| 最近记录： |