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

[v6.0.0-beta.14] VueJS - vue-loader shadowMode #2643

Closed
SergkeiM opened this issue Dec 2, 2020 · 10 comments
Closed

[v6.0.0-beta.14] VueJS - vue-loader shadowMode #2643

SergkeiM opened this issue Dec 2, 2020 · 10 comments
Assignees
@thecrypticace
Labels
enhancement

Comments

@SergkeiM
Copy link

SergkeiM commented Dec 2, 2020 •
edited

  • Laravel Mix Version: v6.0.0-beta.14
  • Node Version (node -v): 12.14.1
  • NPM Version (npm -v): 6.13.4
  • OS: Windows 10

Description:

Hi, I'm trying to implement webcomponents using Vue.

And using SFC, to inject CSS/SCSS into shadow DOM, Based on this comment, Enabling shadowMode: true in vue-loader should append the styles into this.$root.shadowRoot insted of <head>.

Steps To Reproduce:

My Mix config

const mix = require('laravel-mix');

mix.options({
	vue: {
	    shadowMode: true //set shadowMode: true for vue-loader
  	}
});

mix.js('src/index.js', 'dist/webcomponents.js').setPublicPath('dist');

Index.js

import Vue from "vue";
import wrap from "@vue/web-component-wrapper";

import Test from "./Test";

const wrappedElement = wrap(Vue, Test);

window.customElements.define("test-component", wrappedElement);

Test.vue

<template>
  	<div>
    	<h1>{{ title }}</h1>
  	</div>
</template>
<style lang="scss">
	h1{
      	color: var(--h1-color, red);
    }
</style>
<script>
	export default {
	  	props: {
	    	title: {
	      		type: String,
	      		default: "Test"
	    	},
	  	}
	};
</script>

But all styles are still shown in <head>, tried using laravel-mix v6, but still the same, any suggestion?
@thecrypticace thecrypticace self-assigned this Dec 2, 2020
@thecrypticace
Copy link
Collaborator

We should add a way to pass arbitrary options to vue-loader. I'll open a PR for that this evening

@thecrypticace
Copy link
Collaborator

Heh I already did this for Mix v6.

mix.vue({
  options: {
    shadowMode: true,
  },
})

@SergkeiM
Copy link
Author

SergkeiM commented Dec 2, 2020 •
edited

Hi @thecrypticace, thank you for reply.

I tried Mix v6, doesn't work

@SergkeiM
Copy link
Author

SergkeiM commented Dec 2, 2020

Hi @thecrypticace

Laravel Mix Version: v6.0.0-beta.14
vue-loader Version: 15.9.5

Mix Config

const mix = require('laravel-mix');

mix.js('src/index.js', 'dist/webcomponents.js').vue({
	version: 2,
	options: {
	    shadowMode: true
	}
}).setPublicPath('dist');

Same compontent as above, output:

shadow-css

Do I miss something?

@thecrypticace thecrypticace reopened this Dec 3, 2020
@thecrypticace
Copy link
Collaborator

That seems right to me. I'll take another look.

@SergkeiM SergkeiM changed the title VueJS - vue-loader shadowMode [v6.0.0-beta.14] VueJS - vue-loader shadowMode Dec 10, 2020
@SergkeiM
Copy link
Author

SergkeiM commented Dec 29, 2020 •
edited

Hi @thecrypticace

I think is something to do with vue-style-loader based on: this and this this

I tried to override mix config for .scss with:

module: {
  	rules: [
  		{
	        test: /\.s(c|a)ss$/,
	        use: [
	          	{
	            	loader: 'vue-style-loader',
	            	options: {
	              		shadowMode: true
	            	}
	          	},
	          	'css-loader',
  				{
			      	loader: 'sass-loader',
                    options: {
                        sassOptions: {
                            precision: 8,
                            outputStyle: 'expanded',
                            indentedSyntax: true
                        }
                    }
			    }
	        ]
 	 	}
  	]
}

But no success.

I could see that shadow mode is enable for both vue-laoder and vue-style-loader but is still appends to head... :(

Update: Tried to do it directly from vue-cli works fine.

@SergkeiM
Copy link
Author

Hi @thecrypticace

Closing this, downgrading css-loader to v3 fixes this issue see: PR

@SergkeiM SergkeiM mentioned this issue Dec 30, 2020
Closed
@thecrypticace thecrypticace mentioned this issue May 17, 2021
Merged
@thecrypticace thecrypticace reopened this May 17, 2021
@thecrypticace
Copy link
Collaborator

I was playing around with this a while ago myself and couldn't get shadowMode to work properly under any circumstance. Additionally we've had some problems with vue-style-loader necessitating reverting that change.

@SergkeiM
Copy link
Author

Hi @thecrypticace I used this with Vue Webcomponents and works fine: https://github.com/vuejs/vue-web-component-wrapper

@SergkeiM
Copy link
Author

SergkeiM commented Jul 2, 2021

Hi @thecrypticace

With latest release I see you have added, option to choose between vue-style-loader and style-loader v6.0.25

But, by default shadow mode in vue-style-loader is disabled, can we add a posibility to pass options to vue-style-loader

.vue({
	version: 2,
	runtimeOnly: true,
	useVueStyleLoader: true,
	vueStyleLoaderOptions: {
		shadowMode: true
		//or other vue-style-loader options
		// Like manualInject or ssrId  and etc
	}
})

@SergkeiM SergkeiM closed this as not planned Won't fix, can't repro, duplicate, stale Jan 23, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@thecrypticace thecrypticace

Labels
enhancement
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@thecrypticace @SergkeiM