Web Component中template内link标签致Google Font图标无法渲染

问题分析 #

你遇到的问题确实和Shadow DOM的跨域资源加载机制有关，你的实现存在一处关键遗漏：加载Google Fonts样式表的<link>标签缺少crossorigin属性，导致浏览器因跨域权限限制无法加载字体文件，进而使图标无法渲染。

修正后的模板代码 #

将模板中加载样式表的<link>标签添加crossorigin属性即可解决：

<template id="x-widget-template">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <!-- 添加crossorigin属性 -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,300,0,0" crossorigin />

    <style>
    /* 你的组件样式 */
    </style>

    <div>
        ...
        <span class="material-symbols-rounded">
            priority_high
        </span>
        ...
    </div>
</template>

原因说明 #

Google Fonts的字体文件托管在fonts.gstatic.com域名下，属于跨域资源。当在Shadow DOM内部加载引用这类资源的样式表时，必须为<link rel="stylesheet">标签添加crossorigin属性，否则浏览器会根据同源策略拒绝加载字体文件，导致图标无法正常渲染。

修正后，样式表和字体资源会在组件首次实例化时被加载（浏览器会自动缓存），后续组件实例不会重复发起请求，同时完美保持了Shadow DOM的样式隔离特性，无需将<link>标签移至文档head中。

内容的提问来源于stack exchange，提问作者Harry Stuart