Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Vue-Material and Web Component #2364

Open
F0lamie opened this issue Jun 20, 2022 · 1 comment
Open

Vue-Material and Web Component #2364

F0lamie opened this issue Jun 20, 2022 · 1 comment

Comments

@F0lamie
Copy link

F0lamie commented Jun 20, 2022 •
edited
Loading

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:
2022-06-20 15_44_20-dsd-planning

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.
2022-06-20 15_41_08-dsd-planning-component demo

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 <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>
@huffypiet
Copy link
Contributor

you could try wrapping md-datepicker component into an extra

to see if this works for you

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@huffypiet @F0lamie