Блог

Главная - Вопросы по программированию - Значки материалов не загружаются в Hyperhtml

Значки материалов не загружаются в Hyperhtml

#css #shadow-dom #hyperhtml

#css #shadow-dom #hyperhtml

Вопрос:

Я использую значки материалов внутри компонентов Hyperhtml. Но даже несмотря на то, что css загружен, значок не загружается в браузере. Вместо значка отображается «3d_rotation».

Это моя реализация. 

     const appIframeRender = hyperHTML.bind(document.querySelector('#iframe_element').attachShadow({mode: 'open'}));
        const main2 = hyperHTML.wire();
    appIframeRender`${[
            cbplugin.CharmListComponent.render(main2)
          ]}`;

    cbplugin.WrapperComponent.render = function (render, data){
        return render`

  <style>
  @import "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css";
  @import "https://fonts.googleapis.com/icon?family=Material Icons";
  @import "https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700"; 

  </style>
  <div>
    <a class='dropdown-trigger card-more-actions' href='#' data-target='dropdown2'>
                <i class="material-icons">
                  3d_rotation
                  </i>
                </a>
  </div>
    }

Итак, я сомневаюсь, возможно ли, что значок материала не поддерживается в Hyper Html. css-значки материалов отображаются в стилях элементов inspect.

Спасибо

Комментарии:

1. Как уже упоминалось в моем репозитории, у hyperHTML нет проблем с CSS или значками материалов, и это доказательство: codepen.io/WebReflection/pen/xeGZEd?editors=0010 Что у вас, вероятно, есть в качестве проблемы, так это тот факт, что вы пытаетесь ввести содержимое непосредственно в iframe, как будто это обычный элемент (это не так), вместо того, чтобы обращаться к его документу. Пока вы не сможете показывать онлайн код с ошибкой во всех узлах, боюсь, вам трудно помочь, независимо от того, где вы просите о такой помощи.

2. На самом деле я исправил эту проблему, импортировав библиотеку значков материалов в родительский компонент, который не использует shadow dom. Это потому, что в shadow dom значки материалов не поддерживаются?

Ответ №1:

Всякий раз, когда вы используете Shadow DOM, вы должны импортировать шрифты в основной документ:

 <html>
<head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material Icons">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700">
</head>
...