lwc 2.23.5 → 2.24.0

package/dist/engine-dom/iife/es5/engine-dom_debug.js

@@ -346,7 +346,7 @@ var LWC = (function (exports) {
     CACHED_PROPERTY_ATTRIBUTE_MAPPING.set(propName, attributeName);
     return attributeName;
   }
-  /** version: 2.23.5 */
+  /** version: 2.24.0 */
 
   /**
    * Copyright (C) 2018 salesforce.com, inc.
@@ -440,7 +440,7 @@ var LWC = (function (exports) {
       patch$1(propName);
     }
   }
-  /** version: 2.23.5 */
+  /** version: 2.24.0 */
 
   /**
    * Copyright (C) 2018 salesforce.com, inc.
@@ -615,6 +615,19 @@ var LWC = (function (exports) {
 
     return result;
   }
+
+
+  function setRefVNode(vm, ref, vnode) {
+    // If not, then something went wrong and we threw an error above.
+
+
+    var refVNodes = vm.refVNodes; // In cases of conflict (two elements with the same ref), prefer, the last one,
+    // in depth-first traversal order.
+
+    if (!(ref in refVNodes) || refVNodes[ref].key < vnode.key) {
+      refVNodes[ref] = vnode;
+    }
+  }
   /*
    * Copyright (c) 2019, salesforce.com, inc.
    * All rights reserved.
@@ -1768,13 +1781,15 @@ var LWC = (function (exports) {
       }
     };
   }
+
+  var EMPTY_REFS = freeze(create(null));
+  var refsCache = new WeakMap();
   /**
    * This class is the base class for any LWC element.
    * Some elements directly extends this class, others implement it via inheritance.
    **/
   // @ts-ignore
 
-
   var LightningElement = function LightningElement() {
     // This should be as performant as possible, while any initialization should be done lazily
     if (isNull(vmBeingConstructed)) {
@@ -1946,6 +1961,77 @@ var LWC = (function (exports) {
       return vm.shadowRoot;
     },
 
+    get refs() {
+      var vm = getAssociatedVM(this);
+
+      if (isUpdatingTemplate) {
+        // process of returning the refs and caching them, because the state of the refs is unstable.
+        // This can happen if e.g. a template contains `<div class={foo}></div>` and `foo` is computed
+        // based on `this.refs.bar`.
+
+
+        return;
+      }
+
+      var refVNodes = vm.refVNodes,
+          hasRefVNodes = vm.hasRefVNodes;
+          vm.cmpTemplate; // If the `cmpTemplate` is null, that means that the template has not been rendered yet. Most likely this occurs
+      // were introduced, we return undefined if the template has no refs defined
+      // anywhere. This fixes components that may want to add an expando called `refs`
+      // and are checking if it exists with `if (this.refs)`  before adding it.
+      // Note it is not sufficient to just check if `refVNodes` is null or empty,
+      // because a template may have `lwc:ref` defined within a falsy `if:true` block.
+
+
+      if (!hasRefVNodes) {
+        return;
+      } // For templates that are using `lwc:ref`, if there are no refs currently available
+      // (e.g. refs inside of a falsy `if:true` block), we return an empty object.
+
+
+      if (isNull(refVNodes)) {
+        return EMPTY_REFS;
+      } // The refNodes can be cached based on the refVNodes, since the refVNodes
+      // are recreated from scratch every time the template is rendered.
+      // This happens with `vm.refVNodes = null` in `template.ts` in `@lwc/engine-core`.
+
+
+      var refs = refsCache.get(refVNodes);
+
+      if (isUndefined$1(refs)) {
+        refs = create(null);
+
+        var _iterator3 = _createForOfIteratorHelper(keys(refVNodes)),
+            _step3;
+
+        try {
+          for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+            var key = _step3.value;
+            refs[key] = refVNodes[key].elm;
+          }
+        } catch (err) {
+          _iterator3.e(err);
+        } finally {
+          _iterator3.f();
+        }
+
+        freeze(refs);
+        refsCache.set(refVNodes, refs);
+      }
+
+      return refs;
+    },
+
+    // For backwards compat, we allow component authors to set `refs` as an expando
+    set refs(value) {
+      defineProperty(this, 'refs', {
+        configurable: true,
+        enumerable: true,
+        writable: true,
+        value: value
+      });
+    },
+
     get shadowRoot() {
       // From within the component instance, the shadowRoot is always reported as "closed".
       // Authors should rely on this.template instead.
@@ -3323,15 +3409,33 @@ var LWC = (function (exports) {
 
   function patchProps(oldVnode, vnode, renderer) {
     var props = vnode.data.props;
+    var spread = vnode.data.spread;
 
-    if (isUndefined$1(props)) {
+    if (isUndefined$1(props) && isUndefined$1(spread)) {
       return;
     }
 
-    var oldProps = isNull(oldVnode) ? EmptyObject : oldVnode.data.props;
+    var oldProps;
 
-    if (oldProps === props) {
-      return;
+    if (!isNull(oldVnode)) {
+      oldProps = oldVnode.data.props;
+      var oldSpread = oldVnode.data.spread;
+
+      if (oldProps === props && oldSpread === spread) {
+        return;
+      }
+
+      if (isUndefined$1(oldProps)) {
+        oldProps = EmptyObject;
+      }
+
+      if (!isUndefined$1(oldSpread)) {
+        oldProps = assign({}, oldProps, oldSpread);
+      }
+    }
+
+    if (!isUndefined$1(spread)) {
+      props = assign({}, props, spread);
     }
 
     var isFirstPatch = isNull(oldVnode);
@@ -3344,7 +3448,8 @@ var LWC = (function (exports) {
       var cur = props[key]; // Set the property if it's the first time is is patched or if the previous property is
       // different than the one previously set.
 
-      if (isFirstPatch || cur !== (isLiveBindingProp(sel, key) ? getProperty(elm, key) : oldProps[key])) {
+      if (isFirstPatch || cur !== (isLiveBindingProp(sel, key) ? getProperty(elm, key) : oldProps[key]) || !(key in oldProps) // this is required because the above case will pass when `cur` is `undefined` and key is missing in `oldProps`
+      ) {
 
         setProperty(elm, key, cur);
       }
@@ -4313,19 +4418,25 @@ var LWC = (function (exports) {
     var children = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : EmptyArray;
     var vmBeingRendered = getVMBeingRendered();
 
-    var elm;
-    var key = data.key;
-    return {
+    var key = data.key,
+        ref = data.ref;
+    var vnode = {
       type: 2
       /* VNodeType.Element */
       ,
       sel: sel,
       data: data,
       children: children,
-      elm: elm,
+      elm: undefined,
       key: key,
       owner: vmBeingRendered
     };
+
+    if (!isUndefined$1(ref)) {
+      setRefVNode(vmBeingRendered, ref, vnode);
+    }
+
+    return vnode;
   } // [t]ab[i]ndex function
 
 
@@ -4371,7 +4482,8 @@ var LWC = (function (exports) {
     var children = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : EmptyArray;
     var vmBeingRendered = getVMBeingRendered();
 
-    var key = data.key;
+    var key = data.key,
+        ref = data.ref;
     var elm, aChildren, vm;
     var vnode = {
       type: 3
@@ -4389,6 +4501,11 @@ var LWC = (function (exports) {
       vm: vm
     };
     addVNodeToChildLWC(vnode);
+
+    if (!isUndefined$1(ref)) {
+      setRefVNode(vmBeingRendered, ref, vnode);
+    }
+
     return vnode;
   } // [i]terable node
 
@@ -4888,9 +5005,13 @@ var LWC = (function (exports) {
           context.styleVNodes = stylesheetsContent.length === 0 ? null : createStylesheet(vm, stylesheetsContent);
         }
 
-        if ("production" !== 'production') ; // right before producing the vnodes, we clear up all internal references
-        // to custom elements from the template.
+        if ("production" !== 'production') ; // reset the refs; they will be set during the tmpl() instantiation
+
 
+        var hasRefVNodes = Boolean(html.hasRefs);
+        vm.hasRefVNodes = hasRefVNodes;
+        vm.refVNodes = hasRefVNodes ? create(null) : null; // right before producing the vnodes, we clear up all internal references
+        // to custom elements from the template.
 
         vm.velements = []; // Set the global flag that template is being updated
 
@@ -5253,6 +5374,8 @@ var LWC = (function (exports) {
       tagName: tagName,
       mode: mode,
       owner: owner,
+      refVNodes: null,
+      hasRefVNodes: false,
       children: EmptyArray,
       aChildren: EmptyArray,
       velements: EmptyArray,
@@ -6557,7 +6680,7 @@ var LWC = (function (exports) {
 
     return ctor;
   }
-  /* version: 2.23.5 */
+  /* version: 2.24.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -6728,356 +6851,397 @@ var LWC = (function (exports) {
 
 
   function rendererFactory(baseRenderer) {
-    // Util functions
-    function assertInvariant(value, msg) {
-      if (!value) {
-        throw new Error("Invariant Violation: ".concat(msg));
+    var renderer = function (exports) {
+      /**
+       * Copyright (C) 2018 salesforce.com, inc.
+       */
+
+      /*
+       * 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 invariant(value, msg) {
+        if (!value) {
+          throw new Error("Invariant Violation: ".concat(msg));
+        }
       }
-    }
 
-    function isNull(obj) {
-      return obj === null;
-    }
+      function isTrue$1(value, msg) {
+        if (!value) {
+          throw new Error("Assert Violation: ".concat(msg));
+        }
+      }
 
-    function isUndefined(obj) {
-      return obj === undefined;
-    }
+      function isFalse$1(value, msg) {
+        if (value) {
+          throw new Error("Assert Violation: ".concat(msg));
+        }
+      }
 
-    var getCustomElement;
-    var defineCustomElement;
-    var HTMLElementConstructor;
+      function fail(msg) {
+        throw new Error(msg);
+      }
 
-    function isCustomElementRegistryAvailable() {
-      if (typeof customElements === 'undefined') {
-        return false;
+      var assert = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        invariant: invariant,
+        isTrue: isTrue$1,
+        isFalse: isFalse$1,
+        fail: fail
+      });
+
+      function isUndefined(obj) {
+        return obj === undefined;
       }
 
-      try {
-        // dereference HTMLElement global because babel wraps globals in compat mode with a
-        // _wrapNativeSuper()
-        // This is a problem because LWCUpgradableElement extends renderer.HTMLElementExported which does not
-        // get wrapped by babel.
-        var HTMLElementAlias = HTMLElement; // In case we use compat mode with a modern browser, the compat mode transformation
-        // invokes the DOM api with an .apply() or .call() to initialize any DOM api sub-classing,
-        // which are not equipped to be initialized that way.
+      function isNull(obj) {
+        return obj === null;
+      }
+      /** version: 2.24.0 */
 
-        var clazz = /*#__PURE__*/function (_HTMLElementAlias) {
-          _inherits(clazz, _HTMLElementAlias);
+      /*
+       * 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
+       */
 
-          var _super7 = _createSuper(clazz);
 
-          function clazz() {
-            _classCallCheck(this, clazz);
+      exports.getCustomElement = void 0;
+      exports.defineCustomElement = void 0;
+      var HTMLElementConstructor;
 
-            return _super7.apply(this, arguments);
-          }
+      function isCustomElementRegistryAvailable() {
+        if (typeof customElements === 'undefined') {
+          return false;
+        }
 
-          return _createClass(clazz);
-        }(HTMLElementAlias);
+        try {
+          // dereference HTMLElement global because babel wraps globals in compat mode with a
+          // _wrapNativeSuper()
+          // This is a problem because LWCUpgradableElement extends renderer.HTMLElementExported which does not
+          // get wrapped by babel.
+          var HTMLElementAlias = HTMLElement; // In case we use compat mode with a modern browser, the compat mode transformation
+          // invokes the DOM api with an .apply() or .call() to initialize any DOM api sub-classing,
+          // which are not equipped to be initialized that way.
 
-        customElements.define('lwc-test-' + Math.floor(Math.random() * 1000000), clazz);
-        new clazz();
-        return true;
-      } catch (_a) {
-        return false;
-      }
-    }
+          var clazz = /*#__PURE__*/function (_HTMLElementAlias) {
+            _inherits(clazz, _HTMLElementAlias);
 
-    if (isCustomElementRegistryAvailable()) {
-      getCustomElement = customElements.get.bind(customElements);
-      defineCustomElement = customElements.define.bind(customElements);
-      HTMLElementConstructor = HTMLElement;
-    } else {
-      var registry = Object.create(null);
-      var reverseRegistry = new WeakMap();
+            var _super7 = _createSuper(clazz);
 
-      defineCustomElement = function define(name, ctor) {
-        if (name !== String.prototype.toLowerCase.call(name) || registry[name]) {
-          throw new TypeError("Invalid Registration");
-        }
+            function clazz() {
+              _classCallCheck(this, clazz);
 
-        registry[name] = ctor;
-        reverseRegistry.set(ctor, name);
-      };
+              return _super7.apply(this, arguments);
+            }
 
-      getCustomElement = function get(name) {
-        return registry[name];
-      };
+            return _createClass(clazz);
+          }(HTMLElementAlias);
 
-      HTMLElementConstructor = function HTMLElement() {
-        if (!(this instanceof HTMLElement)) {
-          throw new TypeError("Invalid Invocation");
+          customElements.define('lwc-test-' + Math.floor(Math.random() * 1000000), clazz);
+          new clazz();
+          return true;
+        } catch (_a) {
+          return false;
         }
+      }
 
-        var constructor = this.constructor;
-        var name = reverseRegistry.get(constructor);
+      if (isCustomElementRegistryAvailable()) {
+        exports.getCustomElement = customElements.get.bind(customElements);
+        exports.defineCustomElement = customElements.define.bind(customElements);
+        HTMLElementConstructor = HTMLElement;
+      } else {
+        var registry = Object.create(null);
+        var reverseRegistry = new WeakMap();
 
-        if (!name) {
-          throw new TypeError("Invalid Construction");
-        }
+        exports.defineCustomElement = function define(name, ctor) {
+          if (name !== String.prototype.toLowerCase.call(name) || registry[name]) {
+            throw new TypeError("Invalid Registration");
+          }
 
-        var elm = document.createElement(name);
-        Object.setPrototypeOf(elm, constructor.prototype);
-        return elm;
-      };
+          registry[name] = ctor;
+          reverseRegistry.set(ctor, name);
+        };
 
-      HTMLElementConstructor.prototype = HTMLElement.prototype;
-    }
+        exports.getCustomElement = function get(name) {
+          return registry[name];
+        };
 
-    function cloneNode(node, deep) {
-      return node.cloneNode(deep);
-    }
+        HTMLElementConstructor = function HTMLElement() {
+          if (!(this instanceof HTMLElement)) {
+            throw new TypeError("Invalid Invocation");
+          }
 
-    function createElement(tagName, namespace) {
-      return isUndefined(namespace) ? document.createElement(tagName) : document.createElementNS(namespace, tagName);
-    }
+          var constructor = this.constructor;
+          var name = reverseRegistry.get(constructor);
 
-    function createText(content) {
-      return document.createTextNode(content);
-    }
+          if (!name) {
+            throw new TypeError("Invalid Construction");
+          }
 
-    function createComment(content) {
-      return document.createComment(content);
-    }
+          var elm = document.createElement(name);
+          Object.setPrototypeOf(elm, constructor.prototype);
+          return elm;
+        };
+
+        HTMLElementConstructor.prototype = HTMLElement.prototype;
+      }
 
-    var createFragment; // IE11 lacks support for this feature
+      function cloneNode(node, deep) {
+        return node.cloneNode(deep);
+      }
 
-    var SUPPORTS_TEMPLATE = typeof HTMLTemplateElement === 'function';
+      function createElement(tagName, namespace) {
+        return isUndefined(namespace) ? document.createElement(tagName) : document.createElementNS(namespace, tagName);
+      }
 
-    if (SUPPORTS_TEMPLATE) {
-      // Parse the fragment HTML string into DOM
-      createFragment = function createFragment(html) {
-        var 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.
-      var 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
-
-      var getTagName = function getTagName(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 createFragment(html) {
-        var wrapperTags = topLevelWrappingMap[getTagName(html)];
-
-        if (!isUndefined(wrapperTags)) {
-          var _iterator5 = _createForOfIteratorHelper(wrapperTags),
-              _step5;
-
-          try {
-            for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
-              var wrapperTag = _step5.value;
-              html = "<".concat(wrapperTag, ">").concat(html, "</").concat(wrapperTag, ">");
+      function createText(content) {
+        return document.createTextNode(content);
+      }
+
+      function createComment(content) {
+        return document.createComment(content);
+      }
+
+      exports.createFragment = void 0; // IE11 lacks support for this feature
+
+      var SUPPORTS_TEMPLATE = typeof HTMLTemplateElement === 'function';
+
+      if (SUPPORTS_TEMPLATE) {
+        // Parse the fragment HTML string into DOM
+        exports.createFragment = function (html) {
+          var 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.
+        var 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
+
+        var getTagName = function getTagName(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
+
+
+        exports.createFragment = function (html) {
+          var wrapperTags = topLevelWrappingMap[getTagName(html)];
+
+          if (!isUndefined(wrapperTags)) {
+            var _iterator6 = _createForOfIteratorHelper(wrapperTags),
+                _step6;
+
+            try {
+              for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
+                var wrapperTag = _step6.value;
+                html = "<".concat(wrapperTag, ">").concat(html, "</").concat(wrapperTag, ">");
+              }
+            } catch (err) {
+              _iterator6.e(err);
+            } finally {
+              _iterator6.f();
             }
-          } catch (err) {
-            _iterator5.e(err);
-          } finally {
-            _iterator5.f();
-          }
-        } // 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
+          } // 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
 
 
-        var doc = document.implementation.createHTMLDocument('');
-        doc.body.innerHTML = html;
-        var content = doc.body;
+          var doc = document.implementation.createHTMLDocument('');
+          doc.body.innerHTML = html;
+          var content = doc.body;
 
-        if (!isUndefined(wrapperTags)) {
-          for (var _i32 = 0; _i32 < wrapperTags.length; _i32++) {
-            content = content.firstChild;
+          if (!isUndefined(wrapperTags)) {
+            for (var _i32 = 0; _i32 < wrapperTags.length; _i32++) {
+              content = content.firstChild;
+            }
           }
-        }
 
-        return content.firstChild;
-      };
-    }
+          return content.firstChild;
+        };
+      }
 
-    function insert(node, parent, anchor) {
-      parent.insertBefore(node, anchor);
-    }
+      function insert(node, parent, anchor) {
+        parent.insertBefore(node, anchor);
+      }
 
-    function remove(node, parent) {
-      parent.removeChild(node);
-    }
+      function remove(node, parent) {
+        parent.removeChild(node);
+      }
 
-    function nextSibling(node) {
-      return node.nextSibling;
-    }
+      function nextSibling(node) {
+        return node.nextSibling;
+      }
+
+      function attachShadow(element, options) {
+        // `shadowRoot` will be non-null in two cases:
+        //   1. upon initial load with an SSR-generated DOM, while in Shadow render mode
+        //   2. when a webapp author places <c-app> in their static HTML and mounts their
+        //      root component with customElement.define('c-app', Ctor)
+        if (!isNull(element.shadowRoot)) {
+          return element.shadowRoot;
+        }
 
-    function attachShadow(element, options) {
-      // `shadowRoot` will be non-null in two cases:
-      //   1. upon initial load with an SSR-generated DOM, while in Shadow render mode
-      //   2. when a webapp author places <c-app> in their static HTML and mounts their
-      //      root component with customElement.define('c-app', Ctor)
-      if (!isNull(element.shadowRoot)) {
-        return element.shadowRoot;
+        return element.attachShadow(options);
       }
 
-      return element.attachShadow(options);
-    }
+      function setText(node, content) {
+        node.nodeValue = content;
+      }
 
-    function setText(node, content) {
-      node.nodeValue = content;
-    }
+      function getProperty(node, key) {
+        return node[key];
+      }
 
-    function getProperty(node, key) {
-      return node[key];
-    }
+      function setProperty(node, key, value) {
+        node[key] = value;
+      }
 
-    function setProperty(node, key, value) {
-      node[key] = value;
-    }
+      function getAttribute(element, name, namespace) {
+        return isUndefined(namespace) ? element.getAttribute(name) : element.getAttributeNS(namespace, name);
+      }
 
-    function getAttribute(element, name, namespace) {
-      return isUndefined(namespace) ? element.getAttribute(name) : element.getAttributeNS(namespace, name);
-    }
+      function setAttribute(element, name, value, namespace) {
+        return isUndefined(namespace) ? element.setAttribute(name, value) : element.setAttributeNS(namespace, name, value);
+      }
 
-    function setAttribute(element, name, value, namespace) {
-      return isUndefined(namespace) ? element.setAttribute(name, value) : element.setAttributeNS(namespace, name, value);
-    }
+      function removeAttribute(element, name, namespace) {
+        if (isUndefined(namespace)) {
+          element.removeAttribute(name);
+        } else {
+          element.removeAttributeNS(namespace, name);
+        }
+      }
 
-    function removeAttribute(element, name, namespace) {
-      if (isUndefined(namespace)) {
-        element.removeAttribute(name);
-      } else {
-        element.removeAttributeNS(namespace, name);
+      function addEventListener(target, type, callback, options) {
+        target.addEventListener(type, callback, options);
       }
-    }
 
-    function addEventListener(target, type, callback, options) {
-      target.addEventListener(type, callback, options);
-    }
+      function removeEventListener(target, type, callback, options) {
+        target.removeEventListener(type, callback, options);
+      }
 
-    function removeEventListener(target, type, callback, options) {
-      target.removeEventListener(type, callback, options);
-    }
+      function dispatchEvent(target, event) {
+        return target.dispatchEvent(event);
+      }
 
-    function dispatchEvent(target, event) {
-      return target.dispatchEvent(event);
-    }
+      function getClassList(element) {
+        return element.classList;
+      }
 
-    function getClassList(element) {
-      return element.classList;
-    }
+      function setCSSStyleProperty(element, name, value, important) {
+        // TODO [#0]: How to avoid this type casting? Shall we use a different type interface to
+        // represent elements in the engine?
+        element.style.setProperty(name, value, important ? 'important' : '');
+      }
 
-    function setCSSStyleProperty(element, name, value, important) {
-      // TODO [#0]: How to avoid this type casting? Shall we use a different type interface to
-      // represent elements in the engine?
-      element.style.setProperty(name, value, important ? 'important' : '');
-    }
+      function getBoundingClientRect(element) {
+        return element.getBoundingClientRect();
+      }
 
-    function getBoundingClientRect(element) {
-      return element.getBoundingClientRect();
-    }
+      function querySelector(element, selectors) {
+        return element.querySelector(selectors);
+      }
 
-    function querySelector(element, selectors) {
-      return element.querySelector(selectors);
-    }
+      function querySelectorAll(element, selectors) {
+        return element.querySelectorAll(selectors);
+      }
 
-    function querySelectorAll(element, selectors) {
-      return element.querySelectorAll(selectors);
-    }
+      function getElementsByTagName(element, tagNameOrWildCard) {
+        return element.getElementsByTagName(tagNameOrWildCard);
+      }
 
-    function getElementsByTagName(element, tagNameOrWildCard) {
-      return element.getElementsByTagName(tagNameOrWildCard);
-    }
+      function getElementsByClassName(element, names) {
+        return element.getElementsByClassName(names);
+      }
 
-    function getElementsByClassName(element, names) {
-      return element.getElementsByClassName(names);
-    }
+      function getChildren(element) {
+        return element.children;
+      }
 
-    function getChildren(element) {
-      return element.children;
-    }
+      function getChildNodes(element) {
+        return element.childNodes;
+      }
 
-    function getChildNodes(element) {
-      return element.childNodes;
-    }
+      function getFirstChild(element) {
+        return element.firstChild;
+      }
 
-    function getFirstChild(element) {
-      return element.firstChild;
-    }
+      function getFirstElementChild(element) {
+        return element.firstElementChild;
+      }
 
-    function getFirstElementChild(element) {
-      return element.firstElementChild;
-    }
+      function getLastChild(element) {
+        return element.lastChild;
+      }
 
-    function getLastChild(element) {
-      return element.lastChild;
-    }
+      function getLastElementChild(element) {
+        return element.lastElementChild;
+      }
 
-    function getLastElementChild(element) {
-      return element.lastElementChild;
-    }
+      function isConnected(node) {
+        return node.isConnected;
+      }
 
-    function isConnected(node) {
-      return node.isConnected;
-    }
+      function assertInstanceOfHTMLElement(elm, msg) {
+        assert.invariant(elm instanceof HTMLElement, msg);
+      }
 
-    function assertInstanceOfHTMLElement(elm, msg) {
-      assertInvariant(elm instanceof HTMLElement, msg);
-    }
+      var HTMLElementExported = HTMLElementConstructor;
+      exports.HTMLElementExported = HTMLElementExported;
+      exports.addEventListener = addEventListener;
+      exports.assertInstanceOfHTMLElement = assertInstanceOfHTMLElement;
+      exports.attachShadow = attachShadow;
+      exports.cloneNode = cloneNode;
+      exports.createComment = createComment;
+      exports.createElement = createElement;
+      exports.createText = createText;
+      exports.dispatchEvent = dispatchEvent;
+      exports.getAttribute = getAttribute;
+      exports.getBoundingClientRect = getBoundingClientRect;
+      exports.getChildNodes = getChildNodes;
+      exports.getChildren = getChildren;
+      exports.getClassList = getClassList;
+      exports.getElementsByClassName = getElementsByClassName;
+      exports.getElementsByTagName = getElementsByTagName;
+      exports.getFirstChild = getFirstChild;
+      exports.getFirstElementChild = getFirstElementChild;
+      exports.getLastChild = getLastChild;
+      exports.getLastElementChild = getLastElementChild;
+      exports.getProperty = getProperty;
+      exports.insert = insert;
+      exports.isConnected = isConnected;
+      exports.nextSibling = nextSibling;
+      exports.querySelector = querySelector;
+      exports.querySelectorAll = querySelectorAll;
+      exports.remove = remove;
+      exports.removeAttribute = removeAttribute;
+      exports.removeEventListener = removeEventListener;
+      exports.setAttribute = setAttribute;
+      exports.setCSSStyleProperty = setCSSStyleProperty;
+      exports.setProperty = setProperty;
+      exports.setText = setText;
+      return exports;
+    }({}); // Meant to inherit any properties passed via the base renderer as the argument to the factory.
 
-    var HTMLElementExported = HTMLElementConstructor;
-    var renderer = {
-      HTMLElementExported: HTMLElementExported,
-      insert: insert,
-      remove: remove,
-      cloneNode: cloneNode,
-      createFragment: createFragment,
-      createElement: createElement,
-      createText: createText,
-      createComment: createComment,
-      nextSibling: nextSibling,
-      attachShadow: attachShadow,
-      getProperty: getProperty,
-      setProperty: setProperty,
-      setText: setText,
-      getAttribute: getAttribute,
-      setAttribute: setAttribute,
-      removeAttribute: removeAttribute,
-      addEventListener: addEventListener,
-      removeEventListener: removeEventListener,
-      dispatchEvent: dispatchEvent,
-      getClassList: getClassList,
-      setCSSStyleProperty: setCSSStyleProperty,
-      getBoundingClientRect: getBoundingClientRect,
-      querySelector: querySelector,
-      querySelectorAll: querySelectorAll,
-      getElementsByTagName: getElementsByTagName,
-      getElementsByClassName: getElementsByClassName,
-      getChildren: getChildren,
-      getChildNodes: getChildNodes,
-      getFirstChild: getFirstChild,
-      getFirstElementChild: getFirstElementChild,
-      getLastChild: getLastChild,
-      getLastElementChild: getLastElementChild,
-      isConnected: isConnected,
-      assertInstanceOfHTMLElement: assertInstanceOfHTMLElement,
-      defineCustomElement: defineCustomElement,
-      getCustomElement: getCustomElement
-    }; // Meant to inherit any properties passed via the base renderer as the argument to the factory.
 
     Object.setPrototypeOf(renderer, baseRenderer);
     return renderer;
@@ -7458,7 +7622,7 @@ var LWC = (function (exports) {
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.23.5 */
+  /* version: 2.24.0 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;