Stencil: ES5 build doesn't work on IE11: attachShadow not supported

[mmatczak]

Stencil version:

 @stencil/[email protected]

I'm submitting a:

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:

After setting the buildEs5 config's property either to true or to prod and executing either npm start or npm run build, the www output target does not work on IE11. It prints: Object doesn't support property or method 'attachShadow'

Expected behavior:

ES5 build is working on IE11

Steps to reproduce:

1. npm init stencil , pick component, give e.g. test-element as a name and confirm.
2. cd test-element and npm install
3. Set the buildEs5 property to prod in stencil.config.ts
4. npm run build
5. Serve the content of the www directory using a web server of your choice
6. Open index.html in IE11. A blank page is displayed. The following error is printed to the console: Object doesn't support property or method 'attachShadow'
   Related code:

// insert any relevant code here
import { Config } from '@stencil/core';

export const config: Config = {
  namespace: 'test-me',
  buildEs5: 'prod',
  outputTargets: [
    {
      type: 'dist',
      esmLoaderPath: '../loader',
    },
    {
      type: 'dist-custom-elements-bundle',
    },
    {
      type: 'docs-readme',
    },
    {
      type: 'www',
      serviceWorker: null, // disable service workers
    },
  ],
};

Other information:

[ham99]

Latest version where this error does not occur is v1.17.3 (at least in my case)

[mmatczak]

I found a workaround. npm init stencil generates components whose shadow flag defaults to true. Once I removed this flag (which then defaults to false) and replaced the :host pseudo-class in CSS respectively the ES5 build started working on IE11.

[mmatczak]

I found a solution: it is needed to explicitly configure that a shadow DOM shim should be added to the build; add to your stencil.config.ts:

buildEs5: true,
extras: {
  shadowDomShim: true
}

[claviska]

Glad you found it and apologies for the delay!

From the changelog, here are all the necessary settings to restore the 1.x defaults:

export const config: Config = {
  buildEs5: 'prod',
  extras: {
    cssVarsShim: true,
    dynamicImportShim: true,
    safari10: true,
    shadowDomShim: true,
  }
};