Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Missing button icons: @font-face does not work in shadow dom / LitElement

See original GitHub issue

Reduced Test Case

“not reproducible with a link”

I don’t know how to do a webpack example with codepen or jsfiddle and provide some snippets instead from my reduced test case.

package.json

  "scripts": {
    "start": "webpack-dev-server --open"
  },
  "devDependencies": {
    "css-loader": "^4.3.0",
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "@fullcalendar/core": "^5.3.1",
    "@fullcalendar/daygrid": "^5.3.2",
    "lit-element": "^2.4.0"
  }

webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
    },
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './dist',
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: [
                    'css-loader'
                ]
            },
        ],
    },
};

import {LitElement, html, css, unsafeCSS} from 'lit-element';
import {Calendar} from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';

import commonStyles from '@fullcalendar/common/main.css';
import dayGridStyles from '@fullcalendar/daygrid/main.css';

export class AppRoot extends LitElement {

    firstUpdated(_changedProperties) {
        super.firstUpdated(_changedProperties);

        const calendarEl = this.shadowRoot.getElementById('calendar');
        const calendar = new Calendar(calendarEl, {
            plugins: [dayGridPlugin],
        });

        calendar.render();
    }

    static get styles() {
        return [
            unsafeCSS(commonStyles),
            unsafeCSS(dayGridStyles),
            css`
                #calendar {
                    width: 50%;
                }
            `
        ];
    }

    render() {
        return html`
            <div id="calendar"></div>
       `;
    }
}

customElements.define("app-root", AppRoot);

index.html

<!doctype html>
<html>
<head>
    <script src="./main.js" type="module"></script>
</head>
<body>
    <app-root></app-root>
</body>
</html>

Bug Description

I expect to see button icons.

Chrome shows nothing, Firefox shows squares with the unicode point.

I suspect there’s something wrong with loading the @font-face or applying the css. When inspecting the shadow dom element, I can find the @font-face in the styleSheets collection.

Screenshots

Bildschirmfoto von 2020-10-06 14-15-53

What if tried so far

https://github.com/fullcalendar/fullcalendar-example-projects/tree/master/webpack with MiniCssExtractPlugin. Problem: globally loaded css is not “visible” in shadow dom
I understood that there should be no need to manually import css files in v5 (https://fullcalendar.io/blog/2020/02/changes-in-the-upcoming-v5). But I found no other way to deal with it. (Without manually importing styles and adding them to shadow dom, no styles get applied at all.) Maybe the following issue is somewhat similar:
- https://github.com/fullcalendar/fullcalendar-example-projects/tree/master/next
- https://github.com/fullcalendar/fullcalendar/issues/5393
Using css instead of unsafeCSS does not show the icons either.

Issue Analytics

State:
Created 3 years ago
Comments:8

Top GitHub Comments

2reactions

mlaruecommented, Oct 7, 2020

You can also copy the “@font-face” from shadow dom (after adding commonStyles) to the outer scope:

...
        render(template, shadowRoot);

        [...shadowRoot.styleSheets]
            .flatMap(styleSheet => [...styleSheet.cssRules])
            .filter(rule => rule.constructor === CSSFontFaceRule)
            .map(rule => {
                const element = document.createElement("style");
                element.append(rule.cssText);
                this.appendChild(element);
            });
...

But still hacky…

(This works also with LitElement when added to firstUpdated().)

1reaction

mlaruecommented, Oct 7, 2020

Now this works also:

import {render, html} from 'lit-html';

import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';

import commonStyles from '@fullcalendar/common/main.css';
import dayGridStyles from '@fullcalendar/daygrid/main.css';

export class AppRoot extends HTMLElement {

    connectedCallback() {
        const shadowRoot = this.attachShadow({mode: 'open'});

        const fontStyle = html`
            <style>
                @font-face {
                  font-family: 'fcicons';
                  src: url("data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALA...AAAAAAAAA=") format('truetype');
                  font-weight: normal;
                  font-style: normal;
                }            
            </style>
        `;
        render(fontStyle, this);

        const template = html`
            <style>${commonStyles}</style>
            <style>${dayGridStyles}</style>
            <style>
                #calendar {
                    width: 50%;
                }
            </style>
            <div id="calendar"></div>
        `;

        render(template, shadowRoot);

        const calendarEl = shadowRoot.getElementById('calendar');
        const calendar = new Calendar(calendarEl, {
            plugins: [dayGridPlugin],
        });

        calendar.render();
    }

}

customElements.define("app-root", AppRoot);

(shortened data url for better visibility)