我正在学习 ShadowDOM 并面临这个奇怪的导入问题。如果没有 shadowDOM,我的图标会出现在屏幕上,但在 shadowDOM 内部它会显示为框。我不确定我做错了什么。请指导我。
这有效。
<style>
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css");
</style>
<i class="fa fa-arrow-left" aria-hidden="true"></i>
这不是。
<div id="root">root</div>
<script>
let root = document.getElementById('root').createShadowRoot();
root.innerHTML = `
<style>
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css");
</style>
<i class="fa fa-arrow-left" aria-hidden="true"></i>
`;
</script>
最佳答案
要定义导入的字体,您必须还在主文档标题中包含 CSS 文件:
<link rel="stylesheet" href="font-awesome.css">
请参阅 this answer on SO 中的工作示例.
关于javascript - Shadow DOM 导入行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40007705/