Shadow DOMのインポート動作

Question

私は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> 

Answer 1

、あなたがしなければならないもは、メイン文書のヘッダー内のCSSファイルが含ま：

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

をthis answer on SOで作業例を参照してください。