ios - How to use CustomElement v1 polyfill in a webpack/babel build? -

i'm having trouble getting this webcomponents polyfill + native-shim work right across devices, though webpack.

some background on setup: * webpack2 + babel-6 * app written in es6, transpiling es5 * imports node_module package written in es6, defines/registers customelement used in app

so relevant webpack dev config looks this:

const config = webpackmerge(baseconfig, {   entry: [     'webpack/hot/only-dev-server',     '@webcomponents/custom-elements/src/native-shim',     '@webcomponents/custom-elements',     '<module uses customelements>/dist/src/main',     './src/client',   ],   output: {     path: path.resolve(__dirname, './../dist/assets/'),     filename: 'app.js',   },   module: {     rules: [       {         test: /\.js$/,         loader: 'babel-loader',         options: {           cachedirectory: true,         },         include: [           path.join(node_modules_dir, '<module uses customelements>'),           path.join(__dirname, '../src'),         ],       },     ],   }, ... 

key take aways: * need customelement poly loaded before <module uses customelements> * need <module uses customelements> loaded before app soure * <module uses customelements> es6 we're transpiling ( include in babel-loader).

the above works as-expected in modern es6 browsers ( ie desktop chrome ), however

it not work in older browsers. following error in older browsers, example ios 8:

syntaxerror: unexpected token ')' 

pointing opening anonymous function in native-shim pollyfill:

(() => {   'use strict';    // nothing if `customelements` not exist.   if (!window.customelements) return;    const nativehtmlelement = window.htmlelement;   const nativedefine = window.customelements.define;   const nativeget = window.customelements.get; 

so seems me native-shim need transpiled es5:

        include: [ +         path.join(node_modules_dir, '@webcomponents/custom-elements/src/native-shim'),           path.join(node_modules_dir, '<module uses customelements>'),           path.join(__dirname, '../src'),         ], 

...but doing breaks both chrome , ios 8 following error:

app.js:1 uncaught typeerror: failed construct 'htmlelement': please use 'new' operator, dom object constructor cannot called function.     @ new standinelement (native-shim.js:122)     @ htmldocument.createelement (<anonymous>:1:1545)     @ reactdomcomponent.mountcomponent (reactdomcomponent.js:504)     @ object.mountcomponent (reactreconciler.js:46)     @ reactcompositecomponentwrapper.performinitialmount (reactcompositecomponent.js:371)     @ reactcompositecomponentwrapper.mountcomponent (reactcompositecomponent.js:258)     @ object.mountcomponent (reactreconciler.js:46)     @ object.updatechildren (reactchildreconciler.js:121)     @ reactdomcomponent._reconcilerupdatechildren (reactmultichild.js:208)     @ reactdomcomponent._updatechildren (reactmultichild.js:312) 

.. takes me constructor() line in native-shim:

  window.customelements.define = (tagname, elementclass) => {     const elementproto = elementclass.prototype;     const standinelement = class extends nativehtmlelement {       constructor() { 

---

phew. it's unclear me how include in webpack based build, dependency using customelements es6 ( , needs transpiling).

• transpiling native-shim es5 doesn't work
• using native-shim as-is @ top of bundle entry point doesn't work ios 8, chrome
• not including native-shim breaks both chrome , ios

i'm quite frustrated web components @ point. want use 1 dependency happens built web components. how can work in webpack build, , work across devices? missing obvious here?

my .babelrc config posterity sake (dev config relevant):

{   "presets": [     ["es2015", { "modules": false }],     "react"   ],   "plugins": [     "transform-custom-element-classes",     "transform-object-rest-spread",     "transform-object-assign",     "transform-exponentiation-operator"   ],   "env": {     "test": {       "plugins": [         [ "babel-plugin-webpack-alias", { "config": "./cfg/test.js" } ]       ]     },     "dev": {       "plugins": [         "react-hot-loader/babel",         [ "babel-plugin-webpack-alias", { "config": "./cfg/dev.js" } ]       ]     },     "dist": {       "plugins": [         [ "babel-plugin-webpack-alias", { "config": "./cfg/dist.js" } ],         "transform-react-constant-elements",         "transform-react-remove-prop-types",         "minify-dead-code-elimination",         "minify-constant-folding"       ]     },     "production": {       "plugins": [         [ "babel-plugin-webpack-alias", { "config": "./cfg/server.js" } ],         "transform-react-constant-elements",         "transform-react-remove-prop-types",         "minify-dead-code-elimination",         "minify-constant-folding"       ]     }   } }