using forked Web Component wrapping with vue-cli (@telia/vue-web-component-wrapper-ie11)

babel.config.js (probably irrelevant)

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"]
};

main.js (just a regular wrap call like usual)

import Vue from "vue";
import Component from "./vue-wc-test.vue";
import wrap from "@telia/vue-web-component-wrapper-ie11";
import {
  outerVueWrapper,
  innerVueWrapper,
} from "web-component-vue-wrapper-utils";

Vue.config.productionTip = false;

// ignore the inner/outer-wrapper details
export const CustomElement = wrap(Vue, innerVueWrapper(Component));
export const VueWrapper = outerVueWrapper("vue-wc-test");

window.customElements.define("vue-wc-test", CustomElement);

package.json (look at the missing wc option!)

{
  "name": "vue-wc-test",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --target lib ./src/main.js",
    "build": "vue-cli-service build --target lib ./src/main.js",
    "build:watch": "vue-cli-service build --target lib --watch ./src/main.js",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "lint": "vue-cli-service lint"
  },
  "main": "dist/vue-wc-test.umd.js",
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@babel/plugin-transform-arrow-functions": "^7.8.3",
    "@vue/cli-plugin-babel": "~4.3.0",
    "@vue/cli-plugin-e2e-cypress": "~4.3.0",
    "@vue/cli-plugin-eslint": "~4.3.0",
    "@vue/cli-plugin-unit-jest": "~4.3.0",
    "@vue/cli-service": "~4.3.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/test-utils": "1.0.0-beta.31",
    "babel-eslint": "^10.1.0",
    "config-package": "0.0.1",
    "eslint": "^6.7.2",
    "vue-hoc": "^0.4.7",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-vue": "^6.2.2",
    "node-sass": "^4.12.0",
    "prettier": "^1.19.1",
    "sass-loader": "^8.0.2",
    "vue-template-compiler": "^2.6.11",
    "web-component-vue-wrapper-utils": "0.1.0",
    "@telia/vue-web-component-wrapper-ie11": "^1.3.0"
  }
}

vue-wc-test.vue

<template>
  <div class="boxed">
    <p>
      This is the domain of vue-wc-test's Custom Element! Also I was given this
      number by my consumer: {{ consumerCount }}
    </p>
    <p>Cool object is {{ coolObject }} and of type {{ typeof coolObject }}</p>
    <p>Default slots down here:</p>
    <slot></slot>
    <p>
      I am a smart custom element and I like to count too, but a bit slower..
      {{ myCount }}
    </p>
    <div class="harbor">
      <div class="party-boat">
        <p>
          This is the <strong>party</strong>-boat, strictly reserved for
          children named "vip".
        </p>
        <slot name="vip"
          ><em>Noone is partying?! Surely this will never happen.</em></slot
        >
      </div>
      <div class="lame-boat">
        <p>This is the lame-boat for children named "not-vip".</p>
        <slot name="not-vip"
          ><p class="chill">
            Hey, looks like nobody is here, which means I come to the rescue.
            I'm the default content served by the custom element.
          </p></slot
        >
      </div>
    </div>
  </div>
</template>
<script>
// import headerConfig from "config-package/headerConfig";

export default {
  name: "App",
  mounted() {
    const tickCountAndEmit = () => {
      this.myCount++;

      this.$el.dispatchEvent(
        new CustomEvent("vue-wc-test:count", {
          bubbles: true,
          // "composed: true" makes the event bubble through its shadow boundaries
          composed: true,
          detail: {
            count: this.myCount,
          },
        })
      );
    };

    setInterval(tickCountAndEmit, 5000);
    tickCountAndEmit();
  },
  data() {
    return { myCount: 0 };
  },
  props: {
    coolObject: {
      type: Object,
    },
    consumerCount: {
      type: Number,
      default: -1,
    },
  },
};
</script>

<style lang="scss" scoped>
.boxed {
  border: 4px solid blueviolet;
  padding: 5px 20px;
}
.burn {
  color: deeppink;
}
.chill {
  color: teal;
}

.harbor {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.party-boat {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 10px solid limegreen;
  padding: 0 12px;
  animation: party-boat 2s linear infinite;
  background-repeat: no-repeat;
  margin: 50px;
}

@keyframes party-boat {
  0% {
    transform: rotate(0);
  }

  50% {
    transform: rotate(-3deg);
  }

  100% {
    transform: rotate(0);
  }
}

.lame-boat {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 10px solid gray;
  padding: 0 12px;
  animation: lame-boat 6s linear infinite;
  background-repeat: no-repeat;
  margin: 50px;
}

@keyframes lame-boat {
  0% {
    transform: rotate(0);
  }

  50% {
    transform: rotate(-3deg);
  }

  100% {
    transform: rotate(0);
  }
}
</style>

vue.config.js (look how we enable shadowMode!)

function enableShadowCss(config) {
  const configs = [
    config.module.rule("vue").use("vue-loader"),
    config.module
      .rule("css")
      .oneOf("vue-modules")
      .use("vue-style-loader"),
    config.module
      .rule("css")
      .oneOf("vue")
      .use("vue-style-loader"),
    config.module
      .rule("css")
      .oneOf("normal-modules")
      .use("vue-style-loader"),
    config.module
      .rule("css")
      .oneOf("normal")
      .use("vue-style-loader"),
    config.module
      .rule("postcss")
      .oneOf("vue-modules")
      .use("vue-style-loader"),
    config.module
      .rule("postcss")
      .oneOf("vue")
      .use("vue-style-loader"),
    config.module
      .rule("postcss")
      .oneOf("normal-modules")
      .use("vue-style-loader"),
    config.module
      .rule("postcss")
      .oneOf("normal")
      .use("vue-style-loader"),
    config.module
      .rule("scss")
      .oneOf("vue-modules")
      .use("vue-style-loader"),
    config.module
      .rule("scss")
      .oneOf("vue")
      .use("vue-style-loader"),
    config.module
      .rule("scss")
      .oneOf("normal-modules")
      .use("vue-style-loader"),
    config.module
      .rule("scss")
      .oneOf("normal")
      .use("vue-style-loader"),
    config.module
      .rule("sass")
      .oneOf("vue-modules")
      .use("vue-style-loader"),
    config.module
      .rule("sass")
      .oneOf("vue")
      .use("vue-style-loader"),
    config.module
      .rule("sass")
      .oneOf("normal-modules")
      .use("vue-style-loader"),
    config.module
      .rule("sass")
      .oneOf("normal")
      .use("vue-style-loader"),
    config.module
      .rule("less")
      .oneOf("vue-modules")
      .use("vue-style-loader"),
    config.module
      .rule("less")
      .oneOf("vue")
      .use("vue-style-loader"),
    config.module
      .rule("less")
      .oneOf("normal-modules")
      .use("vue-style-loader"),
    config.module
      .rule("less")
      .oneOf("normal")
      .use("vue-style-loader"),
    config.module
      .rule("stylus")
      .oneOf("vue-modules")
      .use("vue-style-loader"),
    config.module
      .rule("stylus")
      .oneOf("vue")
      .use("vue-style-loader"),
    config.module
      .rule("stylus")
      .oneOf("normal-modules")
      .use("vue-style-loader"),
    config.module
      .rule("stylus")
      .oneOf("normal")
      .use("vue-style-loader")
  ];
  configs.forEach(c =>
    c.tap(options => {
      options.shadowMode = true;
      return options;
    })
  );
}

module.exports = {
  css: {
    extract: false
  },
  chainWebpack: config => {
    config.devServer.port(8080);

    config.devtool("source-map");

    // to fix monorepo issues
    config.resolve.symlinks(false);

    enableShadowCss(config);
  }
};