-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
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.
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
Vue-Material and Web Component #2364
Comments
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
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.
Steps to reproduce
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:
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:
The text was updated successfully, but these errors were encountered: