lwc 2.18.0 → 2.20.0

package/dist/engine-server/commonjs/es2017/engine-server.js

@@ -233,62 +233,44 @@ const KEY__SHADOW_STATIC = '$shadowStaticNode$';
 const KEY__SYNTHETIC_MODE = '$$lwc-synthetic-mode';
 const KEY__SCOPED_CSS = '$scoped$';
 
+/*
+ * Copyright (c) 2022, 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 HTML_NAMESPACE = 'http://www.w3.org/1999/xhtml';
+const XML_NAMESPACE = 'http://www.w3.org/XML/1998/namespace';
+const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
+const XLINK_NAMESPACE = 'http://www.w3.org/1999/xlink';
+
 /*
  * Copyright (c) 2020, 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
  */
-// The following list contains a mix of both void elements from the HTML and the XML namespace
-// without distinction.
-const VOID_ELEMENTS = [
+// Void elements are elements that self-close even without an explicit solidus (slash),
+// e.g. `</tagName>` or `<tagName />`. For instance, `<meta>` closes on its own; no need for a slash.
+// These only come from HTML; there are no void elements in the SVG or MathML namespaces.
+// See: https://html.spec.whatwg.org/multipage/syntax.html#syntax-tags
+const VOID_ELEMENTS_SET = new Set([
     'area',
     'base',
     'br',
-    'circle',
     'col',
-    'ellipse',
-    'feBlend',
-    'feColorMatrix',
-    'feFuncR',
-    'feFuncG',
-    'feFuncB',
-    'feFuncA',
-    'feImage',
-    'feComposite',
-    'feConvolveMatrix',
-    'feDiffuseLighting',
-    'feDisplacementMap',
-    'feDropShadow',
-    'feFlood',
-    'feGaussianBlur',
-    'feMerge',
-    'feMergeNode',
-    'feMorphology',
-    'feOffset',
-    'feSpecularLighting',
-    'feTile',
-    'feTurbulence',
-    'fePointLight',
     'embed',
     'hr',
     'img',
     'input',
-    'keygen',
-    'line',
     'link',
-    'menuitem',
     'meta',
-    'param',
-    'path',
-    'rect',
     'source',
     'track',
     'wbr',
-];
-const VOID_ELEMENTS_SET = new Set(VOID_ELEMENTS);
-function isVoidElement(name) {
-    return VOID_ELEMENTS_SET.has(name);
+]);
+function isVoidElement(name, namespace) {
+    return namespace === HTML_NAMESPACE && VOID_ELEMENTS_SET.has(name.toLowerCase());
 }
 
 /*
@@ -429,9 +411,6 @@ function htmlEscape(str, attrMode = false) {
     const searchValue = attrMode ? /["&]/g : /["'<>&]/g;
     return str.replace(searchValue, (char) => ESCAPED_CHARS[char]);
 }
-const XML_NAMESPACE = 'http://www.w3.org/XML/1998/namespace';
-const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
-const XLINK_NAMESPACE = 'http://www.w3.org/1999/xlink';
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -440,9 +419,9 @@ const XLINK_NAMESPACE = 'http://www.w3.org/1999/xlink';
  * 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.18.0";
+const LWC_VERSION = "2.20.0";
 const LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
-/** version: 2.18.0 */
+/** version: 2.20.0 */
 
 /*
  * Copyright (c) 2020, salesforce.com, inc.
@@ -551,7 +530,7 @@ function setFeatureFlagForTest(name, value) {
         setFeatureFlag(name, value);
     }
 }
-/** version: 2.18.0 */
+/** version: 2.20.0 */
 
 /* proxy-compat-disable */
 
@@ -1956,7 +1935,7 @@ const LightningElement = function () {
     // Linking elm, shadow root and component with the VM.
     associateVM(component, vm);
     associateVM(elm, vm);
-    if (vm.renderMode === 1 /* Shadow */) {
+    if (vm.renderMode === 1 /* RenderMode.Shadow */) {
         vm.renderRoot = doAttachShadow(vm);
     }
     else {
@@ -1972,7 +1951,7 @@ const LightningElement = function () {
 function doAttachShadow(vm) {
     const { elm, mode, shadowMode, def: { ctor }, renderer: { attachShadow }, } = vm;
     const shadowRoot = attachShadow(elm, {
-        [KEY__SYNTHETIC_MODE]: shadowMode === 1 /* Synthetic */,
+        [KEY__SYNTHETIC_MODE]: shadowMode === 1 /* ShadowMode.Synthetic */,
         delegatesFocus: Boolean(ctor.delegatesFocus),
         mode,
     });
@@ -2095,7 +2074,7 @@ LightningElement.prototype = {
     get template() {
         const vm = getAssociatedVM(this);
         if (process.env.NODE_ENV !== 'production') {
-            if (vm.renderMode === 0 /* Light */) {
+            if (vm.renderMode === 0 /* RenderMode.Light */) {
                 logError('`this.template` returns null for light DOM components. Since there is no shadow, the rendered content can be accessed via `this` itself. e.g. instead of `this.template.querySelector`, use `this.querySelector`.');
             }
         }
@@ -2467,13 +2446,13 @@ function internalWireFieldDecorator(key) {
  */
 function getClassDescriptorType(descriptor) {
     if (isFunction$1(descriptor.value)) {
-        return "method" /* Method */;
+        return "method" /* DescriptorType.Method */;
     }
     else if (isFunction$1(descriptor.set) || isFunction$1(descriptor.get)) {
-        return "accessor" /* Accessor */;
+        return "accessor" /* DescriptorType.Accessor */;
     }
     else {
-        return "field" /* Field */;
+        return "field" /* DescriptorType.Field */;
     }
 }
 function validateObservedField(Ctor, fieldName, descriptor) {
@@ -2482,7 +2461,7 @@ function validateObservedField(Ctor, fieldName, descriptor) {
         const message = `Invalid observed ${fieldName} field. Found a duplicate ${type} with the same name.`;
         // [W-9927596] Ideally we always throw an error when detecting duplicate observed field.
         // This branch is only here for backward compatibility reasons.
-        if (type === "accessor" /* Accessor */) {
+        if (type === "accessor" /* DescriptorType.Accessor */) {
             logError(message);
         }
         else {
@@ -2513,7 +2492,7 @@ function validateFieldDecoratedWithApi(Ctor, fieldName, descriptor) {
         const message = `Invalid @api ${fieldName} field. Found a duplicate ${type} with the same name.`;
         // [W-9927596] Ideally we always throw an error when detecting duplicate public properties.
         // This branch is only here for backward compatibility reasons.
-        if (type === "accessor" /* Accessor */) {
+        if (type === "accessor" /* DescriptorType.Accessor */) {
             logError(message);
         }
         else {
@@ -3118,8 +3097,8 @@ function createComponentDef(Ctor) {
         // assert.isTrue(ctorName && isString(ctorName), `${toString(Ctor)} should have a "name" property with string value, but found ${ctorName}.`);
         assert.isTrue(Ctor.constructor, `Missing ${ctorName}.constructor, ${ctorName} should have a "constructor" property.`);
         if (!isUndefined$1(ctorShadowSupportMode)) {
-            assert.invariant(ctorShadowSupportMode === "any" /* Any */ ||
-                ctorShadowSupportMode === "reset" /* Default */, `Invalid value for static property shadowSupportMode: '${ctorShadowSupportMode}'`);
+            assert.invariant(ctorShadowSupportMode === "any" /* ShadowSupportMode.Any */ ||
+                ctorShadowSupportMode === "reset" /* ShadowSupportMode.Default */, `Invalid value for static property shadowSupportMode: '${ctorShadowSupportMode}'`);
         }
         if (!isUndefined$1(ctorRenderMode)) {
             assert.invariant(ctorRenderMode === 'light' || ctorRenderMode === 'shadow', `Invalid value for static property renderMode: '${ctorRenderMode}'. renderMode must be either 'light' or 'shadow'.`);
@@ -3147,7 +3126,7 @@ function createComponentDef(Ctor) {
     }
     let renderMode = superDef.renderMode;
     if (!isUndefined$1(ctorRenderMode)) {
-        renderMode = ctorRenderMode === 'light' ? 0 /* Light */ : 1 /* Shadow */;
+        renderMode = ctorRenderMode === 'light' ? 0 /* RenderMode.Light */ : 1 /* RenderMode.Shadow */;
     }
     const template = getComponentRegisteredTemplate(Ctor) || superDef.template;
     const name = Ctor.name || superDef.name;
@@ -3236,8 +3215,8 @@ const lightingElementDef = {
     props: lightningBasedDescriptors,
     propsConfig: EmptyObject,
     methods: EmptyObject,
-    renderMode: 1 /* Shadow */,
-    shadowSupportMode: "reset" /* Default */,
+    renderMode: 1 /* RenderMode.Shadow */,
+    shadowSupportMode: "reset" /* ShadowSupportMode.Default */,
     wire: EmptyObject,
     bridge: BaseBridgeElement,
     template: defaultEmptyTemplate,
@@ -3259,7 +3238,7 @@ function getComponentDef(Ctor) {
         // avoid leaking the reference to the public props descriptors
         publicProps[key] = {
             config: propsConfig[key] || 0,
-            type: "any" /* any */,
+            type: "any" /* PropDefType.any */,
             attr: htmlPropertyToAttribute(key),
         };
     }
@@ -3316,7 +3295,7 @@ function getUpgradableConstructor(tagName, renderer) {
  */
 function isVBaseElement(vnode) {
     const { type } = vnode;
-    return type === 2 /* Element */ || type === 3 /* CustomElement */;
+    return type === 2 /* VNodeType.Element */ || type === 3 /* VNodeType.CustomElement */;
 }
 function isSameVnode(vnode1, vnode2) {
     return vnode1.key === vnode2.key && vnode1.sel === vnode2.sel;
@@ -3572,21 +3551,21 @@ function patch(n1, n2, renderer) {
         }
     }
     switch (n2.type) {
-        case 0 /* Text */:
+        case 0 /* VNodeType.Text */:
             // VText has no special capability, fallback to the owner's renderer
             patchText(n1, n2, renderer);
             break;
-        case 1 /* Comment */:
+        case 1 /* VNodeType.Comment */:
             // VComment has no special capability, fallback to the owner's renderer
             patchComment(n1, n2, renderer);
             break;
-        case 4 /* Static */:
+        case 4 /* VNodeType.Static */:
             n2.elm = n1.elm;
             break;
-        case 2 /* Element */:
+        case 2 /* VNodeType.Element */:
             patchElement(n1, n2, (_a = n2.data.renderer) !== null && _a !== void 0 ? _a : renderer);
             break;
-        case 3 /* CustomElement */:
+        case 3 /* VNodeType.CustomElement */:
             patchCustomElement(n1, n2, (_b = n2.data.renderer) !== null && _b !== void 0 ? _b : renderer);
             break;
     }
@@ -3594,23 +3573,23 @@ function patch(n1, n2, renderer) {
 function mount(node, parent, renderer, anchor) {
     var _a, _b;
     switch (node.type) {
-        case 0 /* Text */:
+        case 0 /* VNodeType.Text */:
             // VText has no special capability, fallback to the owner's renderer
             mountText(node, parent, anchor, renderer);
             break;
-        case 1 /* Comment */:
+        case 1 /* VNodeType.Comment */:
             // VComment has no special capability, fallback to the owner's renderer
             mountComment(node, parent, anchor, renderer);
             break;
-        case 4 /* Static */:
+        case 4 /* VNodeType.Static */:
             // VStatic cannot have a custom renderer associated to them, using owner's renderer
             mountStatic(node, parent, anchor, renderer);
             break;
-        case 2 /* Element */:
+        case 2 /* VNodeType.Element */:
             // If the vnode data has a renderer override use it, else fallback to owner's renderer
             mountElement(node, parent, anchor, (_a = node.data.renderer) !== null && _a !== void 0 ? _a : renderer);
             break;
-        case 3 /* CustomElement */:
+        case 3 /* VNodeType.CustomElement */:
             // If the vnode data has a renderer override use it, else fallback to owner's renderer
             mountCustomElement(node, parent, anchor, (_b = node.data.renderer) !== null && _b !== void 0 ? _b : renderer);
             break;
@@ -3669,12 +3648,12 @@ function mountStatic(vnode, parent, anchor, renderer) {
     // Marks this node as Static to propagate the shadow resolver. must happen after elm is assigned to the proper shadow
     const { renderMode, shadowMode } = owner;
     if (isSyntheticShadowDefined) {
-        if (shadowMode === 1 /* Synthetic */ || renderMode === 0 /* Light */) {
+        if (shadowMode === 1 /* ShadowMode.Synthetic */ || renderMode === 0 /* RenderMode.Light */) {
             elm[KEY__SHADOW_STATIC] = true;
         }
     }
     if (process.env.NODE_ENV !== 'production') {
-        const isLight = renderMode === 0 /* Light */;
+        const isLight = renderMode === 0 /* RenderMode.Light */;
         patchElementWithRestrictions(elm, { isPortal: false, isLight });
     }
     insertNode(elm, parent, anchor, renderer);
@@ -3706,7 +3685,7 @@ function mountCustomElement(vnode, parent, anchor, renderer) {
     insertNode(elm, parent, anchor, renderer);
     if (vm) {
         if (process.env.NODE_ENV !== 'production') {
-            assert.isTrue(vm.state === 0 /* created */, `${vm} cannot be recycled.`);
+            assert.isTrue(vm.state === 0 /* VMState.created */, `${vm} cannot be recycled.`);
         }
         runConnectedCallback(vm);
     }
@@ -3751,14 +3730,14 @@ function unmount(vnode, parent, renderer, doRemove = false) {
         removeNode(elm, parent, renderer);
     }
     switch (type) {
-        case 2 /* Element */: {
+        case 2 /* VNodeType.Element */: {
             // Slot content is removed to trigger slotchange event when removing slot.
             // Only required for synthetic shadow.
-            const shouldRemoveChildren = sel === 'slot' && vnode.owner.shadowMode === 1 /* Synthetic */;
+            const shouldRemoveChildren = sel === 'slot' && vnode.owner.shadowMode === 1 /* ShadowMode.Synthetic */;
             unmountVNodes(vnode.children, elm, renderer, shouldRemoveChildren);
             break;
         }
-        case 3 /* CustomElement */: {
+        case 3 /* VNodeType.CustomElement */: {
             const { vm } = vnode;
             // No need to unmount the children here, `removeVM` will take care of removing the
             // children.
@@ -3801,7 +3780,7 @@ function linkNodeToShadow(elm, owner, renderer) {
     const { isSyntheticShadowDefined } = renderer;
     // TODO [#1164]: this should eventually be done by the polyfill directly
     if (isSyntheticShadowDefined) {
-        if (shadowMode === 1 /* Synthetic */ || renderMode === 0 /* Light */) {
+        if (shadowMode === 1 /* ShadowMode.Synthetic */ || renderMode === 0 /* RenderMode.Light */) {
             elm[KEY__SHADOW_RESOLVER] = renderRoot[KEY__SHADOW_RESOLVER];
         }
     }
@@ -3851,12 +3830,12 @@ function patchElementPropsAndAttrs$1(oldVnode, vnode, renderer) {
 function fallbackElmHook(elm, vnode, renderer) {
     const { owner } = vnode;
     setScopeTokenClassIfNecessary(elm, owner, renderer);
-    if (owner.shadowMode === 1 /* Synthetic */) {
+    if (owner.shadowMode === 1 /* ShadowMode.Synthetic */) {
         const { data: { context }, } = vnode;
         const { stylesheetToken } = owner.context;
         if (!isUndefined$1(context) &&
             !isUndefined$1(context.lwc) &&
-            context.lwc.dom === "manual" /* Manual */) {
+            context.lwc.dom === "manual" /* LwcDomMode.Manual */) {
             // this element will now accept any manual content inserted into it
             observeElementChildNodes(elm);
         }
@@ -3870,8 +3849,8 @@ function fallbackElmHook(elm, vnode, renderer) {
         const { data: { context }, } = vnode;
         const isPortal = !isUndefined$1(context) &&
             !isUndefined$1(context.lwc) &&
-            context.lwc.dom === "manual" /* Manual */;
-        const isLight = owner.renderMode === 0 /* Light */;
+            context.lwc.dom === "manual" /* LwcDomMode.Manual */;
+        const isLight = owner.renderMode === 0 /* RenderMode.Light */;
         patchElementWithRestrictions(elm, { isPortal, isLight });
     }
 }
@@ -3889,7 +3868,7 @@ function allocateChildren(vnode, vm) {
     const children = vnode.aChildren || vnode.children;
     vm.aChildren = children;
     const { renderMode, shadowMode } = vm;
-    if (shadowMode === 1 /* Synthetic */ || renderMode === 0 /* Light */) {
+    if (shadowMode === 1 /* ShadowMode.Synthetic */ || renderMode === 0 /* RenderMode.Light */) {
         // slow path
         allocateInSlot(vm, children);
         // save the allocated children in case this vnode is reused.
@@ -3908,7 +3887,7 @@ function createViewModelHook(elm, vnode, renderer) {
     }
     const { sel, mode, ctor, owner } = vnode;
     setScopeTokenClassIfNecessary(elm, owner, renderer);
-    if (owner.shadowMode === 1 /* Synthetic */) {
+    if (owner.shadowMode === 1 /* ShadowMode.Synthetic */) {
         const { stylesheetToken } = owner.context;
         // when running in synthetic shadow mode, we need to set the shadowToken value
         // into each element from the template, so they can be styled accordingly.
@@ -4150,7 +4129,7 @@ function addVNodeToChildLWC(vnode) {
 // [st]atic node
 function st(fragment, key) {
     return {
-        type: 4 /* Static */,
+        type: 4 /* VNodeType.Static */,
         sel: undefined,
         key,
         elm: undefined,
@@ -4184,7 +4163,7 @@ function h(sel, data, children = EmptyArray) {
     let elm;
     const { key } = data;
     return {
-        type: 2 /* Element */,
+        type: 2 /* VNodeType.Element */,
         sel,
         data,
         children,
@@ -4221,11 +4200,11 @@ function s(slotName, data, children, slotset) {
     }
     const vmBeingRendered = getVMBeingRendered();
     const { renderMode, shadowMode } = vmBeingRendered;
-    if (renderMode === 0 /* Light */) {
+    if (renderMode === 0 /* RenderMode.Light */) {
         sc(children);
         return children;
     }
-    if (shadowMode === 1 /* Synthetic */) {
+    if (shadowMode === 1 /* ShadowMode.Synthetic */) {
         // TODO [#1276]: compiler should give us some sort of indicator when a vnodes collection is dynamic
         sc(children);
     }
@@ -4259,7 +4238,7 @@ function c(sel, Ctor, data, children = EmptyArray) {
     const { key } = data;
     let elm, aChildren, vm;
     const vnode = {
-        type: 3 /* CustomElement */,
+        type: 3 /* VNodeType.CustomElement */,
         sel,
         data,
         children,
@@ -4367,7 +4346,7 @@ function f(items) {
 function t(text) {
     let sel, key, elm;
     return {
-        type: 0 /* Text */,
+        type: 0 /* VNodeType.Text */,
         sel,
         text,
         elm,
@@ -4379,7 +4358,7 @@ function t(text) {
 function co(text) {
     let sel, key, elm;
     return {
-        type: 1 /* Comment */,
+        type: 1 /* VNodeType.Comment */,
         sel,
         text,
         elm,
@@ -4428,7 +4407,7 @@ function gid(id) {
         return null;
     }
     const { idx, shadowMode } = vmBeingRendered;
-    if (shadowMode === 1 /* Synthetic */) {
+    if (shadowMode === 1 /* ShadowMode.Synthetic */) {
         return StringReplace.call(id, /\S+/g, (id) => `${id}-${idx}`);
     }
     return id;
@@ -4450,7 +4429,7 @@ function fid(url) {
     }
     const { idx, shadowMode } = vmBeingRendered;
     // Apply transformation only for fragment-only-urls, and only in shadow DOM
-    if (shadowMode === 1 /* Synthetic */ && /^#/.test(url)) {
+    if (shadowMode === 1 /* ShadowMode.Synthetic */ && /^#/.test(url)) {
         return `${url}-${idx}`;
     }
     return url;
@@ -4573,7 +4552,7 @@ function createInlineStyleVNode(content) {
 function updateStylesheetToken(vm, template) {
     const { elm, context, renderMode, shadowMode, renderer: { getClassList, removeAttribute, setAttribute }, } = vm;
     const { stylesheets: newStylesheets, stylesheetToken: newStylesheetToken } = template;
-    const isSyntheticShadow = renderMode === 1 /* Shadow */ && shadowMode === 1 /* Synthetic */;
+    const isSyntheticShadow = renderMode === 1 /* RenderMode.Shadow */ && shadowMode === 1 /* ShadowMode.Synthetic */;
     const { hasScopedStyles } = context;
     let newToken;
     let newHasTokenInClass;
@@ -4629,19 +4608,19 @@ function evaluateStylesheetsContent(stylesheets, stylesheetToken, vm) {
             const isScopedCss = stylesheet[KEY__SCOPED_CSS];
             // Apply the scope token only if the stylesheet itself is scoped, or if we're rendering synthetic shadow.
             const scopeToken = isScopedCss ||
-                (vm.shadowMode === 1 /* Synthetic */ && vm.renderMode === 1 /* Shadow */)
+                (vm.shadowMode === 1 /* ShadowMode.Synthetic */ && vm.renderMode === 1 /* RenderMode.Shadow */)
                 ? stylesheetToken
                 : undefined;
             // Use the actual `:host` selector if we're rendering global CSS for light DOM, or if we're rendering
             // native shadow DOM. Synthetic shadow DOM never uses `:host`.
-            const useActualHostSelector = vm.renderMode === 0 /* Light */
+            const useActualHostSelector = vm.renderMode === 0 /* RenderMode.Light */
                 ? !isScopedCss
-                : vm.shadowMode === 0 /* Native */;
+                : vm.shadowMode === 0 /* ShadowMode.Native */;
             // Use the native :dir() pseudoclass only in native shadow DOM. Otherwise, in synthetic shadow,
             // we use an attribute selector on the host to simulate :dir().
             let useNativeDirPseudoclass;
-            if (vm.renderMode === 1 /* Shadow */) {
-                useNativeDirPseudoclass = vm.shadowMode === 0 /* Native */;
+            if (vm.renderMode === 1 /* RenderMode.Shadow */) {
+                useNativeDirPseudoclass = vm.shadowMode === 0 /* ShadowMode.Native */;
             }
             else {
                 // Light DOM components should only render `[dir]` if they're inside of a synthetic shadow root.
@@ -4650,7 +4629,7 @@ function evaluateStylesheetsContent(stylesheets, stylesheetToken, vm) {
                     // Only calculate the root once as necessary
                     root = getNearestShadowComponent(vm);
                 }
-                useNativeDirPseudoclass = isNull(root) || root.shadowMode === 0 /* Native */;
+                useNativeDirPseudoclass = isNull(root) || root.shadowMode === 0 /* ShadowMode.Native */;
             }
             ArrayPush$1.call(content, stylesheet(scopeToken, useActualHostSelector, useNativeDirPseudoclass));
         }
@@ -4671,7 +4650,7 @@ function getStylesheetsContent(vm, template) {
 function getNearestShadowComponent(vm) {
     let owner = vm;
     while (!isNull(owner)) {
-        if (owner.renderMode === 1 /* Shadow */) {
+        if (owner.renderMode === 1 /* RenderMode.Shadow */) {
             return owner;
         }
         owner = owner.owner;
@@ -4680,7 +4659,7 @@ function getNearestShadowComponent(vm) {
 }
 function getNearestNativeShadowComponent(vm) {
     const owner = getNearestShadowComponent(vm);
-    if (!isNull(owner) && owner.shadowMode === 1 /* Synthetic */) {
+    if (!isNull(owner) && owner.shadowMode === 1 /* ShadowMode.Synthetic */) {
         // Synthetic-within-native is impossible. So if the nearest shadow component is
         // synthetic, we know we won't find a native component if we go any further.
         return null;
@@ -4689,7 +4668,7 @@ function getNearestNativeShadowComponent(vm) {
 }
 function createStylesheet(vm, stylesheets) {
     const { renderMode, shadowMode, renderer: { ssr, insertStylesheet }, } = vm;
-    if (renderMode === 1 /* Shadow */ && shadowMode === 1 /* Synthetic */) {
+    if (renderMode === 1 /* RenderMode.Shadow */ && shadowMode === 1 /* ShadowMode.Synthetic */) {
         for (let i = 0; i < stylesheets.length; i++) {
             insertStylesheet(stylesheets[i]);
         }
@@ -4814,11 +4793,11 @@ function validateSlots(vm, html) {
     const { cmpSlots } = vm;
     const { slots = EmptyArray } = html;
     for (const slotName in cmpSlots) {
-        // eslint-disable-next-line lwc-internal/no-production-assert
+        // eslint-disable-next-line @lwc/lwc-internal/no-production-assert
         assert.isTrue(isArray$1(cmpSlots[slotName]), `Slots can only be set to an array, instead received ${toString$1(cmpSlots[slotName])} for slot "${slotName}" in ${vm}.`);
         if (slotName !== '' && ArrayIndexOf.call(slots, slotName) === -1) {
             // TODO [#1297]: this should never really happen because the compiler should always validate
-            // eslint-disable-next-line lwc-internal/no-production-assert
+            // eslint-disable-next-line @lwc/lwc-internal/no-production-assert
             logError(`Ignoring unknown provided slot name "${slotName}" in ${vm}. Check for a typo on the slot attribute.`, vm);
         }
     }
@@ -4826,7 +4805,7 @@ function validateSlots(vm, html) {
 function validateLightDomTemplate(template, vm) {
     if (template === defaultEmptyTemplate)
         return;
-    if (vm.renderMode === 0 /* Light */) {
+    if (vm.renderMode === 0 /* RenderMode.Light */) {
         assert.isTrue(template.renderMode === 'light', `Light DOM components can't render shadow DOM templates. Add an 'lwc:render-mode="light"' directive to the root template tag of ${getComponentTag(vm)}.`);
     }
     else {
@@ -4839,13 +4818,13 @@ function buildParseFragmentFn(createFragmentFn) {
         return function () {
             const { context: { hasScopedStyles, stylesheetToken }, shadowMode, renderer, } = getVMBeingRendered();
             const hasStyleToken = !isUndefined$1(stylesheetToken);
-            const isSyntheticShadow = shadowMode === 1 /* Synthetic */;
+            const isSyntheticShadow = shadowMode === 1 /* ShadowMode.Synthetic */;
             let cacheKey = 0;
             if (hasStyleToken && hasScopedStyles) {
-                cacheKey |= 1 /* HAS_SCOPED_STYLE */;
+                cacheKey |= 1 /* FragmentCache.HAS_SCOPED_STYLE */;
             }
             if (hasStyleToken && isSyntheticShadow) {
-                cacheKey |= 2 /* SHADOW_MODE_SYNTHETIC */;
+                cacheKey |= 2 /* FragmentCache.SHADOW_MODE_SYNTHETIC */;
             }
             if (!isUndefined$1(cache[cacheKey])) {
                 return cache[cacheKey];
@@ -4895,7 +4874,7 @@ function evaluateTemplate(vm, html) {
     runWithBoundaryProtection(vm, vm.owner, () => {
         // pre
         vmBeingRendered = vm;
-        logOperationStart(1 /* Render */, vm);
+        logOperationStart(1 /* OperationId.Render */, vm);
     }, () => {
         // job
         const { component, context, cmpSlots, cmpTemplate, tro } = vm;
@@ -4953,7 +4932,7 @@ function evaluateTemplate(vm, html) {
         // post
         isUpdatingTemplate = isUpdatingTemplateInception;
         vmBeingRendered = vmOfTemplateBeingUpdatedInception;
-        logOperationEnd(1 /* Render */, vm);
+        logOperationEnd(1 /* OperationId.Render */, vm);
     });
     if (process.env.NODE_ENV !== 'production') {
         assert.invariant(isArray$1(vnodes), `Compiler should produce html functions that always return an array.`);
@@ -4992,7 +4971,7 @@ function invokeComponentCallback(vm, fn, args) {
 function invokeComponentConstructor(vm, Ctor) {
     const vmBeingConstructedInception = vmBeingConstructed;
     let error;
-    logOperationStart(0 /* Constructor */, vm);
+    logOperationStart(0 /* OperationId.Constructor */, vm);
     vmBeingConstructed = vm;
     /**
      * Constructors don't need to be wrapped with a boundary because for root elements
@@ -5014,7 +4993,7 @@ function invokeComponentConstructor(vm, Ctor) {
         error = Object(e);
     }
     finally {
-        logOperationEnd(0 /* Constructor */, vm);
+        logOperationEnd(0 /* OperationId.Constructor */, vm);
         vmBeingConstructed = vmBeingConstructedInception;
         if (!isUndefined$1(error)) {
             addErrorComponentStack(vm, error);
@@ -5195,12 +5174,12 @@ function rerenderVM(vm) {
 function connectRootElement(elm) {
   const vm = getAssociatedVM(elm);
   logGlobalOperationStart(7
-  /* GlobalHydrate */
+  /* OperationId.GlobalHydrate */
   , vm); // Usually means moving the element from one place to another, which is observable via
   // life-cycle hooks.
 
   if (vm.state === 1
-  /* connected */
+  /* VMState.connected */
   ) {
     disconnectRootElement(elm);
   }
@@ -5208,7 +5187,7 @@ function connectRootElement(elm) {
   runConnectedCallback(vm);
   rehydrate(vm);
   logGlobalOperationEnd(7
-  /* GlobalHydrate */
+  /* OperationId.GlobalHydrate */
   , vm);
 }
 function disconnectRootElement(elm) {
@@ -5226,7 +5205,7 @@ function resetComponentStateWhenRemoved(vm) {
   } = vm;
 
   if (state !== 2
-  /* disconnected */
+  /* VMState.disconnected */
   ) {
     const {
       oar,
@@ -5255,9 +5234,9 @@ function resetComponentStateWhenRemoved(vm) {
 function removeVM(vm) {
   if (process.env.NODE_ENV !== 'production') {
     assert.isTrue(vm.state === 1
-    /* connected */
+    /* VMState.connected */
     || vm.state === 2
-    /* disconnected */
+    /* VMState.disconnected */
     , `${vm} must have been connected.`);
   }
 
@@ -5268,7 +5247,7 @@ function getNearestShadowAncestor(vm) {
   let ancestor = vm.owner;
 
   while (!isNull(ancestor) && ancestor.renderMode === 0
-  /* Light */
+  /* RenderMode.Light */
   ) {
     ancestor = ancestor.owner;
   }
@@ -5289,7 +5268,7 @@ function createVM(elm, ctor, renderer, options) {
     def,
     idx: idx++,
     state: 0
-    /* created */
+    /* VMState.created */
     ,
     isScheduled: false,
     isDirty: true,
@@ -5338,7 +5317,7 @@ function createVM(elm, ctor, renderer, options) {
 
     if (runtimeFlags.ENABLE_FORCE_NATIVE_SHADOW_MODE_FOR_TEST) {
       vm.shadowMode = 0
-      /* Native */
+      /* ShadowMode.Native */
       ;
     }
   } // Create component instance associated to the vm and the element.
@@ -5365,57 +5344,57 @@ function computeShadowMode(vm, renderer) {
 
   if (isSyntheticShadowDefined) {
     if (def.renderMode === 0
-    /* Light */
+    /* RenderMode.Light */
     ) {
       // ShadowMode.Native implies "not synthetic shadow" which is consistent with how
       // everything defaults to native when the synthetic shadow polyfill is unavailable.
       shadowMode = 0
-      /* Native */
+      /* ShadowMode.Native */
       ;
     } else if (isNativeShadowDefined) {
       // Not combined with above condition because @lwc/features only supports identifiers in
       // the if-condition.
       if (runtimeFlags.ENABLE_MIXED_SHADOW_MODE) {
         if (def.shadowSupportMode === "any"
-        /* Any */
+        /* ShadowSupportMode.Any */
         ) {
           shadowMode = 0
-          /* Native */
+          /* ShadowMode.Native */
           ;
         } else {
           const shadowAncestor = getNearestShadowAncestor(vm);
 
           if (!isNull(shadowAncestor) && shadowAncestor.shadowMode === 0
-          /* Native */
+          /* ShadowMode.Native */
           ) {
             // Transitive support for native Shadow DOM. A component in native mode
             // transitively opts all of its descendants into native.
             shadowMode = 0
-            /* Native */
+            /* ShadowMode.Native */
             ;
           } else {
             // Synthetic if neither this component nor any of its ancestors are configured
             // to be native.
             shadowMode = 1
-            /* Synthetic */
+            /* ShadowMode.Synthetic */
             ;
           }
         }
       } else {
         shadowMode = 1
-        /* Synthetic */
+        /* ShadowMode.Synthetic */
         ;
       }
     } else {
       // Synthetic if there is no native Shadow DOM support.
       shadowMode = 1
-      /* Synthetic */
+      /* ShadowMode.Synthetic */
       ;
     }
   } else {
     // Native if the synthetic shadow polyfill is unavailable.
     shadowMode = 0
-    /* Native */
+    /* ShadowMode.Native */
     ;
   }
 
@@ -5475,7 +5454,7 @@ function patchShadowRoot(vm, newCh) {
       runWithBoundaryProtection(vm, vm, () => {
         // pre
         logOperationStart(2
-        /* Patch */
+        /* OperationId.Patch */
         , vm);
       }, () => {
         // job
@@ -5483,14 +5462,14 @@ function patchShadowRoot(vm, newCh) {
       }, () => {
         // post
         logOperationEnd(2
-        /* Patch */
+        /* OperationId.Patch */
         , vm);
       });
     }
   }
 
   if (vm.state === 1
-  /* connected */
+  /* VMState.connected */
   ) {
     // If the element is connected, that means connectedCallback was already issued, and
     // any successive rendering should finish with the call to renderedCallback, otherwise
@@ -5524,11 +5503,11 @@ function runRenderedCallback(vm) {
 
   if (!isUndefined$1(renderedCallback)) {
     logOperationStart(4
-    /* RenderedCallback */
+    /* OperationId.RenderedCallback */
     , vm);
     invokeComponentCallback(vm, renderedCallback);
     logOperationEnd(4
-    /* RenderedCallback */
+    /* OperationId.RenderedCallback */
     , vm);
   }
 }
@@ -5536,7 +5515,7 @@ let rehydrateQueue = [];
 
 function flushRehydrationQueue() {
   logGlobalOperationStart(8
-  /* GlobalRehydrate */
+  /* OperationId.GlobalRehydrate */
   );
 
   if (process.env.NODE_ENV !== 'production') {
@@ -5563,7 +5542,7 @@ function flushRehydrationQueue() {
 
 
       logGlobalOperationEnd(8
-      /* GlobalRehydrate */
+      /* OperationId.GlobalRehydrate */
       ); // re-throwing the original error will break the current tick, but since the next tick is
       // already scheduled, it should continue patching the rest.
 
@@ -5572,7 +5551,7 @@ function flushRehydrationQueue() {
   }
 
   logGlobalOperationEnd(8
-  /* GlobalRehydrate */
+  /* OperationId.GlobalRehydrate */
   );
 }
 
@@ -5582,13 +5561,13 @@ function runConnectedCallback(vm) {
   } = vm;
 
   if (state === 1
-  /* connected */
+  /* VMState.connected */
   ) {
     return; // nothing to do since it was already connected
   }
 
   vm.state = 1
-  /* connected */
+  /* VMState.connected */
   ; // reporting connection
 
   const {
@@ -5609,11 +5588,11 @@ function runConnectedCallback(vm) {
 
   if (!isUndefined$1(connectedCallback)) {
     logOperationStart(3
-    /* ConnectedCallback */
+    /* OperationId.ConnectedCallback */
     , vm);
     invokeComponentCallback(vm, connectedCallback);
     logOperationEnd(3
-    /* ConnectedCallback */
+    /* OperationId.ConnectedCallback */
     , vm);
   }
 }
@@ -5625,7 +5604,7 @@ function hasWireAdapters(vm) {
 function runDisconnectedCallback(vm) {
   if (process.env.NODE_ENV !== 'production') {
     assert.isTrue(vm.state !== 2
-    /* disconnected */
+    /* VMState.disconnected */
     , `${vm} must be inserted.`);
   }
 
@@ -5638,7 +5617,7 @@ function runDisconnectedCallback(vm) {
   }
 
   vm.state = 2
-  /* disconnected */
+  /* VMState.disconnected */
   ; // reporting disconnection
 
   const {
@@ -5659,11 +5638,11 @@ function runDisconnectedCallback(vm) {
 
   if (!isUndefined$1(disconnectedCallback)) {
     logOperationStart(5
-    /* DisconnectedCallback */
+    /* OperationId.DisconnectedCallback */
     , vm);
     invokeComponentCallback(vm, disconnectedCallback);
     logOperationEnd(5
-    /* DisconnectedCallback */
+    /* OperationId.DisconnectedCallback */
     , vm);
   }
 }
@@ -5719,13 +5698,13 @@ function recursivelyDisconnectChildren(vnodes) {
     if (!isNull(vnode) && !isUndefined$1(vnode.elm)) {
       switch (vnode.type) {
         case 2
-        /* Element */
+        /* VNodeType.Element */
         :
           recursivelyDisconnectChildren(vnode.children);
           break;
 
         case 3
-        /* CustomElement */
+        /* VNodeType.CustomElement */
         :
           {
             const vm = getAssociatedVM(vnode.elm);
@@ -5816,13 +5795,13 @@ function runWithBoundaryProtection(vm, owner, pre, job, post) {
       resetComponentRoot(vm); // remove offenders
 
       logOperationStart(6
-      /* ErrorCallback */
+      /* OperationId.ErrorCallback */
       , vm); // error boundaries must have an ErrorCallback
 
       const errorCallback = errorBoundaryVm.def.errorCallback;
       invokeComponentCallback(errorBoundaryVm, errorCallback, [error, error.wcStack]);
       logOperationEnd(6
-      /* ErrorCallback */
+      /* OperationId.ErrorCallback */
       , vm);
     }
   }
@@ -5900,7 +5879,7 @@ function createConfigWatcher(component, configCallback, callbackWhenConfigIsRead
 
   const computeConfigAndUpdate = () => {
     let config;
-    ro.observe(() => config = configCallback(component)); // eslint-disable-next-line lwc-internal/no-invalid-todo
+    ro.observe(() => config = configCallback(component)); // eslint-disable-next-line @lwc/lwc-internal/no-invalid-todo
     // TODO: dev-mode validation of config based on the adapter.configSchema
     // @ts-ignore it is assigned in the observe() callback
 
@@ -5942,7 +5921,7 @@ function createContextWatcher(vm, wireDef, callbackWhenContextIsReady) {
     // guarantee that the linkage can be forged.
     const contextRegistrationEvent = new WireContextRegistrationEvent(adapterContextToken, {
       setNewContext(newContext) {
-        // eslint-disable-next-line lwc-internal/no-invalid-todo
+        // eslint-disable-next-line @lwc/lwc-internal/no-invalid-todo
         // TODO: dev-mode validation of config based on the adapter.contextSchema
         callbackWhenContextIsReady(newContext);
       },
@@ -6006,7 +5985,7 @@ function createConnector(vm, name, wireDef) {
         // (ever), while context can have identity
 
         if (vm.state === 1
-        /* connected */
+        /* VMState.connected */
         ) {
           computeConfigAndUpdate();
         }
@@ -6294,7 +6273,7 @@ function freezeTemplate(tmpl) {
         });
     }
 }
-/* version: 2.18.0 */
+/* version: 2.20.0 */
 
 /*
  * Copyright (c) 2020, salesforce.com, inc.
@@ -6336,10 +6315,11 @@ function unsupportedMethod(name) {
         throw new TypeError(`"${name}" is not supported in this environment`);
     };
 }
-function createElement(name) {
+function createElement(name, namespace) {
     return {
         type: HostNodeType.Element,
         name,
+        namespace: namespace !== null && namespace !== void 0 ? namespace : HTML_NAMESPACE,
         parent: null,
         shadowRoot: null,
         children: [],
@@ -6686,15 +6666,22 @@ function serializeShadowRoot(shadowRoot) {
 }
 function serializeElement(element) {
     let output = '';
-    const { name } = element;
+    const { name, namespace } = element;
+    const isForeignElement = namespace !== HTML_NAMESPACE;
+    const hasChildren = element.children.length > 0;
     const attrs = element.attributes.length ? ` ${serializeAttributes(element.attributes)}` : '';
-    const children = serializeChildNodes(element.children);
-    output += `<${name}${attrs}>`;
+    output += `<${name}${attrs}`;
+    // Note that foreign elements can have children but not shadow roots
+    if (isForeignElement && !hasChildren) {
+        output += '/>';
+        return output;
+    }
+    output += '>';
     if (element.shadowRoot) {
         output += serializeShadowRoot(element.shadowRoot);
     }
-    output += children;
-    if (!isVoidElement(name)) {
+    output += serializeChildNodes(element.children);
+    if (!isVoidElement(name, namespace) || hasChildren) {
         output += `</${name}>`;
     }
     return output;
@@ -6709,6 +6696,7 @@ function serializeElement(element) {
 const FakeRootElement = {
     type: HostNodeType.Element,
     name: 'fake-root-element',
+    namespace: HTML_NAMESPACE,
     parent: null,
     shadowRoot: null,
     children: [],
@@ -6747,7 +6735,7 @@ function renderComponent(tagName, Ctor, props = {}) {
  */
 freeze(LightningElement);
 seal(LightningElement.prototype);
-/* version: 2.18.0 */
+/* version: 2.20.0 */
 
 exports.LightningElement = LightningElement;
 exports.api = api$1;