0

I'm using angular 7 with material. Some of my components uses ShadowDOM ViewEncapsulation and I'm getting error in IE, Edge, and some older versions of Chrome, Firefox.

here's the error description:

Object doesn't support property or method 'attachShadow'

also I've included some default polyfills, but still the same error occurs.

/**
 * This file includes polyfills needed by Angular and is loaded before the app.
 * You can add your own extra polyfills to this file.
 *
 * This file is divided into 2 sections:
 *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 *      file.
 *
 * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
 * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
 * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
 *
 * Learn more in https://angular.io/guide/browser-support
 */

/***************************************************************************************************
 * BROWSER POLYFILLS
 */

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

/**
 * If the application will be indexed by Google Search, the following is required.
 * Googlebot uses a renderer based on Chrome 41.
 * https://developers.google.com/search/docs/guides/rendering
 **/
import 'core-js/es6/array';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js';  // Run `npm install --save classlist.js`.

/** IE10 and IE11 requires the following for the Reflect API. */
import 'core-js/es6/reflect';

/**
 * Web Animations `@angular/platform-browser/animations`
 * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
 * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
 **/
// import 'web-animations-js';  // Run `npm install --save web-animations-js`.

/**
 * By default, zone.js will patch all possible macroTask and DomEvents
 * user can disable parts of macroTask/DomEvents patch by setting following flags
 */

 // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
 // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
 // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames

 /*
 * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
 * with the following flag, it will bypass `zone.js` patch for IE/Edge
 */
// (window as any).__Zone_enable_cross_context_check = true;

/***************************************************************************************************
 * Zone JS is required by default for Angular itself.
 */
import 'zone.js/dist/zone';  // Included with Angular CLI.


/***************************************************************************************************
 * APPLICATION IMPORTS
 */
TylerH
  • 20,799
  • 66
  • 75
  • 101
Khujand Nanocoding
  • 125
  • 1
  • 7
  • IE, Edge and older Firefox [don't have native implementation for ShadowDOM](https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow#Browser_compatibility), you’ve to put another JavaScript dependency in your website by adding a script reference to `WebComponentsJs`: https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs. You can also check [this thread](https://stackoverflow.com/questions/41697490/webcomponents-js-issue-on-ie-and-firefox). – Yu Zhou Jul 10 '19 at 03:15
  • 2
    @AndrewHill by the way i saw answers of "duplicate", and it doesnt helped at all. – Khujand Nanocoding Jul 10 '19 at 07:36

1 Answers1

2

I find that we only need to add ShadyDOM polyfill so that ViewEncapsulation.ShadowDOM will be supported in IE and Edge(I don't have other older browsers so only tested in IE and Edge). I find the link of polyfill from here and I add <script src="https://cdnjs.cloudflare.com/ajax/libs/shadydom/1.1.0/shadydom.min.js"></script> in my index.html, then it works.

In my comment above, adding reference to WebComponentsJs only works in Edge. But adding shadydom polyfill works in both IE and Edge.

Yu Zhou
  • 11,532
  • 1
  • 8
  • 22
  • It removed the error `Object doesn't support property or method 'attachShadow`, however adding shadyDom created some other wonkiness with an `Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?` error. May just have to wait until Edge 76 comes out which will support Shadow Dom. – thienedits Aug 01 '19 at 07:42
  • 1
    This file creates several other issues. Edge is the only reason we are not using ShadowDom. – David Aguirre Nov 12 '19 at 22:48