lwc 2.20.2 → 2.21.0

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

@@ -415,9 +415,9 @@ function htmlEscape(str, attrMode = false) {
  * 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.20.2";
+const LWC_VERSION = "2.21.0";
 const LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
-/** version: 2.20.2 */
+/** version: 2.21.0 */
 
 /*
  * Copyright (c) 2020, salesforce.com, inc.
@@ -526,7 +526,7 @@ function setFeatureFlagForTest(name, value) {
         setFeatureFlag(name, value);
     }
 }
-/** version: 2.20.2 */
+/** version: 2.21.0 */
 
 /* proxy-compat-disable */
 
@@ -3251,6 +3251,175 @@ function getComponentDef(Ctor) {
     };
 }
 
+/*
+ * 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 makeHostToken(token) {
+    return `${token}-host`;
+}
+function createInlineStyleVNode(content) {
+    return api.h('style', {
+        key: 'style',
+        attrs: {
+            type: 'text/css',
+        },
+    }, [api.t(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 /* RenderMode.Shadow */ && shadowMode === 1 /* ShadowMode.Synthetic */;
+    const { hasScopedStyles } = context;
+    let newToken;
+    let newHasTokenInClass;
+    let newHasTokenInAttribute;
+    // Reset the styling token applied to the host element.
+    const { stylesheetToken: oldToken, hasTokenInClass: oldHasTokenInClass, hasTokenInAttribute: oldHasTokenInAttribute, } = context;
+    if (!isUndefined$1(oldToken)) {
+        if (oldHasTokenInClass) {
+            getClassList(elm).remove(makeHostToken(oldToken));
+        }
+        if (oldHasTokenInAttribute) {
+            removeAttribute(elm, makeHostToken(oldToken));
+        }
+    }
+    // Apply the new template styling token to the host element, if the new template has any
+    // associated stylesheets. In the case of light DOM, also ensure there is at least one scoped stylesheet.
+    if (!isUndefined$1(newStylesheets) && newStylesheets.length !== 0) {
+        newToken = newStylesheetToken;
+    }
+    // Set the new styling token on the host element
+    if (!isUndefined$1(newToken)) {
+        if (hasScopedStyles) {
+            getClassList(elm).add(makeHostToken(newToken));
+            newHasTokenInClass = true;
+        }
+        if (isSyntheticShadow) {
+            setAttribute(elm, makeHostToken(newToken), '');
+            newHasTokenInAttribute = true;
+        }
+    }
+    // Update the styling tokens present on the context object.
+    context.stylesheetToken = newToken;
+    context.hasTokenInClass = newHasTokenInClass;
+    context.hasTokenInAttribute = newHasTokenInAttribute;
+}
+function evaluateStylesheetsContent(stylesheets, stylesheetToken, vm) {
+    const content = [];
+    let root;
+    for (let i = 0; i < stylesheets.length; i++) {
+        let stylesheet = stylesheets[i];
+        if (isArray$1(stylesheet)) {
+            ArrayPush$1.apply(content, evaluateStylesheetsContent(stylesheet, stylesheetToken, vm));
+        }
+        else {
+            if (process.env.NODE_ENV !== 'production') {
+                // Check for compiler version mismatch in dev mode only
+                checkVersionMismatch(stylesheet, 'stylesheet');
+                // in dev-mode, we support hot swapping of stylesheet, which means that
+                // the component instance might be attempting to use an old version of
+                // the stylesheet, while internally, we have a replacement for it.
+                stylesheet = getStyleOrSwappedStyle(stylesheet);
+            }
+            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 /* 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 /* RenderMode.Light */
+                ? !isScopedCss
+                : 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 /* 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.
+                // At the top level (root is null) or inside of a native shadow root, they should use `:dir()`.
+                if (isUndefined$1(root)) {
+                    // Only calculate the root once as necessary
+                    root = getNearestShadowComponent(vm);
+                }
+                useNativeDirPseudoclass = isNull(root) || root.shadowMode === 0 /* ShadowMode.Native */;
+            }
+            ArrayPush$1.call(content, stylesheet(scopeToken, useActualHostSelector, useNativeDirPseudoclass));
+        }
+    }
+    return content;
+}
+function getStylesheetsContent(vm, template) {
+    const { stylesheets, stylesheetToken } = template;
+    let content = [];
+    if (!isUndefined$1(stylesheets) && stylesheets.length !== 0) {
+        content = evaluateStylesheetsContent(stylesheets, stylesheetToken, vm);
+    }
+    return content;
+}
+// It might be worth caching this to avoid doing the lookup repeatedly, but
+// perf testing has not shown it to be a huge improvement yet:
+// https://github.com/salesforce/lwc/pull/2460#discussion_r691208892
+function getNearestShadowComponent(vm) {
+    let owner = vm;
+    while (!isNull(owner)) {
+        if (owner.renderMode === 1 /* RenderMode.Shadow */) {
+            return owner;
+        }
+        owner = owner.owner;
+    }
+    return owner;
+}
+/**
+ * If the component that is currently being rendered uses scoped styles,
+ * this returns the unique token for that scoped stylesheet. Otherwise
+ * it returns null.
+ */
+function getScopeTokenClass(owner) {
+    const { cmpTemplate, context } = owner;
+    return (context.hasScopedStyles && (cmpTemplate === null || cmpTemplate === void 0 ? void 0 : cmpTemplate.stylesheetToken)) || null;
+}
+function getNearestNativeShadowComponent(vm) {
+    const owner = getNearestShadowComponent(vm);
+    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;
+    }
+    return owner;
+}
+function createStylesheet(vm, stylesheets) {
+    const { renderMode, shadowMode, renderer: { ssr, insertStylesheet }, } = vm;
+    if (renderMode === 1 /* RenderMode.Shadow */ && shadowMode === 1 /* ShadowMode.Synthetic */) {
+        for (let i = 0; i < stylesheets.length; i++) {
+            insertStylesheet(stylesheets[i]);
+        }
+    }
+    else if (ssr || vm.hydrated) {
+        // Note: We need to ensure that during hydration, the stylesheets method is the same as those in ssr.
+        //       This works in the client, because the stylesheets are created, and cached in the VM
+        //       the first time the VM renders.
+        // native shadow or light DOM, SSR
+        return ArrayMap.call(stylesheets, createInlineStyleVNode);
+    }
+    else {
+        // native shadow or light DOM, DOM renderer
+        const root = getNearestNativeShadowComponent(vm);
+        // null root means a global style
+        const target = isNull(root) ? undefined : root.shadowRoot;
+        for (let i = 0; i < stylesheets.length; i++) {
+            insertStylesheet(stylesheets[i], target);
+        }
+    }
+    return null;
+}
+
 /*
  * Copyright (c) 2020, salesforce.com, inc.
  * All rights reserved.
@@ -3762,10 +3931,9 @@ function setElementShadowToken(elm, token) {
 }
 // Set the scope token class for *.scoped.css styles
 function setScopeTokenClassIfNecessary(elm, owner, renderer) {
-    const { cmpTemplate, context } = owner;
-    const { getClassList } = renderer;
-    const token = cmpTemplate === null || cmpTemplate === void 0 ? void 0 : cmpTemplate.stylesheetToken;
-    if (!isUndefined$1(token) && context.hasScopedStyles) {
+    const token = getScopeTokenClass(owner);
+    if (!isNull(token)) {
+        const { getClassList } = renderer;
         // TODO [#2762]: this dot notation with add is probably problematic
         // probably we should have a renderer api for just the add operation
         getClassList(elm).add(token);
@@ -4528,166 +4696,6 @@ const api = freeze({
     shc,
 });
 
-/*
- * 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 makeHostToken(token) {
-    return `${token}-host`;
-}
-function createInlineStyleVNode(content) {
-    return api.h('style', {
-        key: 'style',
-        attrs: {
-            type: 'text/css',
-        },
-    }, [api.t(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 /* RenderMode.Shadow */ && shadowMode === 1 /* ShadowMode.Synthetic */;
-    const { hasScopedStyles } = context;
-    let newToken;
-    let newHasTokenInClass;
-    let newHasTokenInAttribute;
-    // Reset the styling token applied to the host element.
-    const { stylesheetToken: oldToken, hasTokenInClass: oldHasTokenInClass, hasTokenInAttribute: oldHasTokenInAttribute, } = context;
-    if (!isUndefined$1(oldToken)) {
-        if (oldHasTokenInClass) {
-            getClassList(elm).remove(makeHostToken(oldToken));
-        }
-        if (oldHasTokenInAttribute) {
-            removeAttribute(elm, makeHostToken(oldToken));
-        }
-    }
-    // Apply the new template styling token to the host element, if the new template has any
-    // associated stylesheets. In the case of light DOM, also ensure there is at least one scoped stylesheet.
-    if (!isUndefined$1(newStylesheets) && newStylesheets.length !== 0) {
-        newToken = newStylesheetToken;
-    }
-    // Set the new styling token on the host element
-    if (!isUndefined$1(newToken)) {
-        if (hasScopedStyles) {
-            getClassList(elm).add(makeHostToken(newToken));
-            newHasTokenInClass = true;
-        }
-        if (isSyntheticShadow) {
-            setAttribute(elm, makeHostToken(newToken), '');
-            newHasTokenInAttribute = true;
-        }
-    }
-    // Update the styling tokens present on the context object.
-    context.stylesheetToken = newToken;
-    context.hasTokenInClass = newHasTokenInClass;
-    context.hasTokenInAttribute = newHasTokenInAttribute;
-}
-function evaluateStylesheetsContent(stylesheets, stylesheetToken, vm) {
-    const content = [];
-    let root;
-    for (let i = 0; i < stylesheets.length; i++) {
-        let stylesheet = stylesheets[i];
-        if (isArray$1(stylesheet)) {
-            ArrayPush$1.apply(content, evaluateStylesheetsContent(stylesheet, stylesheetToken, vm));
-        }
-        else {
-            if (process.env.NODE_ENV !== 'production') {
-                // Check for compiler version mismatch in dev mode only
-                checkVersionMismatch(stylesheet, 'stylesheet');
-                // in dev-mode, we support hot swapping of stylesheet, which means that
-                // the component instance might be attempting to use an old version of
-                // the stylesheet, while internally, we have a replacement for it.
-                stylesheet = getStyleOrSwappedStyle(stylesheet);
-            }
-            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 /* 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 /* RenderMode.Light */
-                ? !isScopedCss
-                : 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 /* 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.
-                // At the top level (root is null) or inside of a native shadow root, they should use `:dir()`.
-                if (isUndefined$1(root)) {
-                    // Only calculate the root once as necessary
-                    root = getNearestShadowComponent(vm);
-                }
-                useNativeDirPseudoclass = isNull(root) || root.shadowMode === 0 /* ShadowMode.Native */;
-            }
-            ArrayPush$1.call(content, stylesheet(scopeToken, useActualHostSelector, useNativeDirPseudoclass));
-        }
-    }
-    return content;
-}
-function getStylesheetsContent(vm, template) {
-    const { stylesheets, stylesheetToken } = template;
-    let content = [];
-    if (!isUndefined$1(stylesheets) && stylesheets.length !== 0) {
-        content = evaluateStylesheetsContent(stylesheets, stylesheetToken, vm);
-    }
-    return content;
-}
-// It might be worth caching this to avoid doing the lookup repeatedly, but
-// perf testing has not shown it to be a huge improvement yet:
-// https://github.com/salesforce/lwc/pull/2460#discussion_r691208892
-function getNearestShadowComponent(vm) {
-    let owner = vm;
-    while (!isNull(owner)) {
-        if (owner.renderMode === 1 /* RenderMode.Shadow */) {
-            return owner;
-        }
-        owner = owner.owner;
-    }
-    return owner;
-}
-function getNearestNativeShadowComponent(vm) {
-    const owner = getNearestShadowComponent(vm);
-    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;
-    }
-    return owner;
-}
-function createStylesheet(vm, stylesheets) {
-    const { renderMode, shadowMode, renderer: { ssr, insertStylesheet }, } = vm;
-    if (renderMode === 1 /* RenderMode.Shadow */ && shadowMode === 1 /* ShadowMode.Synthetic */) {
-        for (let i = 0; i < stylesheets.length; i++) {
-            insertStylesheet(stylesheets[i]);
-        }
-    }
-    else if (ssr || vm.hydrated) {
-        // Note: We need to ensure that during hydration, the stylesheets method is the same as those in ssr.
-        //       This works in the client, because the stylesheets are created, and cached in the VM
-        //       the first time the VM renders.
-        // native shadow or light DOM, SSR
-        return ArrayMap.call(stylesheets, createInlineStyleVNode);
-    }
-    else {
-        // native shadow or light DOM, DOM renderer
-        const root = getNearestNativeShadowComponent(vm);
-        // null root means a global style
-        const target = isNull(root) ? undefined : root.shadowRoot;
-        for (let i = 0; i < stylesheets.length; i++) {
-            insertStylesheet(stylesheets[i], target);
-        }
-    }
-    return null;
-}
-
 /*
  * Copyright (c) 2018, salesforce.com, inc.
  * All rights reserved.
@@ -6269,7 +6277,7 @@ function freezeTemplate(tmpl) {
         });
     }
 }
-/* version: 2.20.2 */
+/* version: 2.21.0 */
 
 /*
  * Copyright (c) 2020, salesforce.com, inc.
@@ -6277,6 +6285,16 @@ function freezeTemplate(tmpl) {
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
+// We use Symbols as the keys for HostElement properties to avoid conflicting
+// with public component properties defined by a component author.
+const HostNamespaceKey = Symbol('namespace');
+const HostTypeKey = Symbol('type');
+const HostParentKey = Symbol('parent');
+const HostShadowRootKey = Symbol('shadow-root');
+const HostChildrenKey = Symbol('children');
+const HostAttributesKey = Symbol('attributes');
+const HostEventListenersKey = Symbol('event-listeners');
+const HostValueKey = Symbol('value');
 var HostNodeType;
 (function (HostNodeType) {
     HostNodeType["Text"] = "text";
@@ -6311,16 +6329,16 @@ function unsupportedMethod(name) {
         throw new TypeError(`"${name}" is not supported in this environment`);
     };
 }
-function createElement(name, namespace) {
+function createElement(tagName, namespace) {
     return {
-        type: HostNodeType.Element,
-        name,
-        namespace: namespace !== null && namespace !== void 0 ? namespace : HTML_NAMESPACE,
-        parent: null,
-        shadowRoot: null,
-        children: [],
-        attributes: [],
-        eventListeners: {},
+        [HostTypeKey]: HostNodeType.Element,
+        tagName,
+        [HostNamespaceKey]: namespace !== null && namespace !== void 0 ? namespace : HTML_NAMESPACE,
+        [HostParentKey]: null,
+        [HostShadowRootKey]: null,
+        [HostChildrenKey]: [],
+        [HostAttributesKey]: [],
+        [HostEventListenersKey]: {},
     };
 }
 const registry = create(null);
@@ -6335,11 +6353,11 @@ function registerCustomElement(name, ctor) {
 class HTMLElementImpl {
     constructor() {
         const { constructor } = this;
-        const name = reverseRegistry.get(constructor);
-        if (!name) {
+        const tagName = reverseRegistry.get(constructor);
+        if (!tagName) {
             throw new TypeError(`Invalid Construction`);
         }
-        return createElement(name);
+        return createElement(tagName);
     }
 }
 const ssr = true;
@@ -6349,73 +6367,74 @@ function isHydrating() {
 const isNativeShadowDefined = false;
 const isSyntheticShadowDefined = false;
 function insert(node, parent, anchor) {
-    if (node.parent !== null && node.parent !== parent) {
-        const nodeIndex = node.parent.children.indexOf(node);
-        node.parent.children.splice(nodeIndex, 1);
+    const nodeParent = node[HostParentKey];
+    if (nodeParent !== null && nodeParent !== parent) {
+        const nodeIndex = nodeParent[HostChildrenKey].indexOf(node);
+        nodeParent[HostChildrenKey].splice(nodeIndex, 1);
     }
-    node.parent = parent;
-    const anchorIndex = isNull(anchor) ? -1 : parent.children.indexOf(anchor);
+    node[HostParentKey] = parent;
+    const anchorIndex = isNull(anchor) ? -1 : parent[HostChildrenKey].indexOf(anchor);
     if (anchorIndex === -1) {
-        parent.children.push(node);
+        parent[HostChildrenKey].push(node);
     }
     else {
-        parent.children.splice(anchorIndex, 0, node);
+        parent[HostChildrenKey].splice(anchorIndex, 0, node);
     }
 }
 function remove(node, parent) {
-    const nodeIndex = parent.children.indexOf(node);
-    parent.children.splice(nodeIndex, 1);
+    const nodeIndex = parent[HostChildrenKey].indexOf(node);
+    parent[HostChildrenKey].splice(nodeIndex, 1);
 }
 function cloneNode(node) {
     return node;
 }
 function createFragment(html) {
     return {
-        type: HostNodeType.Raw,
-        parent: null,
-        value: html,
+        [HostTypeKey]: HostNodeType.Raw,
+        [HostParentKey]: null,
+        [HostValueKey]: html,
     };
 }
 function createText(content) {
     return {
-        type: HostNodeType.Text,
-        value: String(content),
-        parent: null,
+        [HostTypeKey]: HostNodeType.Text,
+        [HostValueKey]: String(content),
+        [HostParentKey]: null,
     };
 }
 function createComment(content) {
     return {
-        type: HostNodeType.Comment,
-        value: content,
-        parent: null,
+        [HostTypeKey]: HostNodeType.Comment,
+        [HostValueKey]: content,
+        [HostParentKey]: null,
     };
 }
 function nextSibling(node) {
-    const { parent } = node;
+    const parent = node[HostParentKey];
     if (isNull(parent)) {
         return null;
     }
-    const nodeIndex = parent.children.indexOf(node);
-    return parent.children[nodeIndex + 1] || null;
+    const nodeIndex = parent[HostChildrenKey].indexOf(node);
+    return parent[HostChildrenKey][nodeIndex + 1] || null;
 }
 function attachShadow(element, config) {
-    element.shadowRoot = {
-        type: HostNodeType.ShadowRoot,
-        children: [],
+    element[HostShadowRootKey] = {
+        [HostTypeKey]: HostNodeType.ShadowRoot,
+        [HostChildrenKey]: [],
         mode: config.mode,
         delegatesFocus: !!config.delegatesFocus,
     };
-    return element.shadowRoot;
+    return element[HostShadowRootKey];
 }
 function getProperty(node, key) {
     var _a, _b;
     if (key in node) {
         return node[key];
     }
-    if (node.type === HostNodeType.Element) {
+    if (node[HostTypeKey] === HostNodeType.Element) {
         const attrName = htmlPropertyToAttribute(key);
         // Handle all the boolean properties.
-        if (isBooleanAttribute(attrName, node.name)) {
+        if (isBooleanAttribute(attrName, node.tagName)) {
             return (_a = getAttribute(node, attrName)) !== null && _a !== void 0 ? _a : false;
         }
         // Handle global html attributes and AOM.
@@ -6424,7 +6443,7 @@ function getProperty(node, key) {
         }
         // Handle special elements live bindings. The checked property is already handled above
         // in the boolean case.
-        if (node.name === 'input' && key === 'value') {
+        if (node.tagName === 'input' && key === 'value') {
             return (_b = getAttribute(node, 'value')) !== null && _b !== void 0 ? _b : '';
         }
     }
@@ -6437,20 +6456,20 @@ function setProperty(node, key, value) {
     if (key in node) {
         return (node[key] = value);
     }
-    if (node.type === HostNodeType.Element) {
+    if (node[HostTypeKey] === HostNodeType.Element) {
         const attrName = htmlPropertyToAttribute(key);
         if (key === 'innerHTML') {
-            node.children = [
+            node[HostChildrenKey] = [
                 {
-                    type: HostNodeType.Raw,
-                    parent: node,
-                    value,
+                    [HostTypeKey]: HostNodeType.Raw,
+                    [HostParentKey]: node,
+                    [HostValueKey]: value,
                 },
             ];
             return;
         }
         // Handle all the boolean properties.
-        if (isBooleanAttribute(attrName, node.name)) {
+        if (isBooleanAttribute(attrName, node.tagName)) {
             return value === true
                 ? setAttribute(node, attrName, '')
                 : removeAttribute(node, attrName);
@@ -6461,7 +6480,7 @@ function setProperty(node, key, value) {
         }
         // Handle special elements live bindings. The checked property is already handled above
         // in the boolean case.
-        if (node.name === 'input' && attrName === 'value') {
+        if (node.tagName === 'input' && attrName === 'value') {
             return isNull(value) || isUndefined$1(value)
                 ? removeAttribute(node, 'value')
                 : setAttribute(node, 'value', value);
@@ -6473,32 +6492,32 @@ function setProperty(node, key, value) {
     }
 }
 function setText(node, content) {
-    if (node.type === HostNodeType.Text) {
-        node.value = content;
+    if (node[HostTypeKey] === HostNodeType.Text) {
+        node[HostValueKey] = content;
     }
-    else if (node.type === HostNodeType.Element) {
-        node.children = [
+    else if (node[HostTypeKey] === HostNodeType.Element) {
+        node[HostChildrenKey] = [
             {
-                type: HostNodeType.Text,
-                parent: node,
-                value: content,
+                [HostTypeKey]: HostNodeType.Text,
+                [HostParentKey]: node,
+                [HostValueKey]: content,
             },
         ];
     }
 }
 function getAttribute(element, name, namespace = null) {
-    const attribute = element.attributes.find((attr) => attr.name === name && attr.namespace === namespace);
+    const attribute = element[HostAttributesKey].find((attr) => attr.name === name && attr[HostNamespaceKey] === namespace);
     return attribute ? attribute.value : null;
 }
 function setAttribute(element, name, value, namespace = null) {
-    const attribute = element.attributes.find((attr) => attr.name === name && attr.namespace === namespace);
+    const attribute = element[HostAttributesKey].find((attr) => attr.name === name && attr[HostNamespaceKey] === namespace);
     if (isUndefined$1(namespace)) {
         namespace = null;
     }
     if (isUndefined$1(attribute)) {
-        element.attributes.push({
+        element[HostAttributesKey].push({
             name,
-            namespace,
+            [HostNamespaceKey]: namespace,
             value: String(value),
         });
     }
@@ -6507,18 +6526,18 @@ function setAttribute(element, name, value, namespace = null) {
     }
 }
 function removeAttribute(element, name, namespace) {
-    element.attributes = element.attributes.filter((attr) => attr.name !== name && attr.namespace !== namespace);
+    element[HostAttributesKey] = element[HostAttributesKey].filter((attr) => attr.name !== name && attr[HostNamespaceKey] !== namespace);
 }
 function getClassList(element) {
     function getClassAttribute() {
-        let classAttribute = element.attributes.find((attr) => attr.name === 'class' && isNull(attr.namespace));
+        let classAttribute = element[HostAttributesKey].find((attr) => attr.name === 'class' && isNull(attr[HostNamespaceKey]));
         if (isUndefined$1(classAttribute)) {
             classAttribute = {
                 name: 'class',
-                namespace: null,
+                [HostNamespaceKey]: null,
                 value: '',
             };
-            element.attributes.push(classAttribute);
+            element[HostAttributesKey].push(classAttribute);
         }
         return classAttribute;
     }
@@ -6538,12 +6557,12 @@ function getClassList(element) {
     };
 }
 function setCSSStyleProperty(element, name, value, important) {
-    const styleAttribute = element.attributes.find((attr) => attr.name === 'style' && isNull(attr.namespace));
+    const styleAttribute = element[HostAttributesKey].find((attr) => attr.name === 'style' && isNull(attr[HostNamespaceKey]));
     const serializedProperty = `${name}: ${value}${important ? ' !important' : ''}`;
     if (isUndefined$1(styleAttribute)) {
-        element.attributes.push({
+        element[HostAttributesKey].push({
             name: 'style',
-            namespace: null,
+            [HostNamespaceKey]: null,
             value: serializedProperty,
         });
     }
@@ -6552,7 +6571,7 @@ function setCSSStyleProperty(element, name, value, important) {
     }
 }
 function isConnected(node) {
-    return !isNull(node.parent);
+    return !isNull(node[HostParentKey]);
 }
 // Noop on SSR (for now). This need to be reevaluated whenever we will implement support for
 // synthetic shadow.
@@ -6640,13 +6659,13 @@ function serializeAttributes(attributes) {
 function serializeChildNodes(children) {
     return children
         .map((child) => {
-        switch (child.type) {
+        switch (child[HostTypeKey]) {
             case HostNodeType.Text:
-                return child.value === '' ? '\u200D' : htmlEscape(child.value);
+                return child[HostValueKey] === '' ? '\u200D' : htmlEscape(child[HostValueKey]);
             case HostNodeType.Comment:
-                return `<!--${htmlEscape(child.value)}-->`;
+                return `<!--${htmlEscape(child[HostValueKey])}-->`;
             case HostNodeType.Raw:
-                return child.value;
+                return child[HostValueKey];
             case HostNodeType.Element:
                 return serializeElement(child);
         }
@@ -6658,27 +6677,30 @@ function serializeShadowRoot(shadowRoot) {
     if (shadowRoot.delegatesFocus) {
         attrs.push('shadowrootdelegatesfocus');
     }
-    return `<template ${attrs.join(' ')}>${serializeChildNodes(shadowRoot.children)}</template>`;
+    return `<template ${attrs.join(' ')}>${serializeChildNodes(shadowRoot[HostChildrenKey])}</template>`;
 }
 function serializeElement(element) {
     let output = '';
-    const { name, namespace } = element;
+    const tagName = element.tagName;
+    const namespace = element[HostNamespaceKey];
     const isForeignElement = namespace !== HTML_NAMESPACE;
-    const hasChildren = element.children.length > 0;
-    const attrs = element.attributes.length ? ` ${serializeAttributes(element.attributes)}` : '';
-    output += `<${name}${attrs}`;
+    const hasChildren = element[HostChildrenKey].length > 0;
+    const attrs = element[HostAttributesKey].length
+        ? ` ${serializeAttributes(element[HostAttributesKey])}`
+        : '';
+    output += `<${tagName}${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);
+    if (element[HostShadowRootKey]) {
+        output += serializeShadowRoot(element[HostShadowRootKey]);
     }
-    output += serializeChildNodes(element.children);
-    if (!isVoidElement(name, namespace) || hasChildren) {
-        output += `</${name}>`;
+    output += serializeChildNodes(element[HostChildrenKey]);
+    if (!isVoidElement(tagName, namespace) || hasChildren) {
+        output += `</${tagName}>`;
     }
     return output;
 }
@@ -6690,14 +6712,14 @@ function serializeElement(element) {
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 const FakeRootElement = {
-    type: HostNodeType.Element,
-    name: 'fake-root-element',
-    namespace: HTML_NAMESPACE,
-    parent: null,
-    shadowRoot: null,
-    children: [],
-    attributes: [],
-    eventListeners: {},
+    [HostTypeKey]: HostNodeType.Element,
+    tagName: 'fake-root-element',
+    [HostNamespaceKey]: HTML_NAMESPACE,
+    [HostParentKey]: null,
+    [HostShadowRootKey]: null,
+    [HostChildrenKey]: [],
+    [HostAttributesKey]: [],
+    [HostEventListenersKey]: {},
 };
 function renderComponent(tagName, Ctor, props = {}) {
     if (!isString(tagName)) {
@@ -6718,7 +6740,7 @@ function renderComponent(tagName, Ctor, props = {}) {
     for (const [key, value] of Object.entries(props)) {
         element[key] = value;
     }
-    element.parent = FakeRootElement;
+    element[HostParentKey] = FakeRootElement;
     connectRootElement(element);
     return serializeElement(element);
 }
@@ -6731,6 +6753,6 @@ function renderComponent(tagName, Ctor, props = {}) {
  */
 freeze(LightningElement);
 seal(LightningElement.prototype);
-/* version: 2.20.2 */
+/* version: 2.21.0 */
 
 export { LightningElement, api$1 as api, createContextProvider, freezeTemplate, getComponentDef, isComponentConstructor, parseFragment, parseFragment as parseSVGFragment, readonly, register, registerComponent, registerDecorators, registerTemplate, renderComponent, renderer, sanitizeAttribute, setFeatureFlag, setFeatureFlagForTest, setHooks, track, unwrap, wire };