Vueファイルに対してvue-cli-service build --target wc ./src/App.vueを実行し、作成されたhtmlを開くとコンポーネントの再現が出来ていない箇所がある。

ファイルの概要は以下の通り。

package.jsonの一部

  "dependencies": {
    "vue": "^2.6.10",
    "vue-class-component": "^7.0.2",
    "vue-cool-select": "^2.10.2",
    "vue-property-decorator": "^8.1.0",
    "vuejs-datepicker": "^1.5.4"
  },
  "devDependencies": {
    "@vue/cli-plugin-typescript": "^3.7.0",
    "@vue/cli-service": "^3.7.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^7.1.0",
    "typescript": "^3.4.5",
    "vue-template-compiler": "^2.6.10"
  }

<template>
  <div style>
    <cool-select v-bind:items="privateFieldArray" disable-search>
      <template #item="{item}">
        <div style="display:flex;align-items: center;flex: 1 1 0;">
          <b>{{ item }}</b>
        </div>
      </template>
      <template #selection="{item}">
        <div style="display:flex;align-items: center;flex: 1 1 0;">
          <b>{{ item }}</b>
        </div>
      </template>
    </cool-select>
  </div>
</template>
<script lang="ts">
import VueSelect, { CoolSelect } from 'vue-cool-select';
import { Prop, Vue, Component } from "vue-property-decorator";
Vue.use(VueSelect, {
  theme: 'material-design' // or 'material-design'
});
@Component({
  components: { CoolSelect }
})
export default class TestVue extends Vue {
  async mounted(): Promise<void> {
    console.log(this.privateFieldClass.classFunction())
  }
}
</script>

vue-cool-select というモジュールはhtmlのselect要素の様なリストボックスのUI。
このモジュールの為、vueファイルで


Vue.use(VueSelect, {
  theme: 'material-design' // or 'material-design'
});

という指定をしているが、これがweb componentの外に設置されてしまう。
コンポーネントの外に指定されたcssは、当然コンポーネントの中に適用されない。

web component大好き人間だからこっちに統一しようと思ったけど、これはつらい。何か方法があれば知りたい。

説明用の図を書こうと思ったけど、いいツールが見つからなかったのでパス。