Vue: Single default setting for `shadowMode` in the webpack config

Created on 14 Dec 2018  路  2Comments  路  Source: vuejs/vue

What problem does this feature solve?

If you wrap a component with the web-component-wrapper, its styles will be applied to the head of the document, rather than to web-component's shadow DOM. This can be changed by setting every occurrence of shadowMode to true in the webpack config (through vue.config.js). Currently this requires finding and setting about 16 different options.

If these options inherit from a default shadowMode setting, it would be much easier to change the options.

What does the proposed API look like?

a shadowModeDefault variable (initially set to false), from which the shadowMode options can take their value.

Most helpful comment

Repo here: https://github.com/snirp/vue-web-component

I use web-component-wrapper inside main.js for development: ""vue-cli-service serve". The build script does indeed handle building the web component correctly: "vue-cli-service build --target wc --name my-web-component ./src/components/MyWebComponent.vue".

From your comment, I assume there must be a way to achieve the same with vue-cli-serve serve. I will take a second look, and post at the issue at vue-cli if needed. Thanks.

All 2 comments

  1. Please post this to vue-cli's repo instead
  2. Your use case is not quite clear, as the CLI should handle building web components for you and you are not supposed to be using web-component-wrapper yourself. If you believe this is a legit use it'd be better to show a repo of what exactly you are trying to do.

Repo here: https://github.com/snirp/vue-web-component

I use web-component-wrapper inside main.js for development: ""vue-cli-service serve". The build script does indeed handle building the web component correctly: "vue-cli-service build --target wc --name my-web-component ./src/components/MyWebComponent.vue".

From your comment, I assume there must be a way to achieve the same with vue-cli-serve serve. I will take a second look, and post at the issue at vue-cli if needed. Thanks.

Was this page helpful?
0 / 5 - 0 ratings