Vue web component nested styling

[DerrikMilligan]

Describe the bug

Currently when you import a child component and compile with the lib option for web components the sub-components styling is lost.

I'm posting the bug in vite as I'm fairly confident that this has to do with the @vite/plugin-vue package as I'm using the new web component features described here: https://github.com/vitejs/vite/tree/main/packages/plugin-vue#using-vue-sfcs-as-custom-elements

Reproduction

Here is a repo with a minimal reproduction of the issue: https://github.com/DerrikMilligan/vite-vue-web-component-child-style-issue

Here is what the output looks like. When using the NestedComponent as its own web component it has correct styling, but when it's imported into the HelloWorld component and used it loses all of it's styling

System Info

System:
    OS: Linux 5.4 Linux Mint 20.1 (Ulyssa)
    CPU: (8) x64 Intel(R) Core(TM) i7-4900MQ CPU @ 2.80GHz
    Memory: 2.94 GB / 31.27 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 16.9.1 - ~/.nvm/versions/node/v16.9.1/bin/node
    npm: 7.24.0 - ~/.nvm/versions/node/v16.9.1/bin/npm
  Browsers:
    Chromium: 93.0.4577.63
    Firefox: 92.0

Used Package Manager

npm

Logs

$ npm run build -- --debug

> demo-child-web-component-style@0.0.0 build
> vue-tsc --noEmit && vite build "--debug"

  vite:config bundled config file loaded in 355.96ms +0ms
  vite:config using resolved config: {
  vite:config   build: {
  vite:config     target: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
  vite:config     polyfillModulePreload: true,
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: false,
  vite:config     cssTarget: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
  vite:config     sourcemap: false,
  vite:config     rollupOptions: {},
  vite:config     minify: 'esbuild',
  vite:config     terserOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     manifest: false,
  vite:config     lib: {
  vite:config       entry: './src/main.ts',
  vite:config       name: 'CustomWebComponents',
  vite:config       fileName: [Function: fileName],
  vite:config       formats: [Array]
  vite:config     },
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     reportCompressedSize: true,
  vite:config     chunkSizeWarningLimit: 500,
  vite:config     watch: null,
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] }
  vite:config   },
  vite:config   plugins: [
  vite:config     'alias',
  vite:config     'vite:modulepreload-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html-inline-script-proxy',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite:vue',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:build-html',
  vite:config     'commonjs',
  vite:config     'vite:data-uri',
  vite:config     'rollup-plugin-dynamic-import-variables',
  vite:config     'vite:asset-import-meta-url',
  vite:config     'vite:build-import-analysis',
  vite:config     'vite:esbuild-transpile',
  vite:config     'vite:reporter',
  vite:config     'vite:load-fallback'
  vite:config   ],
  vite:config   define: { __VUE_OPTIONS_API__: true, __VUE_PROD_DEVTOOLS__: false },
  vite:config   ssr: { external: [ 'vue', '@vue/server-renderer' ] },
  vite:config   configFile: '/home/derrik/projects/demo-child-web-component-style/vite.config.ts',
  vite:config   configFileDependencies: [ 'vite.config.ts' ],
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     base: undefined,
  vite:config     mode: undefined,
  vite:config     configFile: undefined,
  vite:config     logLevel: undefined,
  vite:config     clearScreen: undefined,
  vite:config     build: {}
  vite:config   },
  vite:config   root: '/home/derrik/projects/demo-child-web-component-style',
  vite:config   base: '/',
  vite:config   resolve: { dedupe: undefined, alias: [ [Object], [Object] ] },
  vite:config   publicDir: '/home/derrik/projects/demo-child-web-component-style/public',
  vite:config   cacheDir: '/home/derrik/projects/demo-child-web-component-style/node_modules/.vite',
  vite:config   command: 'build',
  vite:config   mode: 'production',
  vite:config   isProduction: true,
  vite:config   server: { fs: { strict: undefined, allow: [Array] } },
  vite:config   env: { BASE_URL: '/', MODE: 'production', DEV: false, PROD: true },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     warnOnce: [Function: warnOnce],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen],
  vite:config     hasErrorLogged: [Function: hasErrorLogged]
  vite:config   },
  vite:config   createResolver: [Function: createResolver],
  vite:config   optimizeDeps: {
  vite:config     esbuildOptions: { keepNames: undefined, preserveSymlinks: undefined }
  vite:config   }
  vite:config } +20ms
vite v2.6.14 building for production...
✓ 12 modules transformed.
dist/custom-web-components.es.js   0.07 KiB / gzip: 0.08 KiB
dist/ChildComponent.ce.js          0.69 KiB / gzip: 0.40 KiB
dist/HelloWorld.ce.js              1.19 KiB / gzip: 0.60 KiB
dist/main.js                       132.08 KiB / gzip: 29.64 KiB

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[hamiller]

Is there any update regarding this?
Testing with vite 2.8.5, problem still exists...

Looks to me as if the styling is not correctly inserted in the built XX.iife.js file:
I can find the missing styling information within the XX.iife.js file however this information is not available in the shadow dom in the browser...
Maybe that could also be a problem of vue... 🤷 ?
Any help here?

[scrakcho]

I have the same problem, discovered over internet a fix "https://stackoverflow.com/questions/69834745/how-to-register-and-use-props-correctly-in-new-vue-custom-element/69844449" but with it slots element are broken.
Some work over it? Some official fix ready?

[tony19]

This is caused by vuejs/core#4662. Not sure if Vite is the right place to fix it.

[haoqunjiang]

Closing as it has already been tracked in the Vue 3 repo.