Vue3自定义Web Components中加载Google字体与Material图标方案咨询

问题 #

用Vue3开发通用自定义Web Components时，受Shadow Root隔离特性影响，Google字体和Material图标的导入遇到了麻烦。当前做法是在组件注册时往宿主页面的<head>里插入样式表链接，虽然能正常运行，但破坏了Web组件的封装性，还可能干扰宿主应用的样式。

现有实现代码：

import { defineCustomElement as VueDefineCustomElement, h, getCurrentInstance } from 'vue';

export function register() {
  // Icons
  loadStylesheet(
    'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200'
  );
  // Fonts
  loadStylesheet('https://fonts.googleapis.com/css2?family=Lato:wght@400;500;600;700&display=swap');

  // components
  customElements.define('comp', defineCustomElement(comp1));

  ...
}

export const defineCustomElement = (component) => {
  ...

  return VueDefineCustomElement({
    setup() {
      ... // some data injection
      return () => h(component);
    },
  });
};

// Function to add the stylesheets to applications head tag
function loadStylesheet(href) {
  let existingNode = null; // get existing stylesheet node if it already exists:
  for (let i = 0; i < document.styleSheets.length; i++) {
    if (document.styleSheets[i].href && document.styleSheets[i].href.indexOf(href) > -1) {
      existingNode = document.styleSheets[i].ownerNode;
      break;
    }
  }
  if (existingNode) {
    return;
  } // already exists so don't need to add again

  let linkTag = document.createElement('link');
  linkTag.rel = 'stylesheet';
  linkTag.href = href;
  document.getElementsByTagName('head')[0].appendChild(linkTag);
}

根组件样式设置：

@import url('../index.css');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
:host {
  font-family: Lato, Arial, Helvetica, sans-serif;
}

曾考虑过下载字体、用SVG替换图标，但担心包体积增大，寻求更优解。

可行解决方案 #

1. 将样式表加载到Shadow DOM内部 #

把字体和图标样式表的<link>标签插入到组件的Shadow Root中，而非全局页面的<head>，既保证封装性，又不会影响宿主应用。

修改defineCustomElement的逻辑，在组件挂载时往Shadow Root添加样式链接：

export const defineCustomElement = (component) => {
  return VueDefineCustomElement({
    setup() {
      // 获取当前组件实例及Shadow Root
      const instance = getCurrentInstance();
      onMounted(() => {
        const shadowRoot = instance.shadowRoot;
        // 定义需要加载的样式表
        const stylesheets = [
          'https://fonts.googleapis.com/css2?family=Lato:wght@400;500;600;700&display=swap',
          'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200'
        ];

        stylesheets.forEach(href => {
          // 检查Shadow Root内是否已存在该样式表
          const existingLink = shadowRoot.querySelector(`link[href="${href}"]`);
          if (existingLink) return;

          const linkTag = document.createElement('link');
          linkTag.rel = 'stylesheet';
          linkTag.href = href;
          shadowRoot.appendChild(linkTag);
        });
      });

      ... // 原有数据注入逻辑
      return () => h(component);
    },
  });
};

同时删除全局的loadStylesheet函数和register里的样式加载代码，彻底隔离样式。

2. 提取@font-face声明嵌入组件样式 #

从Google Fonts获取字体的@font-face原始声明，直接写入组件的样式文件中，避免加载外部样式表，同时精准控制加载的字重和格式，减少不必要的资源请求。

步骤：

• 打开Google Fonts对应字体页面，选择需要的字重
• 点击"Embed"，选择"@import"选项，复制下方的CSS内容（包含所有@font-face声明）
• 将这些声明粘贴到组件的<style scoped>（或Shadow DOM样式）中

示例（Lato字体的部分@font-face声明）：

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/lato/v24/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/lato/v24/S6u9w4BMUTPHh6UVSwiPGQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:host {
  font-family: Lato, Arial, Helvetica, sans-serif;
}

这种方式只加载你需要的字重，比加载整个字体样式表更高效，且样式完全封装在Shadow DOM内。

3. Material Icons 按需引入SVG图标 #

放弃使用图标字体，改为按需引入单个SVG图标，既能减少包体积，又能保持封装性。

实现方式：

• 从Material Icons官网下载需要的SVG图标文件，放入项目中
• 创建一个通用的Icon Vue组件，根据传入的名称渲染对应的SVG：

<template>
  <svg :class="iconClass" aria-hidden="true">
    <use :href="`#icon-${name}`"></use>
  </svg>
</template>

<script setup>
import { computed } from 'vue';
const props = defineProps({
  name: { type: String, required: true },
  size: { type: String, default: '24px' }
});

const iconClass = computed(() => ({
  'material-icon': true,
  [`icon-size-${props.size}`]: true
}));
</script>

<style scoped>
.material-icon {
  display: inline-block;
  width: v-bind(size);
  height: v-bind(size);
  fill: currentColor;
}
</style>

• 在组件中按需引入并使用：

<template>
  <Icon name="menu" size="24px" />
</template>

<script setup>
import Icon from './Icon.vue';
// 引入需要的SVG符号（可通过webpack等工具按需打包）
import './icons/menu.svg';
</script>

这种方式只打包用到的图标，体积可控，且图标样式完全受Shadow DOM隔离。

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