Внешний шрифт не загружается, когда ссылка загружается изнутри shadowDOM

В начале я хочу сказать, что я знаю, что вопрос похож на:

Как позволить импортированному шрифту / значкам css влиять на элементы в теневом доме?

Это не так и это не помогает.

Проблема: недавно я решил использовать ShadowDOM для инкапсуляции стилей в моем проекте. В самом начале я думал, что это работает, как и ожидалось, но я заметил, что некоторые значки из внешних файлов CSS исчезли. Важно отметить, что эти стили являются внешними и возможности внесения изменений ограничены.

Я подготовил код для демонстрации проблемы (посмотрите на фрагмент ниже).

Кажется, все работает нормально, кроме @font-face

Как видите, HTML, содержащий внешний файл CSS с иконками, вне ShadowDOM работает должным образом. Я также хотел бы использовать его внутри shadowDOM.

Как я могу этого добиться?

ПРИМЕЧАНИЕ. Если вы проверите инструменты разработчика, возникнет проблема с путем CSS на вкладке сети, но это проблема фрагмента SO. Если запустить сниппет локально, то в сети все ок.

const body = document.getElementsByTagName('body')[0];
const wrapper = document.querySelector('.wrapper')

const handleAddToShadowClick = (param) => {
  const host = document.querySelector('#shadowHost');
  if(param === 'insideShadow') {
    const shadowRoot = host.attachShadow({mode: 'open'});
     shadowRoot.innerHTML = firstComponent
  } else {
    const shadowRoot = host;
    wrapper !== null ? body.removeChild(wrapper): '' 
    shadowRoot.innerHTML = firstComponent
  }
}

const firstComponent = `
<div class="wrapper">
  <div class="icon login">Bla bla</div>
  <div style="font-family: testFont;">Sample String od text</div>
  <link rel="stylesheet" href="./style.css" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" integrity="sha384-Bfad6CLCknfcloXFOyFnlgtENryhrpZCe29RTifKEixXQZ38WheV+i/6YWSzkz3V" crossorigin="anonymous">
</div>  
`
.wrapper {
    font-family: agGridBalham;
    background-color: aquamarine;
    color: black;
}

.balham:before {
    content: "\F11F";
}

.login::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900; 
    content: "\f007";
  }
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
      Refresh the page after each button click
    </p>
    <button onclick="handleAddToShadowClick('outside')">Add outside shadow</button>
    <button onclick="handleAddToShadowClick('insideShadow')">Add inside shadow</button>  
<div>
  <div id="shadowHost"> </div> 
</div>
    
    <script src="./script.js"></script>
  </body>
</html>


javascript css icon-fonts shadow-dom font-face
person AdamKniec    schedule 01.06.2020    source источник
comment
На самом деле это действительно дубликат ссылки, которую вы цитировали. И решение, предложенное в принятом вами ответе, такое же. См. также stackoverflow.com/a/47611587/4600982.   -  person Supersharp    schedule 06.06.2020

Ответы (1)


arrow_upward
1
arrow_downward

Поведение, упомянутое в вопросе, является ошибкой, которая была в хроме (она была и в Gecko, тоже не уверена, исправлена ​​она или нет).

Вот ссылка на ошибку, о которой сообщалось на хром, связанный с этой проблемой, которая до сих пор не решена ими. На данный момент я считаю, что это единственный работающий обходной путь.

Проблема в основном связана с областью видимости @font-face. В настоящее время вы не можете использовать шрифты awesome fonts, если они включены только в теневой DOM. Таким образом, чтобы использовать шрифты, шрифты css должны присутствовать как в светлом, так и в теневом DOM. Поэтому вам нужно импортировать шрифт css как внутри теневого, так и светлого купола.

Вот рабочий планкер, который решает вашу проблему.

<html>
  <head>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" integrity="sha384-Bfad6CLCknfcloXFOyFnlgtENryhrpZCe29RTifKEixXQZ38WheV+i/6YWSzkz3V" crossorigin="anonymous">
  </head>

  <body>
      Refresh the page after each button click
    </p>
    <button onclick="handleAddToShadowClick('outside')">Add outside shadow</button>
    <button onclick="handleAddToShadowClick('insideShadow')">Add inside shadow</button>  
    <div>
      <div id="shadowHost"> </div> 
    </div>
    <script src="lib/script.js"></script>
  </body>
</html>

Как вы можете видеть на плункере выше, мы включили великолепный шрифт css как в Light DOM, так и в Shadow Dom. И он работает нормально, как задумано.

person amrender singh    schedule 02.06.2020
comment
Большое спасибо за вашу помощь :) По сути, я хотел бы избежать использования легкого дома. Есть ли возможность использовать шрифт только внутри теневого дома, не включая его в светлый дом? Если нет, есть ли у вас какие-либо ресурсы или статьи, которые могли бы помочь мне понять это с технологической точки зрения? - person AdamKniec; 02.06.2020
comment
@AdamKniec Я обновил ответ. Это ошибка, о которой сообщается в хроме, и до сих пор не решена. можно посмотреть спасибо. - person amrender singh; 02.06.2020