title: Web component IE11 with Svelte
body: <p>I'm struggling as I'm trying to adapt webcomponents made with Svelte for IE11. I managed to show the webcomponents in the browser but I did not manage make them fully functional.</p>
  <p>When using <strong>Svelte transitions</strong> I get the following error:</p>
  <p><code>object doesn't support property or method &quot;__shady_native_contains&quot;</code> in the @webcomponents file <code>webcomponents-sd-ce.js</code>.</p>
  <p>I'm using webpack with @webcomponents polyfills.</p>
  <p>Here is my courrent webpack configuration:</p>
  <pre><code>const sassCssConfig = {
      test: /\.s[ac]ss$/,
      use: [
          'style-loader', 'css-loader', 'sass-loader'
      ]
  }
  
  const resolveExtensions = {
      alias: {
          svelte: path.resolve('node_modules', 'svelte')
      },
      extensions: [&quot;.mjs&quot;, &quot;.ts&quot;, &quot;.tsx&quot;, &quot;.js&quot;, &quot;.json&quot;, &quot;.svelte&quot;]
  }
  
  module.exports = [{
      entry: ['whatwg-fetch', '@webcomponents/custom-elements', './src/main.ts'],
      mode: 'development',
      output: {
          filename: 'bundle.js',
          path: path.join(__dirname, 'build'),
          libraryTarget: &quot;window&quot;,
      },
      externals: [
          {
              bc: 'bc',
              kendo: 'kendo',
              jquery: 'jQuery'
          }
      ],
      target: ['web', 'es5'],
      devtool: 'source-map',
      module: {
          rules: [
              {
                  test: /(\.m?js?$)|(\.svelte$)|(\.ts$)/,
                  exclude:   /\bcore-js\b/,
                  resolve: {
                      fullySpecified: false
                  },
                  use: [
                      // Then babel
                      {
                          loader: 'babel-loader',
                         
                          options: {
                              presets: [
                                  [
                                      &quot;@babel/preset-env&quot;,
                                      {
                                          targets: {
                                              browsers: [&quot;ie &gt;= 10&quot;]
                                          },
                                          useBuiltIns: &quot;usage&quot;,
                                          corejs: 3
                                      } // or whatever your project requires
                                  ],
                                  &quot;@babel/preset-typescript&quot;,
                              ],
                              plugins: [
                                  // plugin-proposal-decorators is only needed if you're using experimental decorators in TypeScript
                                  // [&quot;@babel/plugin-proposal-decorators&quot;, { legacy: true }],
                                  // [&quot;@babel/plugin-proposal-class-properties&quot;, { loose: true }],
                                  ['@babel/plugin-transform-typescript', { &quot;allowNamespaces&quot;: true }],
                                   [&quot;@babel/plugin-transform-runtime&quot;, { regenerator: true }]
                              ],
                              sourceType: 'unambiguous'
                          }
                      } 
                  ],
              },
              {
                  test: /\.svelte$/,
                  exclude: /node_modules/,
                  
                  use: {
                      loader: 'svelte-loader',
                      options: {
                          customElement: true,
                          emitCss: false,
                          preprocess: require('svelte-preprocess')({})
                      },
                  }
              },
              sassCssConfig
          ],
      },
      resolve: resolveExtensions,
      plugins: [
          new CopyWebpackPlugin(
              {
                  patterns: [
                      {
                          context: 'node_modules/@webcomponents/webcomponentsjs',
                          from: '**/*.js',
                          to: '.'
                      }
                  ]
  
              }
          )
  
      ]
  },
  
  ]
  
  </code></pre>
  <p>In my html file I have the following setup:</p>
  <pre><code>&lt;script src=&quot;//cdn.polyfill.io/v2/polyfill.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;~/Scripts/svelte-webpack/build/webcomponents-loader.js&quot;&gt;&lt;/script&gt;
  &lt;script&gt;
    if (!window.customElements) { document.write('&lt;!--'); }
  &lt;/script&gt;
  
  &lt;script src=&quot;~/Scripts/svelte-webpack/build/custom-elements-es5-adapter.js&quot;&gt;&lt;/script&gt;
  &lt;!-- ! DO NOT REMOVE THIS COMMENT, WE NEED ITS CLOSING MARKER --&gt;
  
  &lt;script src=&quot;~/Scripts/svelte-webpack/build/bundle.js&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p>As as side note, in main.ts I include the following for core-js / regenerator-runtime / promise-polyfill</p>
  <pre><code>import &quot;core-js/stable&quot;;
  import &quot;regenerator-runtime/runtime&quot;;
  import 'promise-polyfill/src/polyfill';
  </code></pre>
  <p>Has anyone encountered anything similar? I'm grateful for any help I can get on this subject.</p>