看起来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>
@font-face
您要使用的字体的CSS规则必须在主文档中声明,而不是在Shadow DOM中声明。
因为在您的情况下,它是在materialdesignicons.min.css文件中定义的,所以您需要通过global将其加载到主文档中<link>
。
请注意,由于浏览器的缓存,CSS文件不会被加载两次。
或者,您可以将其添加到Web组件的轻型DOM中,也可以只声明@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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句