vue-cli3使用道具创建组件并注入html

Question

使用vue-cli3如何生成独立的Web组件？

我要尝试的是：创建一个需要道具才能启动应用的组件

<div id="app">
   <my-app-needs-id :id="12" />
</div> 

在默认设置中，我无法从html启动组件

以@vue/web-component-wrapper为例，尝试另一种方法，显示here。

<template>
  <div>
    <h1>My Vue Web Component</h1>
    <div>{{ msg }}</div>
  </div>
</template>
<script>
  export default {
    props: ['msg'] 
  }
</script>

import Vue from 'vue';
import wrap from '@vue/web-component-wrapper';
import VueWebComponent from './components/VueWebComponent';

const CustomElement = wrap(Vue, VueWebComponent);

window.customElements.define('my-custom-element', CustomElement);

可以工作，但比起样式方面的问题，我认为范围样式不是目标。