¿Cómo dejar que los css importados tengan efectos en los elementos de la sombra dom?

Di si quiero crear un elemento personalizado usando shadow dom. Algunos elementos en la plantilla tienen nombres de clase especificados en el archivo css vinculado. Ahora quiero dejar que las reglas de CSS tengan efectos en los elementos. Pero no puedo lograr eso debido al límite del estilo sombra dom.

  

DreamLine

var importDoc = document.currentScript.ownerDocument; var proto = Object.create(HTMLElement.prototype, { createdCallback: { value: function() { var t = importDoc.querySelector("#blog-header"); var clone = document.importNode(t.content, true); this.createShadowRoot().appendChild(clone); } } }); document.registerElement("blog-header", {prototype: proto});

Verá, fa-search es una clase definida en el archivo css font-awesome, ¿cómo puedo diseñar el elemento ?

    Para usar una fuente importada (es decir, FontAwesome ) en un DOM sombreado , debe:

    1 ° Declare la fuente

    Primero, incluya el elemento en el documento principal. Declarará una regla CSS @font-face que hará que la fuente esté disponible para todo el texto del documento.

    2 ° Importe la hoja de estilo

    A continuación, importe el mismo archivo con una regla de @import url CSS en el nodo para que los selectores de clases .fa-* disponibles desde el DOM de Shadow:

       
     var importDoc = document.currentScript.ownerDocument; var proto = Object.create(HTMLElement.prototype, { createdCallback: { value: function() { var t = importDoc.querySelector("#blog-header"); var clone = document.importNode(t.content, true); this.createShadowRoot().appendChild(clone); } } }); document.registerElement("blog-header", {prototype: proto}); 
     /* @font-face { font-family: "FontAwesome"; src: url("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome-webfont.woff2?v=4.5.0") format('woff2'); } */