I would like to have this process:

1. I define which APIs (from your polyfills directory) I want to have polyfilled.
2. In my web pages, live feature detection is performed in the browser for those APIs, a custom //cdn.polyfill.io/v1/polyfill.min.js?features= <auto generated> &ua=false&gated=1 URL is generated (tailored to the browser and with ua disabled) and the corresponding bundle is requested and inserted into the page.

Beside having feature detection, another advantage of this approach is that it enables defining a set of APIs which are all already available in modern browsers (e.g. Chrome, Firefox), in which case Step 2 from above generates an empty "features" list, so nothing has to be requested (= we save the HTTP request completely for those browsers).

How this could work:

1. The feature detection code (Step 2) would be auto-generated from the list (Step 1) and inlined in the website's pages. This could be performed via a (Grunt & co.) task.
2. This code would then request the polyfill bundle by document.write()-ing a <script> onto the page (needed to perform a sync request).

Do my thoughts make sense? :)

We have users on Chome 49, since it is the last Chrome that works on Windows XP and Vista. On Chrome 49, reading the Symbol.iterator property of an Array gives undefined if the polyfill is active. For example [][Symbol.iterator]() gives an error. Without the polyfill it works fine.

This issue is here to collect / document our proposals for changes we'd like to make but will need to wait for the 4.0 release because they break backwards compatibility:

Update the features data model

Current model is rather clunky:

features: {
  "default": { flags: ["gated", "always"] }
}

Proposed:

features: {
   "default": { "includeDetect": true, "force": true }
}

Or maybe create a stateful polyfill bundle instance:

const bundle1 = new PolyfillBundleDefinition();
bundle1.addFeature('default', { includeDetect: true });
bundle1.setUserAgent(...);
const outputStream = bundle1.generateBundle();

Turn 'gated' (now includeDetect) on by default

The fact that we don't include feature detects by default is a hangover from the previous service that we inherited. With increasingly complexity in targeting, it is obvious that not all polyfills are targeted perfectly. We should wrap polyfills in a detect by default, and refactor the features model (as above) to allow the flag to be explicitly turned off (note that this also requires a breaking change to the HTTP API)

Make streams the default return format

To help avoid creating large in-memory objects for big bundles

Make 'polyfill' the default value for the unknown option

This appears to match more closely with user expectations.

Force includeDetect to be on if unknown=polyfill

To avoid triggering issues in browsers that we haven't tested on.

I believe the config.json file for this polyfill is incomplete - only includes Edge 15.

Older Chromes, e.g. Chome 49 do not support "isIntersecting", i.e. they fail this check:

'isIntersecting' in window.IntersectionObserverEntry.prototype

If you add always|gated to the polyfill statement it gets included (and works) correctly.

It looks like in IE11, trying to do the following results in an error.

Object.assign({}, window.location)

This pattern is currently used by https://github.com/reach/router for example, breaking our pages in IE11

I've created a JSBin to highlight the issue

https://jsbin.com/yigocowero/1/edit?html,console

Straight forward to reproduce:

1. Go to https://polyfill.io/v2/docs/ in IE11
2. Open up the console
3. Execute the statement Array.from(new Set([1, 1, 2, 2, 3]).values())
4. Observe the exception Unable to get property '0' of undefined or null reference. This seems to be coming from the makeIterator function used to polyfill Set.prototype.values.

Why would you want to make such a call? If you have an array of values, tossing them into a set is an easy way to dedupe them.

Call stack from unminified polyfill.js (v3.23.0):

next - polyfill.js (3358, 12)
parseIterable - polyfill.js (2317, 5)
parseIterableLike - polyfill.js (2463, 3)
from - polyfill.js (2497, 4)

Seems like this might be related to #1293 ?

See https://stackoverflow.com/questions/52390368/array-state-will-be-cached-in-ios-12-safari-is-bug-or-feature for the bug report and analysis.

Here is the patch: https://github.com/fanmingfei/array-reverse-ios12

Hey,

@onishiweb mentioned in his talk that LoadCSS have begun recommending that users start using their CSS rel="preload" polyfill. Unfortunately it's still in working draft - Would such a polyfill be welcomed here, or should we wait until it's a little more stable?

I think there is an issue on the dependencies resolution, enlighten in last Chrome, around Iterator.

See this https://polyfill.io/v2/polyfill.js?features=default,es6,es7 in Chrome 61 for example.

/* Polyfill service v3.21.3
 * For detailed credits and licence information see https://github.com/financial-times/polyfill-service.
 * 
 * UA detected: chrome/61.0.0
 * Features requested: default,es6,es7
 * 
 * - Array.prototype.values, License: MIT (required by "es6")
 * - _Iterator, License: MIT (required by "_ArrayIterator", "Array.prototype.@@iterator", "Array.prototype.values", "es6")
 * - String.prototype.contains, License: CC0 (required by "_ArrayIterator", "Array.prototype.@@iterator", "Array.prototype.values", "es6")
 * - _ArrayIterator, License: MIT (required by "Array.prototype.@@iterator", "Array.prototype.values", "es6") */

...

and this goes on with polyfills for Array.prototype.values, _Iterator, _ArrayIterator, String.prototype.contains

If we look at Array.prototype.values it actually should be polyfilled in Chrome 61, the statement is correct. It depends on Array.prototype.@@iterator and Symbol.iterator which depends on _ArrayIterator

Looking back at the polyfill generated, the header tells us that _Iterator and _ArrayIterator are included because of Array.prototype.values which is a falsy statement.

The entire chain is Array.prototype.values --> Array.prototype.@@iterator --> _ArrayIterator --> _Iterator and this chain should be broke at Array.prototype.@@iterator with Chrome 61 because it supports it.

This make polyfill-service include more useless stuff, and some cannot be gated.

Hi,
It could be useful to cover this as well
I found this package which seems to implement the correct polyfill but it hasn't been updated in a long time.
What's your opinion on that ?

It is related with these issues: andyearnshaw/Intl.js#231
andyearnshaw/Intl.js#256

Version 1.2.5 is the one affected.
My current workaround is to polyfill Intl (v1.2.4) myself.

hi，everyone.
my code like this:

https://jsfiddle.net/5fxhy7np/

It's can't work in IE 8, if not use polyfill, it work well. I find only mouseleave event be effected, other event like mouseover can work rightly. I work for three days, what's reason? what's wrong with me?

window.matchMedia('(min--moz-device-pixel-ratio: 2)')

Fails using the polyfill, works nicely using native matchMedia. I don't think this is expected behaviour.

error is Uncaught SyntaxError: Unexpected identifier(...

Note min--moz-device-pixel-ratio is deprecated.

the polyfill-liabrary will always merge the flags from feature and alias:

a query like this: default|gated,Promise|always , it is same as default|gated,Promise|always|gated. Actually, i do not want the gated flag, i want to overwrite Promise anyway. There is no way to do things like this. I think we should not merge the flags if there is already flags assigned to feature (like, Promise). A PR has been proposed #1754 , could any one have a look? @JakeChampion

My use case is a bit special, as I don't want to depend on the polyfill-service at runtime (my customers are big corporations, so I often need to deal with corporate firewalls based on a domain whitelist, so adding a new external domain to get polyfills is a costly choice for me).

However, I found this service quite useful when needing to find polyfills for some feature instead of doing the curation myself for each feature.
So what I did is loading https://cdn.polyfill.io/v2/polyfill.js?features=Map,Set&flags=gated&ua=android/4.2.0 and downloading the file in my project. But then, in IE 11, I also needed the Number.isNaN polyfill which is used in the Set polyfill (interestingly, the new version of the Map polyfill does not use it anymore in favor of window.isNaN but it still requires it). and so I had to identify this (comparing the list of included dependencies for ie/11.0.0 and android/4.2.0 to get missing pieces.

For my case, it would be great to be able to specify multiple user agents (android/4.2.0 and ie/11.0.0 in this case) and get the polyfills needed for any of these user agents. My use case would be to create a bundle corresponding to my baseline browsers to serve it.
the always flag does not solve my use case, as it would also include dependencies which are supported by all my baseline browsers.

This issue comes up under JScript/WScript on Windows (UA-detected as equivalent to IE7).

Obviously, I understand that, in an ES3 environment, any non-native object property will be enumerable, and unknown non-enumerable properties can't be detected. Therefore, I would expect the output from the Object.keys and Object.getOwnPropertyNames polyfills to be identical. However, that's not the case when I call them against Array.prototype:

/* Polyfill service v3.25.1
 * For detailed credits and licence information see https://github.com/financial-times/polyfill-service.
 * 
 * UA detected: ie/7.0.0
 * Features requested: es5
 */

>>> Object.keys(Array.prototype)
// every,filter,forEach,indexOf,lastIndexOf,map,reduce,reduceRight,some,toString,toLocaleString
>>> Object.getOwnPropertyNames(Array.prototype)
// every,filter,forEach,indexOf,lastIndexOf,map,reduce,reduceRight,some,length

When I do the exact same thing using polyfills from es5-shim & es5-sham instead, both calls return results equivalent to Object.keys above. Does this imply a problem with the polyfill-service implementation of Object.getOwnPropertyNames?

// using es5-shim & es5-sham instead

>>> Object.keys(Array.prototype)
// forEach,map,filter,every,some,reduce,reduceRight,indexOf,lastIndexOf,toString,toLocaleString
>>> Object.getOwnPropertyNames(Array.prototype)
// forEach,map,filter,every,some,reduce,reduceRight,indexOf,lastIndexOf,toString,toLocaleString

When requesting es2017 features in a JScript environment (which is detected as IE7, shown below), I didn't get Object.entries or Object.values as I expected.

It looks like these polyfills are tagged only for IE9 and up. Why are IE7 and IE8 excluded?

https://github.com/Financial-Times/polyfill-service/blob/master/polyfills/Object/entries/config.json (shows "ie": "9 - 14")

/* Polyfill service v3.25.1
 * For detailed credits and licence information see https://github.com/financial-times/polyfill-service.
 *
 * UA detected: ie/7.0.0
 * Features requested: JSON,es2016,es2017,es2018,es5,es6
 *

For some of what I do, I'm stuck working in a JScript environment, which means ES3. Thankfully, I found this project recently, and it's really helped to ease the pain - being able to use things like Object.assign, Object.keys, and Array.prototype.forEach in this environment (without having to write them myself) helps quite a lot!

However, before I could get it to work, I had to make a manual edit to the downloaded polyfill(.min).js file. It turns out that the global-object detection logic at the very end fails in the JScript environment. To fix this, I changed the very end of the final .call to reference the this keyword, instead of a new empty object:

// before
.call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});

// after
.call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || this);

Not sure if this would be a good solution for other environments, but it definitely fixes the problem for my situation.

If it helps, here's the header of the file I got when I linked to your polyfill service from a .wsf file - WScript appears to be detected as IE7, which seems about right.

/* Polyfill service v3.25.1
 * For detailed credits and licence information see https://github.com/financial-times/polyfill-service.
 *
 * UA detected: ie/7.0.0
 * Features requested: JSON,es2016,es2017,es2018,es5,es6
 *

Hi there,

We noticed in IE11 that the polyfill did not return expected y and x properties on IntersectionObserverEntry elements. We think the issue can be seen here. Our understanding is that IntersectionObserverEntry.boundingClientRect should mirror element.getBoundingClientRect mdn article.

For the time being we just altered our source to refer to top and left values (as seem to be identical), but thought you should be aware.

There are many common scenarios for raising issues against the polyfill service. Is your issue one of these?

• Please add polyfill FormData

Take this config for example:

https://cdn.polyfill.io/v2/polyfill.min.js?features=default,es2015,es2016,es2017,fetch&flags=gated&ua=ie/11

Currently, it is served like this:

While the polyfills themselves are minified, the snippets in each polyfills detect.js is copied verbatim, without minification.

Normally, applying Array.from to a JavaScript Map results in an array of [key, value] tuples. However, when using polyfill.io with default features in IE11, it results in an array of undefined.

Here is a repro:

var fooMap = new Map()
  .set("key1", "value1")
  .set("key2", "value2");

var fooKeys = Array.from(fooMap.keys());
console.log("first key", fooKeys[0]); // works fine

var fooPairs = Array.from(fooMap);
console.log("first pair", fooPairs[0]); // in IE11, results in an array of undefined instead of key/value tuples

Please see this CodePen for a live demo of the problem.

It looks like String.prototype.padStart and String.prototype.padEnd should be tagged es2017:

http://2ality.com/2016/02/ecmascript-2017.html (under "String padding")

Array.prototype.includes appears to be the only polyfill that should be tagged es2016:

http://2ality.com/2016/01/ecmascript-2016.html

(I know, probably a very nitpicky detail!)

It would be good if we had a polyfill for performance.getEntriesByName etc. A potential solution could be https://github.com/micro-perf/performance-polyfill .

I think we should remove the performance from requestAnimationFrame's dependencies, because performance.now just adds a broken performance, which does not have measure and many other features. Many applications will check performance and use its once window.performance is not undefined. I think it is better to remove the performance.now from requestAnimationFrame and just use something like inline polyfill.

        var nowOffset = Date.now();

	// use performance api if exist, otherwise use Date.now.
	// Date.now polyfill required.
	var pnow = function () {
		if (global.performance && typeof global.performance.now === 'function') {
			return global.performance.now();
		}
		// fallback
		return Date.now() - nowOffset;
	};

I've included this before my bundle:

<script type='text/javascript' src='https://cdn.polyfill.io/v2/polyfill.min.js?features=default%2Ces6%2Cfetch&#038;ver=4.8.2'></script>

However, IE11 (and lower) crash on an error:

Please add reportValidity polyfill

When grabbing a DOM element using document.getElementById and calling dataset, the returned object is not enumerable. The polyfill is setting the properties enumerable value to the elements enumerable value, but for DOM elements it is undefined. This results in a for-in loop not working. Is there a workaround or can the enumerable value for the properties just be set to true?

This occurs in IE 9 and 10.

Polyfilling AbortController would be great, I know 2 existing shims:

• https://github.com/mo/abortcontroller-polyfill/
• https://github.com/mysticatea/abort-controller

The config for Object.setPrototypeOf refers to support for IEs 9-11 (https://github.com/Financial-Times/polyfill-service/blob/master/polyfills/Object/setPrototypeOf/config.json), but the source repo refers to IE 11+ (https://github.com/paulmillr/es6-shim/blame/master/README.md#L78) -- and indeed am finding errors using IE10 that boil down to the fill behaving incorrectly and causing incorrect inheritance behaviour in babel-transpiled code. (FYI Babel works around not having the setPrototypeOf method present.)

My workaround (for anyone else hitting the same issue) is to add excludes=Object.setPrototypeOf to my polyfill URL (so I'm not getting a bad fill added), and add import "core-js/fn/object/set-prototype-of"; early in my code (so that I do have a fill for compatible browsers). This works okay so far.

I'm thinking that the fix here is to not fill setPrototypeOf for IE < 11, but I would imagine lots of other fills are relying on it... happy to submit a PR once steered!

Maybe am doing something wrong, but it doesn't seem to work with the html5 picture element in IE11. However it does work with the standard polyfill Picturefill https://cdn.rawgit.com/scottjehl/picturefill/3.0.2/dist/picturefill.min.js

Here is my sample https://codepen.io/rgfx/pen/GQLgNP

I have React application with Redux-form.
Looks like immutable.js is used internally by React (or Redux).
Originally I was going to report an issue for immutable.js,
but I realized that issue is reproducible only when polyfill is used (under IE11).
Application works fine under FireFox (without polyfill).

Under IE11 (with polyfill) next line in parseIterableLike() looks to be a problem

var arr = parseIterable(usingIterator(items));

That line is called from Array.from polyfill.
In my case it should convert List from immutable.js to Array, but in fact original List is returned.
As result "items" parameter is assigned to arrayLike as is (without conversion to Array), because in parseIterableLike() at the end "arr" is false.

var arrayLike = Object(parseIterableLike(items));

Because of no conversion in line below I receive 0, since arrayLike.length is undefined (List from immutable.js has only correct size property)

var len = toInteger(arrayLike.length);

Even after manual changing "len" to correct size of list (using debugger), at the end I receive array of "undefined" items, since in next line "[]" operator doesn't work (because arrayLike is not an array)

kValue = arrayLike[k];

Would be great if these can get polyfilled at some point;

https://developer.mozilla.org/en-US/docs/Web/API/AbortController

https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal

ScoutAsia is currently using this NPM package but would much prefer to use the polyfill-service instead!

https://www.npmjs.com/package/abortcontroller-polyfill

cc @JakeChampion

The Symbol polyfill defines all Symbols on the object prototype, which causes unexpected results.

// returns true with polyfill.io using features=Symbol.iterator, should be false
console.log(Symbol.iterator in {}); 

Angular checks for the present on the Symbol.iterator property instead of a non-undefined value when running change detection, which breaks when using polyfill.io.

Internet Explorer 11 and lower with querySelector(":scope ...") gives error

Do you have alternatives for it, or its not supported ?

Could you add this polyfill please :)

if (!Element.prototype.toggleAttribute) {
  Element.prototype.toggleAttribute = function(name, force) {
    var forcePassed = arguments.length === 2;
    var forceOn = !!force;
    var forceOff = forcePassed && !force;
    
    if (this.getAttribute(name) !== null) {
      if (forceOn) return true;
      
      this.removeAttribute(name);
      return false;
    } else {
      if (forceOff) return false;
      
      this.setAttribute(name, "");
      return true;
    }
  };
}

Spec -- https://dom.spec.whatwg.org/#dom-element-toggleattribute

The feature detect for Function.prototype.name is this:
'name' in Function.prototype && (function x() {}).name === 'x'
but when minified it is turned into this:
"name"in Function.prototype&&"x"===function(){}.name
which is incorrect because "x"===function(){}.name will always evaluate to false.

Pollyfills used: polyfill.js?features=default,es6
Pollyfill with issue: Object.defineProperty

stack trace:

defineProperty | @ | polyfill.js?features=default,es6:414
-- | -- | --
defineProp | @ | polyfill.js?features=default,es6:414
(anonymous function) | @ | app.js:1

I have a library somwhere inside one of my 1 million NPM packages that is trying to defined the property items ontop of an empty array (basically Object.defineProperty([], "items", config)) however the issue is ONLY happening on iOS 8, every other browser is fine with it. For this reason I am unable to figure out which of the million packages is doing this as I browserstack for whatever reasons is having a bad day when it comes to sourcemaps.

This is making it so that I have 0 idea what is causing this error so I cannot just remove the package which is doing this and move on. All that being said, is it correct behaviour for the pollyfill service to fix this? I can't even tell if pollyfill.js is pollyfilling my browser :(

I know this is a useless issue submission with very little info but I'm really at my witts end and this is basically just a cry for help. I am just hoping sombody has seen this before and knows a way to fix it. I'm hoping that it's not that I'm stuck and that theres somthing stupid I need to fix.

Sorry.

Using IE11 (11.1884.14393.0) and polyfill service 3.24, the polyfill string default-3.6,Map will fail (telling me Object doesn't support property or method 'entries', polyfill.js 434:3). However, default-3.3,Map works just fine; as does default-3.6 without added bonuses, but this seems fully dependent on the use case. Adding Map to any default-version from 3.4 and above will fail. The failing block in question looks like this:

	Map.prototype['forEach'] = function(callbackFn, thisArg) {
		thisArg = thisArg || global;
		var iterator = this.entries(); // <- Right here!
		var result = iterator.next();
		while (result.done === false) {
			callbackFn.call(thisArg, result.value[1], result.value[0], this);
			result = iterator.next();
		}
	};

Polyfill header:

/* Polyfill service v3.24.0
 * For detailed credits and licence information see https://github.com/financial-times/polyfill-service.
 * 
 * UA detected: ie/11.0.0
 * Features requested: Map,default-3.6

Now, I know that Map is already included in default-3.6, but in certain cases that fails as well, without clear indication of what's gone wrong. default-3.6,fetch fails for one of our sites inside the Map-polyfill on IE11 with the message Unable to get property 'get' of undefined or null reference (polyfill.js 1303,3), here:

	var isMap;
	if (hasMap) {
		var mapSize = Object.getOwnPropertyDescriptor(Map.prototype, 'size').get; // Here!
		isMap = function (m) {
			try {
				mapSize.call(m);
				return true;
			} catch (e) {
				return false;
			}
		};
	}

Polyfill header for that one:

/* Polyfill service v3.24.0
 * For detailed credits and licence information see https://github.com/financial-times/polyfill-service.
 * 
 * UA detected: ie/11.0.0
 * Features requested: default-3.6,fetch

That's about all the detail I can give you presently. Any idea of how to fix this?

On IE11 (on Windows 10, if that's important), when Array.from is passed a set, the Array.from polyfill is failing to detect the set. This appears to be an issue with the order in which polyfills are being loaded:

• Array.from first captures the Set.size property descriptor using Object.getOwnPropertyDescriptor(Set.prototype, 'size').get
• Then the Set polyfill kicks in and defines a new Set.size prototype using Object.defineProperty(Set.prototype, 'size', {

Placing a breakpoint in the Array.from polyfill's isSet function, you can see that:

• executing setSize.call(set) throws an exception
• executing Object.getOwnPropertyDescriptor(Set.prototype, 'size').get.call(set) succeeds
• Object.getOwnPropertyDescriptor(Set.prototype, 'size').get === setSize is false

In other words, using an uncaptured value for the Set.prototype.size.get function succeeds, but using the previously captured value fails. So it looks like Array.from is capturing IE11's native Set.size.get function, but then later trying to invoke the polyfilled version and throwing an exception as a result.

Here's what the service is loading

UA detected: ie/11.0.0
Features requested: Array.prototype.@@iterator,Array.prototype.find,Array.prototype.includes,IntersectionObserver,Promise,Symbol,WeakMap,default,fetch,matchMedia,navigator.sendBeacon

Number.isNaN, License: MIT (required by "default", "Array.from", "Map", "Set")
Array.from, License: CC0 (required by "default")
Array.of, License: MIT (required by "default")

Set, License: CC0 (required by "default")
String.prototype.endsWith, License: CC0 (required by "default")
String.prototype.startsWith, License: CC0 (required by "default")
URL, License: CC0 (required by "default")

Looks like you use https://github.com/andyearnshaw/Intl.js to polyfill Intl?

I've seen this PR andyearnshaw/Intl.js#262, can we hope plural will be supported once this PR has been merged?

Creating events via a constructor is an Illegal constructor type error in the Android 4.x stock browser.

new Event("focusout") and others are throwing.

Hi! Wondering if there are any plans to add new event options (capture, passive, and once). If not, I would be interested in contributing or working with developers to add them (especially once).

Hello! Not sure if this is the right place for this, but if I do:

(new Date).toLocaleString('en', { month: '2-digit', day: '2-digit' })

in a Firefox or Chromium (without polyfill) or even in IE10 after polyfilled by polyfill-service, I get:

"10/18"

But in IE11 I am getting:

"10 18"

(in my native locale (pt-BR) the result is even more different (other browsers: "18/10", IE11: "18 de 10"))

I think that IE11 says it implements Intl, and that's why polyfill-service is not sending the polyfill for it. But I thought it woul be better to report... Maybe you would pefer to force the polyfill in this case. (I think I'll force it using the querystring for polyfill-service)

(I tested IE11 using BrowserStack, not sure if a "local" installed IE11 would behave different, but should not...)

EDIT: Using |always didn't work. IE11 is probably using the native bugged implementation anyway. =(

https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/6047383/

• Could possible target IE7-11
• dep: WeakMap
• A possible solution:

typeof Blob !== 'undefined' && 
typeof XMLHttpRequest !== 'undefined' && 
(function(xhr) {
  var send = xhr.send
  var setRequestHeader = xhr.setRequestHeader
  var wm = new WeakMap

  // If content type is manully set, then we 
  // flag this instance so we don't overide it
  xhr.setRequestHeader = function(key) {
    setRequestHeader.apply(this, arguments)
    
    if (key.toLowerCase() === 'content-type')
      wm.set(this, 1)
  }
  
  xhr.send = function(data) {
    if (data instanceof Blob && data.type && !wm.get(this))
      setRequestHeader.apply(this, ['Content-Type', data.type])
    
    return send.apply(this, arguments)
  }
})(XMLHttpRequest.prototype)

Looks like there have been changes with the official IntersectionObserver polyfill that are not-yet reflected in Polyfill.io.

a few months ago, we use the polyfill service to generate a resource for Map&Set: https://cdn.polyfill.io/v2/polyfill.js?features=Map,Set&flags=always,gated. In order to solve the 'Map/Set is not defined' problems on old browsers, like Android 4.4

but, recently, we met a new problem, something not act as expect
in ios 8.1, we found the 'toString' function act different as other new ios versions
when we loaded the polyfill resource above, we found the toString was override
https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Symbol/polyfill.js#L215

toString(undefined) return [object Window], not [object undefined], this result caused other problem in our project, so we wish u can solve this problem.

finally, simulate the problem code line

The problem can be tested against this UA:

• Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_2 like Mac OS X) AppleWebKit/603.2.4 (KHTML, like Gecko) Version/10.0 Mobile/14F89 Safari/602.1

I have reproduced the bug with iPhone 6s Plus, IOS 10.3

In IE 11, I'm getting the error:

Invalid descriptor for property '0'

Walking up the call stack, it's stemming from some code that is constructing a DOMTokenList with a body element and 'className':

e=new DOMTokenList(body, 'className');

...which eventually hits this code which throws the error:

_(y,n,r)

• _ is some function named defineProperty
• y is some object
• n is 0
• r is set to undefined

I'm using this polyfill URL (linebreaks added for readability):

https://cdn.polyfill.io/v2/polyfill.min.js
  ?unknown=polyfill
  &features=
    default%2C
    fetch%2C
    Array.prototype.%40%40iterator%2C
    Array.prototype.find%2C
    Array.prototype.findIndex%2C
    Function.name%2C
    Number.isFinite%2C
    Promise%2C
    String.prototype.repeat%2C
    Array.prototype.includes%2C
    Intl.~locale.en-US%2C
    Promise.prototype.finally

With Custom Element support in #1376, it'd be great to land Shadow DOM as well. Problem is, because of how hard Shadow DOM is to polyfill, it's broken into two shims:

• ShadyDOM, shim for DOM aspect of Shadow DOM (attachShadow, shim .children etc)
• ShadyCSS, shim for scoping styles applied in a Shadow Root. Trickier to use - much less of a polyfill than ShadyDOM, can't just drop in and go.

Given this, what's the best way to attempt loading these polyfills? Could they perhaps be loaded as ShadowDOM.~ShadyDOM and ShadowDOM.~ShadyCSS with ShadowDOM feature importing both? e.g. if you want to use all of Polymer's features, you need to import both. But a library like SkateJS or just vanilla web components, you may only choose ShadyDOM

Thanks, and happy to make a PR if can work this out :)

Please add polyfills Array.prototype.flat, Array.prototype.flatMap

These methods are supported in all modern browsers except Edge. A polyfill can be found here:

https://gist.github.com/Kovensky/921c58de0c58be01aebf06d86cf9692f

flat

Flattens an array. You can specify how deep it should be flattened. The depth defaults to 1:

let nested = [
  [ 1, 2, [ 3 ] ],
  [ 3, [ 4 ], 5 ],
  [ [ 5 ], 6, 7 ]
];

nested.flat()  // returns [ 1, 2, [ 3 ], 3, [ 4 ], 5, [ 5 ], 6, 7 ]
nested.flat(2) // returns [ 1, 2, 3, 3, 4, 5, 5, 6, 7 ]

flatMap

Maps an array, then flattens it with depth 1. You can use Array.prototype.map( ... ).flat(1) instead, but flatMap is usually faster.

flatMap can insert and remove elements to/from an array, which makes this method very powerful!

Example to increment each number in an array, then duplicate every 4:

let numbers = [ 1, 3, 2, 4, 3, 5, 4, 6 ];

numbers.flatMap(n => {
  n++;
  return n === 4 ? [n, n] : n;
})
// returns [ 2, 4, 4, 3, 5, 4, 4, 6, 5, 7 ]