V-calendar: Missing styles when using VCalendar in a web component

[klickreflex]

Hello,

I'm using vue-web-component wrapper to build web components with Vue.

VCalendar, used inside such a web component is missing its entire styling. Somehow the styles for VCalendar are written to the DOM of the web components host page whereas VCalendar markup is being rendered in the Shadow DOM of my component.

Can I somehow either change where the styles are written or is there a way to explicitly load a stylesheet in my component and disable automatic style injection alltogether? Has anybody ever tried running VCalendar in the Shadow DOM?

Any help is greatly appreciated.

Related: #470

[j6s]

The problem & solution

The fundamental problem here is, that by default the ready-built usm bundle is loaded, which already has the vue-style-loader configuration baked into it. You can get around this, by adding an alias to your own webpack configuration to load v-calendar/src/lib.js instead.

Additional problems

Doing that however makes you run into a couple of additional problems:

1. The library depends on the @ alias defined in vue.config.js to use imports such as @/components/...
2. The main CSS file requires the very specific build environment of v-calendar - many of the configuration files for that environment are not part of the package released on npmjs

Suggested changes to make this use case easier

Here is what could be done to make these problems easier to deal with in the future:

• Exchange the @ alias for relative imports that can also be computed by a foreign webpack environment without special setup
• Build a standalone version of the tailwind-lib.css file for unforseen usecases such as this one.

Short-term solution

In the meantime, here is a way to hackily work around these limitations:

• Add aliases for @/utils and @/components to v-calendar/src/utils and v-calendar/src/components respectively
• Build a standalone tailwind-lib.css (see attached script) and add an alias from @/styles/tailwind-lib.css to that standalone tailwind-lib.css
• Ensure that your webpack loaderconfig has a loader for /\.postcss$/

All in all the following aliases are required:

    'v-calendar$': 'v-calendar/src/lib.js',
    '@/utils': 'v-calendar/src/utils/',
    '@/components': 'v-calendar/src/components/',
    '@/styles/tailwind-lib.css': path.resolve(__dirname, 'src/vendor/v-calendar/tailwind-lib.css'),

To build that standalone tailwind-lib.css I use the following script:

build-c-calendar-styles.sh

#!/bin/bash
#
# Builds the v-calendar styles as a standalone stylesheet and places it in the vendor directory.
# That stylesheet is then picked up by webpack when building the application through an alias.
#

BUILD_DIR="$(pwd)/.v-calendar";
CURRENT_DIR=$(pwd);
BUILD_FILE="$(pwd)/src/vendor/v-calendar/tailwind-lib.css";
POSTCSS_CLI="$(pwd)/node_modules/.bin/postcss"

function run () {
    echo "$ $@";
    eval $@;
}

# Setup
if [ ! -d "$BUILD_DIR" ]; then
    run git clone https://github.com/nathanreyes/v-calendar $BUILD_DIR;
fi;
run cd $BUILD_DIR;
run git checkout v1.0.6;
run yarn;
run yarn add postcss-preset-env;

# Build
run "${POSTCSS_CLI} src/styles/tailwind-lib.css -o ${BUILD_FILE}"

# Reset
run git checkout -- .;
run cd $CURRENT_DIR

To be absolutely clear: I do not recommend using this hacky solution

(Working on the same project as @klickreflex)

[nathanreyes]

So I'm not super up on my web component knowledge, but I did remove the use of @ alias throughout the project. Also, the use of the tailwind styles has been removed and replaced with css variables and styles in single file components.

I'm not sure if this helps for this issue specifically. @j6s Please advise if you are still using this plugin. Per #670 there may still be other Shadow DOM issues.