Vue-Material and Web Component
F0lamie opened this issue · 1 comments
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
- Create a project using vue-clie and Vue 2 along with Typescript
- Install vue-material
- Follow the "template" I wrote above
- 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 <style> related to vue-material in the , everything seems to be present within the Shadow Dom, as you can see above, the material button works perfectly and the ripple too.
Quick edit:
Every Vue-Material CSS styles are in the shadow dom, ok,
But apparently the modals seems to be outside the shadow dom, so that's maybe why there are no css styles for him outside.
Update:
Okay, I've managed to find a way to do this that works but I don't think it's the best.
I just add <link rel="stylesheet" href="https://unpkg.com/vue-material/dist/vue-material.min.css"> and <link rel="stylesheet" href="https://unpkg.com/vue-material/dist/theme/default.css"> just before calling my component in the other project.
But it just don't feel right.
So I found something strange with the date picker. Once built, my page looks more or less like this:
<head>
</head>
<body>
<my-web-component>
# shadow root (open)
<app>
<md-datepicker>
</md-datepicker>
</app>
<style>my component styles</style>
<style>vue material styles</style>
</my-web-component>
<!---->
<!---->
</body>But for some obscure reasons the and are outside the web component and therefore outside the shadow root.
And it looks more or less like this:
<head>
</head>
<body>
<my-web-component>
# shadow root (open)
<app>
<md-datepicker>
</md-datepicker>
</app>
<style>my component styles</style>
<style>vue material styles</style>
</my-web-component>
<md-datepicker-overlay></md-datepicker-overlay>
<md-datepicker-dialog></md-datepicker-dialog>
</body>you could try wrapping md-datepicker component into an extra
to see if this works for you