IE Support

[ChristianMurphy]

There are now babel plugins and polyfills that can run web components on IE.
https://github.com/github/babel-plugin-transform-custom-element-classes
https://github.com/webcomponents/custom-elements

If an IE compatible version is generated and included in the distribution, it would open the door for Vue CLI to support something like modern mode for target web component.

[pablocattaneo]

Hi @ChristianMurphy !! First of all I really appreciate your effort to bring vue web component into IE11. Thanks for that.

Did you success to solve this issue? I have notice that the problem of the IE11 Support is that vue web components requires ES2015 classes and IE11 not supporte it. I also notice that the pollyfills that you listed in this issue solve the custom element problem but not bring ES2015 classes into IE11.

Kind regards.

[karol-f]

@pablocattaneo I use babel-plugin-transform-custom-element-classes in https://github.com/karol-f/vue-custom-element and it transform ES2015 classes to ES5 during build so even IE9 can use it (with appropriate polyfill).

So @ChristianMurphy comment is definitely valid

[wbern]

@karol-f @ChristianMurphy Can we get that PR merged soon? We'd love to start using this solution.

[addijhaq]

@karol-f

IE9 can use it (with appropriate polyfill).

what polyfills are needed to get the web components working on ie9?

[karol-f]

https://github.com/karol-f/vue-custom-element/blob/master/README.md#optional-polyfill

[addijhaq]

not sure where to put this issue, should i create a new issue here?

installed as dev dependencies
babel-plugin-transform-custom-element-classes
transform-custom-element-classes

went to
babel.config.js

added it as such

  presets: [
    '@vue/app',
  ],
  plugins: [
    'transform-custom-element-classes',
    'transform-es2015-classes',
    [
      'import', {
        libraryName: 'iview',
        libraryDirectory: 'src/components',
      },
    ],
  ],
};

went to vue.config.js

added as such

  transpileDependencies: [
    // can be string or regex
    '@vue/web-component-wrapper',
  ],
};

add polyfill to page rendering custom component

<script src="https://cdnjs.cloudflare.com/ajax/libs/document-register-element/1.4.1/document-register-element.js"></script>

not transpiling custom-web-component from es6 to es5

get this error in console

syntax error
const camelize = str => {...}

this is part of the @vue/custom-web-component dependency. javascript is not being transformed from es6 to es5.

any ideas?

[ChristianMurphy]

@addijhaq the vue web component wrapper is injected in a seperate webpack from the transpiler.
Meaning transpileDependencies has no affect on it.
To work around you need something like: uPortal-Project/uPortal-web-components@37b0f70

Nota Bene: "prebuild": "babel node_modules/@vue/web-component-wrapper/dist/vue-wc-wrapper.js -o node_modules/@vue/web-component-wrapper/dist/vue-wc-wrapper.js" is needed to transpile the dependency before it is injected by webpack.

[addijhaq]

@ChristianMurphy okay so i'm also getting this problem with vue-style-loader where addStyleShadow.js is not being transpiled either. per your prebuild script i added

babel node_modules/vue-style-loader/lib/addStylesShadow.js -o node_modules/vue-style-loader/lib/addStylesShadow.js

and it fixed the issue, however, this is tedious and will most likely be some kind of issue on a case per case basis dependent upon which vue-* modules are being used to compile the web-component.

any reason why this one script is being ignored too?

[ChristianMurphy]

Good to know.

any reason why this one script is being ignored too?

Not sure, I haven't run into this.
It would take some more investigation.

[addijhaq]

@ChristianMurphy what is the order the polyfills should be in the header of the client?

[ChristianMurphy]

I've been using

<script src="https://unpkg.com/core-js-bundle@3.0.0-beta.3"></script>
<script src="https://unpkg.com/regenerator-runtime/runtime.js"></script>
<script src="https://unpkg.com/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script src="https://unpkg.com/vue"></script>

Or put more generically

polyfill the language first, polyfill the platform second, add libraries last.

[addijhaq]

@ChristianMurphy
SCRIPT1003: Expected ':'
vue template in the custom element is being picked up?

name: 'Layout',
  data() {
    return {
      hasSider: false
    };```

[ChristianMurphy]

@addijhaq you'll need to write code in ES5 or use a transiler (E.G. Babel and Bublé)
Object method shorthand, is supported in ES2015+ only, IE cannot parse the code.

[addijhaq]

@ChristianMurphy great! added two babel-plugins to my babel.config.js

plugins: [
    'transform-custom-element-classes',
    'transform-es2015-shorthand-properties',
    'transform-es2015-template-literals',
  ],

fixes the es2015 functions and also any template literals using ${whatever.variable}

however pulling script into ie11 throws no errors, but also loads nothing :( ...

i have security to allow loading of local files as i'm not hosting/serving the .js file

i'm using virtualbox to run version of win7 with ie11.... would this be the issue? .. don't have access to a full windows computer. if you do would you mind if i sent you my js to see if it will run?

fyi, i'm working for a large enterprise and we desperately need ie9-11 compatibility... i might have to jump ship on the cli and use @karol-f's... but i'm uncertain how to use his properly with nested components/css.. ie9-11 is such a headache...

also if it makes any difference i will document how to achieve functionality by updating docs to provide clearer approach to tackling this issue. i'm more than 110% willing to give back and share what i find to help others in this similar situation.