When using inside a we component, styles are not not being applied

[christophrumpel]

Bug Report

Current Behavior
I am using the great carousel in my VUE CLI project and it works fine. But when I export the project to a web component through the VUE CLI build service, then the carousel styles are outside of the web component and therefore not reachable. (see screenshots below)

Input Code and steps to reproduce

• create VUE CLI project
• install Vue Carousel
• export project as web component
• check the demo.html in the dist folder

Expected behavior/code
This is where I am not sure. I would love to see the styles inside the web component but I am not sure if this is possible.

Babel Configuration (.babelrc, package.json, cli command)

babel.config.js

module.exports = {
  presets: [
    '@vue/app'
  ]
}

package.json

{
    "name": "chatbot-widget",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint",
        "tailwind": "tailwind build ./src/assets/css/tailwind.css -c ./tailwind.js -o ./src/assets/css/output.css"
    },
    "dependencies": {
        "axios": "^0.18.0",
        "postcss-import": "^12.0.0",
        "vue": "^2.5.17",
        "vue-carousel": "^0.13.1",
        "vue-scrollto": "^2.13.0",
        "vue2-animate": "^2.1.0"
    },
    "devDependencies": {
        "@vue/cli-plugin-babel": "^3.0.1",
        "@vue/cli-plugin-eslint": "^3.0.1",
        "@vue/cli-service": "^3.0.1",
        "tailwindcss": "^0.6.5",
        "vue-template-compiler": "^2.5.17"
    },
    "eslintConfig": {
        "root": true,
        "env": {
            "node": true
        },
        "extends": [
            "plugin:vue/essential",
            "eslint:recommended"
        ],
        "rules": {
            "no-console": 0
        },
        "parserOptions": {
            "parser": "babel-eslint"
        }
    },
    "browserslist": [
        "> 1%",
        "last 2 versions",
        "not ie <= 8"
    ]
}

Environment

• Babel version(s): [e.g. v6.0.0, v7.0.0-beta.34]
• Node/npm version: Node v10.7.0/npm 6.4.1
• OS: macOS 10.13.6

Possible Solution

Additional context/Screenshots

(Styles are outside of the web component)

(Styles for eg. VueCarousel-inner are not applied)

[quinnlangille]

Hmm I don't have a whole lot of experience with web components, but maybe this has something to do with how vue-cli deals with style scoping? I'll flag this as a bug request, and hopefully someone will address it asap! I'm also doing a bit of work on web components for another project I'm working on, so if I encounter a fix I'll submit a PR asap!

[christophrumpel]

Thanks @quinnlangille !

[quinnlangille]

@christophrumpel in the mean time, seems like there are some possible solutions here: vuejs/vue-web-component-wrapper#12

[christophrumpel]

Ah cool! Thanks, will try that.

[rajeevverma076]

Any update ?