lwc 2.21.1 → 2.22.0

package/dist/engine-dom/esm/es2017/engine-dom.js

@@ -299,9 +299,9 @@ function htmlPropertyToAttribute(propName) {
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 // Increment whenever the LWC template compiler changes
-const LWC_VERSION = "2.21.1";
+const LWC_VERSION = "2.22.0";
 const LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
-/** version: 2.21.1 */
+/** version: 2.22.0 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -455,7 +455,7 @@ function setFeatureFlagForTest(name, value) {
         setFeatureFlag(name, value);
     }
 }
-/** version: 2.21.1 */
+/** version: 2.22.0 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -687,18 +687,21 @@ class ReactiveObserver {
         ArrayPush$1.call(this.listeners, reactiveObservers);
     }
 }
-
-/*
- * Copyright (c) 2018, salesforce.com, inc.
- * All rights reserved.
- * SPDX-License-Identifier: MIT
- * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
- */
 function componentValueMutated(vm, key) {
-    valueMutated(vm.component, key);
+    // On the server side, we don't need mutation tracking. Skipping it improves performance.
+    {
+        valueMutated(vm.component, key);
+    }
 }
 function componentValueObserved(vm, key) {
-    valueObserved(vm.component, key);
+    // On the server side, we don't need mutation tracking. Skipping it improves performance.
+    {
+        valueObserved(vm.component, key);
+    }
+}
+function createReactiveObserver(callback) {
+    // On the server side, we don't need mutation tracking. Skipping it improves performance.
+    return new ReactiveObserver(callback) ;
 }
 
 /*
@@ -1820,7 +1823,24 @@ const reactiveMembrane = new ObservableMembrane({
  * change or being removed.
  */
 function unwrap(value) {
-    return reactiveMembrane.unwrapProxy(value);
+    // On the server side, we don't need mutation tracking. Skipping it improves performance.
+    return reactiveMembrane.unwrapProxy(value) ;
+}
+function getReadOnlyProxy(value) {
+    // We must return a frozen wrapper around the value, so that child components cannot mutate properties passed to
+    // them from their parents. This applies to both the client and server.
+    return reactiveMembrane.getReadOnlyProxy(value);
+}
+function getReactiveProxy(value) {
+    // On the server side, we don't need mutation tracking. Skipping it improves performance.
+    return reactiveMembrane.getProxy(value) ;
+}
+// Making the component instance a live value when using Locker to support expandos.
+function markLockerLiveObject(obj) {
+    // On the server side, we don't need mutation tracking. Skipping it improves performance.
+    {
+        obj[lockerLivePropertyKey] = undefined;
+    }
 }
 
 /*
@@ -1910,8 +1930,7 @@ const LightningElement = function () {
         vm.setHook = setHook;
         vm.getHook = getHook;
     }
-    // Making the component instance a live value when using Locker to support expandos.
-    this[lockerLivePropertyKey] = undefined;
+    markLockerLiveObject(this);
     // Linking elm, shadow root and component with the VM.
     associateVM(component, vm);
     associateVM(elm, vm);
@@ -2180,6 +2199,45 @@ function createObservedFieldPropertyDescriptor(key) {
         configurable: true,
     };
 }
+class AccessorReactiveObserver extends ReactiveObserver {
+    constructor(vm, set) {
+        super(() => {
+            if (isFalse(this.debouncing)) {
+                this.debouncing = true;
+                addCallbackToNextTick(() => {
+                    if (isTrue(this.debouncing)) {
+                        const { value } = this;
+                        const { isDirty: dirtyStateBeforeSetterCall, component, idx } = vm;
+                        set.call(component, value);
+                        // de-bouncing after the call to the original setter to prevent
+                        // infinity loop if the setter itself is mutating things that
+                        // were accessed during the previous invocation.
+                        this.debouncing = false;
+                        if (isTrue(vm.isDirty) && isFalse(dirtyStateBeforeSetterCall) && idx > 0) {
+                            // immediate rehydration due to a setter driven mutation, otherwise
+                            // the component will get rendered on the second tick, which it is not
+                            // desirable.
+                            rerenderVM(vm);
+                        }
+                    }
+                });
+            }
+        });
+        this.debouncing = false;
+    }
+    reset(value) {
+        super.reset();
+        this.debouncing = false;
+        if (arguments.length > 0) {
+            this.value = value;
+        }
+    }
+}
+function createAccessorReactiveObserver(vm, set) {
+    // On the server side, we don't need mutation tracking. Skipping it improves performance.
+    return new AccessorReactiveObserver(vm, set)
+        ;
+}
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -2228,50 +2286,6 @@ function createPublicPropertyDescriptor(key) {
     configurable: true
   };
 }
-class AccessorReactiveObserver extends ReactiveObserver {
-  constructor(vm, set) {
-    super(() => {
-      if (isFalse(this.debouncing)) {
-        this.debouncing = true;
-        addCallbackToNextTick(() => {
-          if (isTrue(this.debouncing)) {
-            const {
-              value
-            } = this;
-            const {
-              isDirty: dirtyStateBeforeSetterCall,
-              component,
-              idx
-            } = vm;
-            set.call(component, value); // de-bouncing after the call to the original setter to prevent
-            // infinity loop if the setter itself is mutating things that
-            // were accessed during the previous invocation.
-
-            this.debouncing = false;
-
-            if (isTrue(vm.isDirty) && isFalse(dirtyStateBeforeSetterCall) && idx > 0) {
-              // immediate rehydration due to a setter driven mutation, otherwise
-              // the component will get rendered on the second tick, which it is not
-              // desirable.
-              rerenderVM(vm);
-            }
-          }
-        });
-      }
-    });
-    this.debouncing = false;
-  }
-
-  reset(value) {
-    super.reset();
-    this.debouncing = false;
-
-    if (arguments.length > 0) {
-      this.value = value;
-    }
-  }
-
-}
 function createPublicAccessorDescriptor(key, descriptor) {
   const {
     get,
@@ -2312,7 +2326,7 @@ function createPublicAccessorDescriptor(key, descriptor) {
           let ro = vm.oar[key];
 
           if (isUndefined$1(ro)) {
-            ro = vm.oar[key] = new AccessorReactiveObserver(vm, set);
+            ro = vm.oar[key] = createAccessorReactiveObserver(vm, set);
           } // every time we invoke this setter from outside (through this wrapper setter)
           // we should reset the value and then debounce just in case there is a pending
           // invocation the next tick that is not longer relevant since the value is changing
@@ -2344,7 +2358,7 @@ function createPublicAccessorDescriptor(key, descriptor) {
  */
 function track(target) {
     if (arguments.length === 1) {
-        return reactiveMembrane.getProxy(target);
+        return getReactiveProxy(target);
     }
     if (process.env.NODE_ENV !== 'production') {
         assert.fail(`@track decorator can only be used with one argument to return a trackable object, or as a decorator function.`);
@@ -2365,7 +2379,7 @@ function internalTrackDecorator(key) {
                 assert.invariant(!isInvokingRender, `${vmBeingRendered}.render() method has side effects on the state of ${vm}.${toString$1(key)}`);
                 assert.invariant(!isUpdatingTemplate, `Updating the template of ${vmBeingRendered} has side effects on the state of ${vm}.${toString$1(key)}`);
             }
-            const reactiveOrAnyValue = reactiveMembrane.getProxy(newValue);
+            const reactiveOrAnyValue = getReactiveProxy(newValue);
             if (reactiveOrAnyValue !== vm.cmpFields[key]) {
                 vm.cmpFields[key] = reactiveOrAnyValue;
                 componentValueMutated(vm, key);
@@ -2757,7 +2771,7 @@ function createSetter(key) {
         fn = cachedSetterByKey[key] = function (newValue) {
             const vm = getAssociatedVM(this);
             const { setHook } = vm;
-            newValue = reactiveMembrane.getReadOnlyProxy(newValue);
+            newValue = getReadOnlyProxy(newValue);
             setHook(vm.component, key, newValue);
         };
     }
@@ -5193,7 +5207,7 @@ function getComponentRegisteredTemplate(Ctor) {
     return signedTemplateMap.get(Ctor);
 }
 function getTemplateReactiveObserver(vm) {
-    return new ReactiveObserver(() => {
+    return createReactiveObserver(() => {
         const { isDirty } = vm;
         if (isFalse(isDirty)) {
             markComponentAsDirty(vm);
@@ -6008,7 +6022,7 @@ function createMethodDataCallback(vm, method) {
 function createConfigWatcher(component, configCallback, callbackWhenConfigIsReady) {
   let hasPendingConfig = false; // creating the reactive observer for reactive params when needed
 
-  const ro = new ReactiveObserver(() => {
+  const ro = createReactiveObserver(() => {
     if (hasPendingConfig === false) {
       hasPendingConfig = true; // collect new config in the micro-task
 
@@ -6304,7 +6318,7 @@ function readonly(obj) {
             assert.fail('@readonly cannot be used as a decorator just yet, use it as a function with one argument to produce a readonly version of the provided value.');
         }
     }
-    return reactiveMembrane.getReadOnlyProxy(obj);
+    return getReadOnlyProxy(obj);
 }
 
 /*
@@ -6815,7 +6829,7 @@ function getComponentConstructor(elm) {
     }
     return ctor;
 }
-/* version: 2.21.1 */
+/* version: 2.22.0 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -6959,6 +6973,69 @@ function insertStylesheet(content, target) {
     }
 }
 
+/*
+ * Copyright (c) 2018, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+const SUPPORTS_TEMPLATE = typeof HTMLTemplateElement === 'function';
+let createFragment;
+if (SUPPORTS_TEMPLATE) {
+    // Parse the fragment HTML string into DOM
+    createFragment = function (html) {
+        const template = document.createElement('template');
+        template.innerHTML = html;
+        return template.content.firstChild;
+    };
+}
+else {
+    // In browsers that don't support <template> (e.g. IE11), we need to be careful to wrap elements like
+    // <td> in the proper container elements (e.g. <tbody>), because otherwise they will be parsed as null.
+    // Via https://github.com/webcomponents/polyfills/blob/ee1db33/packages/template/template.js#L273-L280
+    // With other elements added from:
+    // https://github.com/sindresorhus/html-tags/blob/95dcdd5/index.js
+    // Using the test:
+    // document.createRange().createContextualFragment(`<${tag}></${tag}>`).firstChild === null
+    // And omitting <html>, <head>, and <body> as these are not practical in an LWC component.
+    const topLevelWrappingMap = {
+        caption: ['table'],
+        col: ['colgroup', 'table'],
+        colgroup: ['table'],
+        option: ['select'],
+        tbody: ['table'],
+        td: ['tr', 'tbody', 'table'],
+        th: ['tr', 'tbody', 'table'],
+        thead: ['table'],
+        tfoot: ['table'],
+        tr: ['tbody', 'table'],
+    };
+    // Via https://github.com/webcomponents/polyfills/blob/ee1db33/packages/template/template.js#L282-L288
+    const getTagName = function (text) {
+        return (/<([a-z][^/\0>\x20\t\r\n\f]+)/i.exec(text) || ['', ''])[1].toLowerCase();
+    };
+    // Via https://github.com/webcomponents/polyfills/blob/ee1db33/packages/template/template.js#L295-L320
+    createFragment = function (html) {
+        const wrapperTags = topLevelWrappingMap[getTagName(html)];
+        if (!isUndefined$1(wrapperTags)) {
+            for (const wrapperTag of wrapperTags) {
+                html = `<${wrapperTag}>${html}</${wrapperTag}>`;
+            }
+        }
+        // For IE11, the document title must not be undefined, but it can be an empty string
+        // https://developer.mozilla.org/en-US/docs/Web/API/DOMImplementation/createHTMLDocument#browser_compatibility
+        const doc = document.implementation.createHTMLDocument('');
+        doc.body.innerHTML = html;
+        let content = doc.body;
+        if (!isUndefined$1(wrapperTags)) {
+            for (let i = 0; i < wrapperTags.length; i++) {
+                content = content.firstChild;
+            }
+        }
+        return content.firstChild;
+    };
+}
+
 /*
  * Copyright (c) 2018, salesforce.com, inc.
  * All rights reserved.
@@ -7037,9 +7114,6 @@ const isSyntheticShadowDefined = hasOwnProperty$1.call(Element.prototype, KEY__S
 function cloneNode(node, deep) {
     return node.cloneNode(deep);
 }
-function createFragment(html) {
-    return document.createRange().createContextualFragment(html).firstChild;
-}
 function createElement$1(tagName, namespace) {
     return isUndefined$1(namespace)
         ? document.createElement(tagName)
@@ -7503,6 +7577,6 @@ defineProperty(LightningElement, 'CustomElementConstructor', {
 });
 freeze(LightningElement);
 seal(LightningElement.prototype);
-/* version: 2.21.1 */
+/* version: 2.22.0 */
 
 export { LightningElement, profilerControl as __unstable__ProfilerControl, api$1 as api, deprecatedBuildCustomElementConstructor as buildCustomElementConstructor, createContextProvider, createElement, freezeTemplate, getComponentConstructor, getComponentDef, hydrateComponent, isComponentConstructor, isNodeShadowed as isNodeFromTemplate, parseFragment, parseSVGFragment, readonly, register, registerComponent, registerDecorators, registerTemplate, renderer, sanitizeAttribute, setFeatureFlag, setFeatureFlagForTest, setHooks, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };

package/dist/engine-dom/iife/es2017/engine-dom.js

@@ -302,9 +302,9 @@ var LWC = (function (exports) {
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
   // Increment whenever the LWC template compiler changes
-  const LWC_VERSION = "2.21.1";
+  const LWC_VERSION = "2.22.0";
   const LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
-  /** version: 2.21.1 */
+  /** version: 2.22.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -458,7 +458,7 @@ var LWC = (function (exports) {
           setFeatureFlag(name, value);
       }
   }
-  /** version: 2.21.1 */
+  /** version: 2.22.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -690,18 +690,21 @@ var LWC = (function (exports) {
           ArrayPush$1.call(this.listeners, reactiveObservers);
       }
   }
-
-  /*
-   * Copyright (c) 2018, salesforce.com, inc.
-   * All rights reserved.
-   * SPDX-License-Identifier: MIT
-   * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
-   */
   function componentValueMutated(vm, key) {
-      valueMutated(vm.component, key);
+      // On the server side, we don't need mutation tracking. Skipping it improves performance.
+      {
+          valueMutated(vm.component, key);
+      }
   }
   function componentValueObserved(vm, key) {
-      valueObserved(vm.component, key);
+      // On the server side, we don't need mutation tracking. Skipping it improves performance.
+      {
+          valueObserved(vm.component, key);
+      }
+  }
+  function createReactiveObserver(callback) {
+      // On the server side, we don't need mutation tracking. Skipping it improves performance.
+      return new ReactiveObserver(callback) ;
   }
 
   /*
@@ -1823,7 +1826,24 @@ var LWC = (function (exports) {
    * change or being removed.
    */
   function unwrap(value) {
-      return reactiveMembrane.unwrapProxy(value);
+      // On the server side, we don't need mutation tracking. Skipping it improves performance.
+      return reactiveMembrane.unwrapProxy(value) ;
+  }
+  function getReadOnlyProxy(value) {
+      // We must return a frozen wrapper around the value, so that child components cannot mutate properties passed to
+      // them from their parents. This applies to both the client and server.
+      return reactiveMembrane.getReadOnlyProxy(value);
+  }
+  function getReactiveProxy(value) {
+      // On the server side, we don't need mutation tracking. Skipping it improves performance.
+      return reactiveMembrane.getProxy(value) ;
+  }
+  // Making the component instance a live value when using Locker to support expandos.
+  function markLockerLiveObject(obj) {
+      // On the server side, we don't need mutation tracking. Skipping it improves performance.
+      {
+          obj[lockerLivePropertyKey] = undefined;
+      }
   }
 
   /*
@@ -1913,8 +1933,7 @@ var LWC = (function (exports) {
           vm.setHook = setHook;
           vm.getHook = getHook;
       }
-      // Making the component instance a live value when using Locker to support expandos.
-      this[lockerLivePropertyKey] = undefined;
+      markLockerLiveObject(this);
       // Linking elm, shadow root and component with the VM.
       associateVM(component, vm);
       associateVM(elm, vm);
@@ -2183,6 +2202,45 @@ var LWC = (function (exports) {
           configurable: true,
       };
   }
+  class AccessorReactiveObserver extends ReactiveObserver {
+      constructor(vm, set) {
+          super(() => {
+              if (isFalse(this.debouncing)) {
+                  this.debouncing = true;
+                  addCallbackToNextTick(() => {
+                      if (isTrue(this.debouncing)) {
+                          const { value } = this;
+                          const { isDirty: dirtyStateBeforeSetterCall, component, idx } = vm;
+                          set.call(component, value);
+                          // de-bouncing after the call to the original setter to prevent
+                          // infinity loop if the setter itself is mutating things that
+                          // were accessed during the previous invocation.
+                          this.debouncing = false;
+                          if (isTrue(vm.isDirty) && isFalse(dirtyStateBeforeSetterCall) && idx > 0) {
+                              // immediate rehydration due to a setter driven mutation, otherwise
+                              // the component will get rendered on the second tick, which it is not
+                              // desirable.
+                              rerenderVM(vm);
+                          }
+                      }
+                  });
+              }
+          });
+          this.debouncing = false;
+      }
+      reset(value) {
+          super.reset();
+          this.debouncing = false;
+          if (arguments.length > 0) {
+              this.value = value;
+          }
+      }
+  }
+  function createAccessorReactiveObserver(vm, set) {
+      // On the server side, we don't need mutation tracking. Skipping it improves performance.
+      return new AccessorReactiveObserver(vm, set)
+          ;
+  }
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -2231,50 +2289,6 @@ var LWC = (function (exports) {
       configurable: true
     };
   }
-  class AccessorReactiveObserver extends ReactiveObserver {
-    constructor(vm, set) {
-      super(() => {
-        if (isFalse(this.debouncing)) {
-          this.debouncing = true;
-          addCallbackToNextTick(() => {
-            if (isTrue(this.debouncing)) {
-              const {
-                value
-              } = this;
-              const {
-                isDirty: dirtyStateBeforeSetterCall,
-                component,
-                idx
-              } = vm;
-              set.call(component, value); // de-bouncing after the call to the original setter to prevent
-              // infinity loop if the setter itself is mutating things that
-              // were accessed during the previous invocation.
-
-              this.debouncing = false;
-
-              if (isTrue(vm.isDirty) && isFalse(dirtyStateBeforeSetterCall) && idx > 0) {
-                // immediate rehydration due to a setter driven mutation, otherwise
-                // the component will get rendered on the second tick, which it is not
-                // desirable.
-                rerenderVM(vm);
-              }
-            }
-          });
-        }
-      });
-      this.debouncing = false;
-    }
-
-    reset(value) {
-      super.reset();
-      this.debouncing = false;
-
-      if (arguments.length > 0) {
-        this.value = value;
-      }
-    }
-
-  }
   function createPublicAccessorDescriptor(key, descriptor) {
     const {
       get,
@@ -2315,7 +2329,7 @@ var LWC = (function (exports) {
             let ro = vm.oar[key];
 
             if (isUndefined$1(ro)) {
-              ro = vm.oar[key] = new AccessorReactiveObserver(vm, set);
+              ro = vm.oar[key] = createAccessorReactiveObserver(vm, set);
             } // every time we invoke this setter from outside (through this wrapper setter)
             // we should reset the value and then debounce just in case there is a pending
             // invocation the next tick that is not longer relevant since the value is changing
@@ -2347,7 +2361,7 @@ var LWC = (function (exports) {
    */
   function track(target) {
       if (arguments.length === 1) {
-          return reactiveMembrane.getProxy(target);
+          return getReactiveProxy(target);
       }
       if (process.env.NODE_ENV !== 'production') {
           assert.fail(`@track decorator can only be used with one argument to return a trackable object, or as a decorator function.`);
@@ -2368,7 +2382,7 @@ var LWC = (function (exports) {
                   assert.invariant(!isInvokingRender, `${vmBeingRendered}.render() method has side effects on the state of ${vm}.${toString$1(key)}`);
                   assert.invariant(!isUpdatingTemplate, `Updating the template of ${vmBeingRendered} has side effects on the state of ${vm}.${toString$1(key)}`);
               }
-              const reactiveOrAnyValue = reactiveMembrane.getProxy(newValue);
+              const reactiveOrAnyValue = getReactiveProxy(newValue);
               if (reactiveOrAnyValue !== vm.cmpFields[key]) {
                   vm.cmpFields[key] = reactiveOrAnyValue;
                   componentValueMutated(vm, key);
@@ -2760,7 +2774,7 @@ var LWC = (function (exports) {
           fn = cachedSetterByKey[key] = function (newValue) {
               const vm = getAssociatedVM(this);
               const { setHook } = vm;
-              newValue = reactiveMembrane.getReadOnlyProxy(newValue);
+              newValue = getReadOnlyProxy(newValue);
               setHook(vm.component, key, newValue);
           };
       }
@@ -5196,7 +5210,7 @@ var LWC = (function (exports) {
       return signedTemplateMap.get(Ctor);
   }
   function getTemplateReactiveObserver(vm) {
-      return new ReactiveObserver(() => {
+      return createReactiveObserver(() => {
           const { isDirty } = vm;
           if (isFalse(isDirty)) {
               markComponentAsDirty(vm);
@@ -6011,7 +6025,7 @@ var LWC = (function (exports) {
   function createConfigWatcher(component, configCallback, callbackWhenConfigIsReady) {
     let hasPendingConfig = false; // creating the reactive observer for reactive params when needed
 
-    const ro = new ReactiveObserver(() => {
+    const ro = createReactiveObserver(() => {
       if (hasPendingConfig === false) {
         hasPendingConfig = true; // collect new config in the micro-task
 
@@ -6307,7 +6321,7 @@ var LWC = (function (exports) {
               assert.fail('@readonly cannot be used as a decorator just yet, use it as a function with one argument to produce a readonly version of the provided value.');
           }
       }
-      return reactiveMembrane.getReadOnlyProxy(obj);
+      return getReadOnlyProxy(obj);
   }
 
   /*
@@ -6818,7 +6832,7 @@ var LWC = (function (exports) {
       }
       return ctor;
   }
-  /* version: 2.21.1 */
+  /* version: 2.22.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -6962,6 +6976,69 @@ var LWC = (function (exports) {
       }
   }
 
+  /*
+   * Copyright (c) 2018, salesforce.com, inc.
+   * All rights reserved.
+   * SPDX-License-Identifier: MIT
+   * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+   */
+  const SUPPORTS_TEMPLATE = typeof HTMLTemplateElement === 'function';
+  let createFragment;
+  if (SUPPORTS_TEMPLATE) {
+      // Parse the fragment HTML string into DOM
+      createFragment = function (html) {
+          const template = document.createElement('template');
+          template.innerHTML = html;
+          return template.content.firstChild;
+      };
+  }
+  else {
+      // In browsers that don't support <template> (e.g. IE11), we need to be careful to wrap elements like
+      // <td> in the proper container elements (e.g. <tbody>), because otherwise they will be parsed as null.
+      // Via https://github.com/webcomponents/polyfills/blob/ee1db33/packages/template/template.js#L273-L280
+      // With other elements added from:
+      // https://github.com/sindresorhus/html-tags/blob/95dcdd5/index.js
+      // Using the test:
+      // document.createRange().createContextualFragment(`<${tag}></${tag}>`).firstChild === null
+      // And omitting <html>, <head>, and <body> as these are not practical in an LWC component.
+      const topLevelWrappingMap = {
+          caption: ['table'],
+          col: ['colgroup', 'table'],
+          colgroup: ['table'],
+          option: ['select'],
+          tbody: ['table'],
+          td: ['tr', 'tbody', 'table'],
+          th: ['tr', 'tbody', 'table'],
+          thead: ['table'],
+          tfoot: ['table'],
+          tr: ['tbody', 'table'],
+      };
+      // Via https://github.com/webcomponents/polyfills/blob/ee1db33/packages/template/template.js#L282-L288
+      const getTagName = function (text) {
+          return (/<([a-z][^/\0>\x20\t\r\n\f]+)/i.exec(text) || ['', ''])[1].toLowerCase();
+      };
+      // Via https://github.com/webcomponents/polyfills/blob/ee1db33/packages/template/template.js#L295-L320
+      createFragment = function (html) {
+          const wrapperTags = topLevelWrappingMap[getTagName(html)];
+          if (!isUndefined$1(wrapperTags)) {
+              for (const wrapperTag of wrapperTags) {
+                  html = `<${wrapperTag}>${html}</${wrapperTag}>`;
+              }
+          }
+          // For IE11, the document title must not be undefined, but it can be an empty string
+          // https://developer.mozilla.org/en-US/docs/Web/API/DOMImplementation/createHTMLDocument#browser_compatibility
+          const doc = document.implementation.createHTMLDocument('');
+          doc.body.innerHTML = html;
+          let content = doc.body;
+          if (!isUndefined$1(wrapperTags)) {
+              for (let i = 0; i < wrapperTags.length; i++) {
+                  content = content.firstChild;
+              }
+          }
+          return content.firstChild;
+      };
+  }
+
   /*
    * Copyright (c) 2018, salesforce.com, inc.
    * All rights reserved.
@@ -7040,9 +7117,6 @@ var LWC = (function (exports) {
   function cloneNode(node, deep) {
       return node.cloneNode(deep);
   }
-  function createFragment(html) {
-      return document.createRange().createContextualFragment(html).firstChild;
-  }
   function createElement$1(tagName, namespace) {
       return isUndefined$1(namespace)
           ? document.createElement(tagName)
@@ -7506,7 +7580,7 @@ var LWC = (function (exports) {
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.21.1 */
+  /* version: 2.22.0 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;