search

karol-f / vue-custom-element

Vue Custom Element - Web Components' Custom Elements for Vue.js
https://karol-f.github.io/vue-custom-element/
MIT License
1.97k stars 187 forks source link

Linking to fonts in shadow dom #260

Open bts-ncollins opened 2 years ago

bts-ncollins commented 2 years ago

First of all, thanks for this repo, it plugs a hole that Vue has and React doesn't and it's working great for my project.

I've stumbled across one thing, with shadowDom enabled, I'm linking to fonts from Google they don't appear to work. It does the initial request and pulls the css file, but doesn't then get the WOFF so the font doesn't come through. Or in the case of Material Icons, they're rendered as placeholders.

I've tried importing using @import url("") in the scss and also with the <link href="" tag in the Vue file itself.

Any ideas how to get this working? I guess I could hold them locally from an npm package but this doesn't feel right.

Thanks again

karol-f commented 2 years ago

Can You please prepare CodeSandbox (e.g. fork this one - https://codesandbox.io/s/o1fsc)?

allynsweet commented 2 years ago

I encountered the same issue, I resolved it by creating a <link> tag in the created() lifecycle hook of my entry App.vue file, then appending that to the document's <head>:

created() {
    const fonts = document.createElement("link");
    fonts.type = "text/css";
    fonts.rel = "stylesheet";
    fonts.href = "https://fonts.googleapis.com/css2?family=Assistant:wght@500;700&display=swap";
    document.head.appendChild(fonts);
}
SkyGopnik commented 1 year ago

I encountered the same issue, I resolved it by creating a <link> tag in the created() lifecycle hook of my entry App.vue file, then appending that to the document's <head>:

created() {
    const fonts = document.createElement("link");
    fonts.type = "text/css";
    fonts.rel = "stylesheet";
    fonts.href = "https://fonts.googleapis.com/css2?family=Assistant:wght@500;700&display=swap";
    document.head.appendChild(fonts);
}

This really works, thanks.