Extending some native object doesn't work in IE11

Bug Report

Current Behavior

IE11 throws a runtime error when transpiling class extension for native objects like: Foo class extends DocumentFragment {}

The problem is in this helper:

function _isNativeFunction(fn) {
  return Function.toString.call(fn).indexOf("[native code]") !== -1;
}

Here is the runtime error:

Function.prototype.toString: 'this' is not a Function object

The issue appears to be because superClass needs to be a function but typeof HTMLElement is object (in IE11) Note that typeof HTMLElement is function in other browsers.

Input Code

• REPL or Repo link if applicable:

https://babeljs.io/repl/build/9254/#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=MYGwhgzhAEAa0FMAeAXBA7AJjAIge2AFcBbDFAMQCcwBzU9FaAbwCgBfFl4PdCPEBADoQeGgApYASgDcQA&debug=true&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=false&presets=env&prettier=true&targets=&version=7.1.2%2Bpr.8878&envVersion=7.1.0%2Bpr.8878

class X extends DocumentFragment {}

Expected behavior/code It should work? 😃

Possible Solution I haven’t though too much about it, but maybe another check for isNative will be sufficient

[ghost]

To save you sometime, add the following after your custom element polyfills:

<script>if (typeof HTMLElement === 'object') document.write('<script src="https://unpkg.com/custom-elements-es5-adapter@@1.0.0/custom-elements-es5-adapter.js" crossorigin="anonymous"><' + '/script>')</script>

In my case, it would look like this:

<script>if (this.customElements) try { customElements.define('built-in', document.createElement('p').constructor, { 'extends': 'p' }) } catch (a) { document.write('<script src="https://unpkg.com/@@ungap/custom-elements-builtin@0.2.7/min.js" crossorigin="anonymous" ><' + '/script>') } else document.write('<script src="https://unpkg.com/document-register-element@1.13.2/build/document-register-element.js" crossorigin="anonymous" ><' + '/script>');</script>

<!-- On IE11, typeof HTMLElement === 'object',
    this breaks babel 7/TS compilation of built in extension
    Adding an adapter to add an intermediate constructor wrapping native HTMLElement to fix this issue
-->
<script>if (typeof HTMLElement === 'object') document.write('<script src="https://unpkg.com/custom-elements-es5-adapter@@1.0.0/custom-elements-es5-adapter.js" crossorigin="anonymous"><' + '/script>')</script>

[FND]

FWIW, I just ran into this issue and turns out I’d simply forgotten to include the Custom Elements polyfill (document-register-element in my case) required for IE 11. Not sure whether that invalidates this issue, but perhaps mentioning it here saves others some trouble.