Vue-Material and Web Component

[F0lamie]

What's the problem

I know there is already an open request for this but there is no update or information ( see #2173 and #2174 ). I am trying to create a Web Component using vue-material but I am having a problem once the component is built.

When I am in dev mode there is no problem, the CSS styles load correctly and everything works fine.

see here:

But once the component build (using this command vue-cli-service build --target wc --inline-vue --name dsd-planning-component), I end up with a part of the CSS that doesn't apply correctly (especially with the DatePicker modal) the rest seems ok.

I have already tried to use vue-material but without success. I followed the steps to install and use vue-material and I even forced the import of css in the style tag.

<template id="x-dsd-planning-component">
    <div id="app">
        <div class="head_row">
            <div class="sub_head_row">
                <p>Planning {{ this.selectedDate }}</p>
                <md-datepicker v-model="selectedDate">
                    <label>Select a date</label>
                </md-datepicker>
            </div>
            <md-button class="md-raised md-primary">Test de bouton</md-button>
        </div>
    </div>
</template>

<script lang="ts">
import VueMaterial from "vue-material"
import "vue-material/dist/vue-material.min.css"
import "vue-material/dist/theme/default.css"

Vue.use(VueMaterial)

@Component({
    components: {
    }
})
export default class dsdPlanningComponent extends Vue {
    ...
}
</script>

<style>
/*@import "../node_modules/vuetify/dist/vuetify.css";*/
@import "vue-material/dist/vue-material.css";
@import "vue-material/dist/theme/default.css";
#app {
    ...
}
...
</style>

Steps to reproduce

1. Create a project using vue-clie and Vue 2 along with Typescript
2. Install vue-material
3. Follow the "template" I wrote above
4. Build the Web Component

Which browser?

"vue": "^2.6.14", "vue-material": "^1.0.0-beta-15", "typescript": "~4.5.5", And I'm on Chrome

What is expected?

I'd like the component once built to work exactly as in dev mode.

What is actually happening?

Using Vuetify, I know that the problem was related to encapsulating the component in a Shadow Dom and that the Vuetify CSS styles were in the and not in the . But now once the component is built, I don't see any