Shadow DOM 导入行为答案

【问题标题】：Shadow DOM import behaviorShadow DOM 导入行为
【发布时间】：2016-10-12 20:24:52
【问题描述】：

我正在学习 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>

【问题讨论】：

标签： javascript html css shadow-dom

【解决方案1】：

对于要定义的导入字体，您必须还在主文档标题中包含 CSS 文件：

<link rel="stylesheet" href="font-awesome.css">

查看this answer on SO 中的工作示例。

【讨论】：