我在Hyperhtml组件中使用材料图标。但即使css加载了Icon，也没有在浏览器中加载。 “3d_rotation”显示的不是Icon。
这是我的实施。
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中不支持素材图标。材质Icon css显示在inspect元素样式中。
谢谢
无论何时使用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>
...