Creating web-component with vitejs

Is your feature request related to a problem? Please describe. Hi i try creating a web-component from the generated sfc file: i run in the following issues: App.vue is not able to have params. Component have no styles Bundler doesnt provide the outputformat

Describe the solution you’d like i would have something like in the vue-cli target webc … i must be possible to set inline styles for using the shadow-dom

Describe alternatives you’ve considered create a own small script in the main.js

import { createApp } from 'vue'
import App from './App.vue';
import './index.scss';
const components = document.getElementsByTagName('my-app');
for(let i = 0; i < components.length;i++) {
  const element = components[i];
  const style = window.getComputedStyle(element);
  const inlineStyle = document.createElement('style');
  inlineStyle.textContent = style;
  element.attachShadow({mode: 'open'});
  
  element.shadowRoot.appendChild(inlineStyle);
  createApp(App).mount(element.shadowRoot);
}

Additional context thanks for this wonderful web dev build tool we from the mercedes-benz.io seamless-web initiative really happy about it. If help is needed here we are happy to support you actively

[OYangXiao]

The library mode is not enough for building a web-component based project, think about this situation:

A project includes multiple custom elements, we want to dev or build the project, so we need to

1. mark some files as web-component entry point ( which is possible by set “build.rollupOptions.input” )
2. configure these web-components to inject css into ShadowRoot ( like the vue-loader shadowMode which is IMPOSSIBLE now because the @vitejs/plugin-vue doesn’t support it yet )

@DrMabuse23 Am I right?

[philippkuehn]

We are also thinking about switching from gridsome to vite for our tiptap docs. We provide many (50+) interactive demos (JS/Vue/React) which should not affected by the styling of the doc pages and vice versa. Shadow DOM would be a great way to encapsulate these demos.