lwc 2.14.1 → 2.16.0

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

@@ -225,6 +225,7 @@ const _globalThis = /*@__PURE__*/ (function () {
     return _globalThis;
 })();
 const KEY__SHADOW_RESOLVER = '$shadowResolver$';
+const KEY__SHADOW_STATIC = '$shadowStaticNode$';
 const KEY__SYNTHETIC_MODE = '$$lwc-synthetic-mode';
 const KEY__SCOPED_CSS = '$scoped$';
 
@@ -406,6 +407,24 @@ function htmlPropertyToAttribute(propName) {
     CACHED_PROPERTY_ATTRIBUTE_MAPPING.set(propName, attributeName);
     return attributeName;
 }
+
+/*
+ * 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
+ */
+const ESCAPED_CHARS = {
+    '"': '"',
+    "'": ''',
+    '<': '&lt;',
+    '>': '&gt;',
+    '&': '&amp;',
+};
+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';
@@ -417,9 +436,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.14.1";
+const LWC_VERSION = "2.16.0";
 const LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
-/** version: 2.14.1 */
+/** version: 2.16.0 */
 
 /*
  * Copyright (c) 2020, salesforce.com, inc.
@@ -528,7 +547,7 @@ function setFeatureFlagForTest(name, value) {
         setFeatureFlag(name, value);
     }
 }
-/** version: 2.14.1 */
+/** version: 2.16.0 */
 
 /* proxy-compat-disable */
 
@@ -611,162 +630,6 @@ function flattenStylesheets(stylesheets) {
     return list;
 }
 
-//
-// Primitives
-//
-let ssr$1;
-function setSsr(ssrImpl) {
-    ssr$1 = ssrImpl;
-}
-let isNativeShadowDefined$1;
-function setIsNativeShadowDefined(isNativeShadowDefinedImpl) {
-    isNativeShadowDefined$1 = isNativeShadowDefinedImpl;
-}
-let isSyntheticShadowDefined$1;
-function setIsSyntheticShadowDefined(isSyntheticShadowDefinedImpl) {
-    isSyntheticShadowDefined$1 = isSyntheticShadowDefinedImpl;
-}
-let HTMLElementExported$1;
-function setHTMLElement(HTMLElementImpl) {
-    HTMLElementExported$1 = HTMLElementImpl;
-}
-let insert$1;
-function setInsert(insertImpl) {
-    insert$1 = insertImpl;
-}
-let remove$1;
-function setRemove(removeImpl) {
-    remove$1 = removeImpl;
-}
-let createElement$1;
-function setCreateElement(createElementImpl) {
-    createElement$1 = createElementImpl;
-}
-let createText$1;
-function setCreateText(createTextImpl) {
-    createText$1 = createTextImpl;
-}
-let createComment$1;
-function setCreateComment(createCommentImpl) {
-    createComment$1 = createCommentImpl;
-}
-let nextSibling$1;
-function setNextSibling(nextSiblingImpl) {
-    nextSibling$1 = nextSiblingImpl;
-}
-let attachShadow$1;
-function setAttachShadow(attachShadowImpl) {
-    attachShadow$1 = attachShadowImpl;
-}
-let getProperty$1;
-function setGetProperty(getPropertyImpl) {
-    getProperty$1 = getPropertyImpl;
-}
-let setProperty$1;
-function setSetProperty(setPropertyImpl) {
-    setProperty$1 = setPropertyImpl;
-}
-let setText$1;
-function setSetText(setTextImpl) {
-    setText$1 = setTextImpl;
-}
-let getAttribute$1;
-function setGetAttribute(getAttributeImpl) {
-    getAttribute$1 = getAttributeImpl;
-}
-let setAttribute$1;
-function setSetAttribute(setAttributeImpl) {
-    setAttribute$1 = setAttributeImpl;
-}
-let removeAttribute$1;
-function setRemoveAttribute(removeAttributeImpl) {
-    removeAttribute$1 = removeAttributeImpl;
-}
-let addEventListener$1;
-function setAddEventListener(addEventListenerImpl) {
-    addEventListener$1 = addEventListenerImpl;
-}
-let removeEventListener$1;
-function setRemoveEventListener(removeEventListenerImpl) {
-    removeEventListener$1 = removeEventListenerImpl;
-}
-let dispatchEvent$1;
-function setDispatchEvent(dispatchEventImpl) {
-    dispatchEvent$1 = dispatchEventImpl;
-}
-let getClassList$1;
-function setGetClassList(getClassListImpl) {
-    getClassList$1 = getClassListImpl;
-}
-let setCSSStyleProperty$1;
-function setSetCSSStyleProperty(setCSSStylePropertyImpl) {
-    setCSSStyleProperty$1 = setCSSStylePropertyImpl;
-}
-let getBoundingClientRect$1;
-function setGetBoundingClientRect(getBoundingClientRectImpl) {
-    getBoundingClientRect$1 = getBoundingClientRectImpl;
-}
-let querySelector$1;
-function setQuerySelector(querySelectorImpl) {
-    querySelector$1 = querySelectorImpl;
-}
-let querySelectorAll$1;
-function setQuerySelectorAll(querySelectorAllImpl) {
-    querySelectorAll$1 = querySelectorAllImpl;
-}
-let getElementsByTagName$1;
-function setGetElementsByTagName(getElementsByTagNameImpl) {
-    getElementsByTagName$1 = getElementsByTagNameImpl;
-}
-let getElementsByClassName$1;
-function setGetElementsByClassName(getElementsByClassNameImpl) {
-    getElementsByClassName$1 = getElementsByClassNameImpl;
-}
-let getChildren$1;
-function setGetChildren(getChildrenImpl) {
-    getChildren$1 = getChildrenImpl;
-}
-let getChildNodes$1;
-function setGetChildNodes(getChildNodesImpl) {
-    getChildNodes$1 = getChildNodesImpl;
-}
-let getFirstChild$1;
-function setGetFirstChild(getFirstChildImpl) {
-    getFirstChild$1 = getFirstChildImpl;
-}
-let getFirstElementChild$1;
-function setGetFirstElementChild(getFirstElementChildImpl) {
-    getFirstElementChild$1 = getFirstElementChildImpl;
-}
-let getLastChild$1;
-function setGetLastChild(getLastChildImpl) {
-    getLastChild$1 = getLastChildImpl;
-}
-let getLastElementChild$1;
-function setGetLastElementChild(getLastElementChildImpl) {
-    getLastElementChild$1 = getLastElementChildImpl;
-}
-let isConnected$1;
-function setIsConnected(isConnectedImpl) {
-    isConnected$1 = isConnectedImpl;
-}
-let insertStylesheet$1;
-function setInsertStylesheet(insertStylesheetImpl) {
-    insertStylesheet$1 = insertStylesheetImpl;
-}
-let assertInstanceOfHTMLElement$1;
-function setAssertInstanceOfHTMLElement(assertInstanceOfHTMLElementImpl) {
-    assertInstanceOfHTMLElement$1 = assertInstanceOfHTMLElementImpl;
-}
-let defineCustomElement$1;
-function setDefineCustomElement(defineCustomElementImpl) {
-    defineCustomElement$1 = defineCustomElementImpl;
-}
-let getCustomElement$1;
-function setGetCustomElement(getCustomElementImpl) {
-    getCustomElement$1 = getCustomElementImpl;
-}
-
 /*
  * Copyright (c) 2019, salesforce.com, inc.
  * All rights reserved.
@@ -2068,7 +1931,8 @@ const LightningElement = function () {
     const { def, elm } = vm;
     const { bridge } = def;
     if (process.env.NODE_ENV !== 'production') {
-        assertInstanceOfHTMLElement$1(vm.elm, `Component creation requires a DOM element to be associated to ${vm}.`);
+        const { assertInstanceOfHTMLElement } = vm.renderer;
+        assertInstanceOfHTMLElement(vm.elm, `Component creation requires a DOM element to be associated to ${vm}.`);
     }
     const component = this;
     setPrototypeOf(elm, bridge.prototype);
@@ -2102,8 +1966,8 @@ const LightningElement = function () {
     return this;
 };
 function doAttachShadow(vm) {
-    const { elm, mode, shadowMode, def: { ctor }, } = vm;
-    const shadowRoot = attachShadow$1(elm, {
+    const { elm, mode, shadowMode, def: { ctor }, renderer: { attachShadow }, } = vm;
+    const shadowRoot = attachShadow(elm, {
         [KEY__SYNTHETIC_MODE]: shadowMode === 1 /* Synthetic */,
         delegatesFocus: Boolean(ctor.delegatesFocus),
         mode,
@@ -2124,12 +1988,13 @@ function warnIfInvokedDuringConstruction(vm, methodOrPropName) {
 LightningElement.prototype = {
     constructor: LightningElement,
     dispatchEvent(event) {
-        const { elm } = getAssociatedVM(this);
-        return dispatchEvent$1(elm, event);
+        const vm = getAssociatedVM(this);
+        const { elm, renderer: { dispatchEvent }, } = vm;
+        return dispatchEvent(elm, event);
     },
     addEventListener(type, listener, options) {
         const vm = getAssociatedVM(this);
-        const { elm } = vm;
+        const { elm, renderer: { addEventListener }, } = vm;
         if (process.env.NODE_ENV !== 'production') {
             const vmBeingRendered = getVMBeingRendered();
             assert.invariant(!isInvokingRender, `${vmBeingRendered}.render() method has side effects on the state of ${vm} by adding an event listener for "${type}".`);
@@ -2137,83 +2002,91 @@ LightningElement.prototype = {
             assert.invariant(isFunction$1(listener), `Invalid second argument for this.addEventListener() in ${vm} for event "${type}". Expected an EventListener but received ${listener}.`);
         }
         const wrappedListener = getWrappedComponentsListener(vm, listener);
-        addEventListener$1(elm, type, wrappedListener, options);
+        addEventListener(elm, type, wrappedListener, options);
     },
     removeEventListener(type, listener, options) {
         const vm = getAssociatedVM(this);
-        const { elm } = vm;
+        const { elm, renderer: { removeEventListener }, } = vm;
         const wrappedListener = getWrappedComponentsListener(vm, listener);
-        removeEventListener$1(elm, type, wrappedListener, options);
+        removeEventListener(elm, type, wrappedListener, options);
     },
     hasAttribute(name) {
-        const { elm } = getAssociatedVM(this);
-        return !isNull(getAttribute$1(elm, name));
+        const vm = getAssociatedVM(this);
+        const { elm, renderer: { getAttribute }, } = vm;
+        return !isNull(getAttribute(elm, name));
     },
     hasAttributeNS(namespace, name) {
-        const { elm } = getAssociatedVM(this);
-        return !isNull(getAttribute$1(elm, name, namespace));
+        const vm = getAssociatedVM(this);
+        const { elm, renderer: { getAttribute }, } = vm;
+        return !isNull(getAttribute(elm, name, namespace));
     },
     removeAttribute(name) {
-        const { elm } = getAssociatedVM(this);
+        const vm = getAssociatedVM(this);
+        const { elm, renderer: { removeAttribute }, } = vm;
         unlockAttribute(elm, name);
-        removeAttribute$1(elm, name);
+        removeAttribute(elm, name);
         lockAttribute();
     },
     removeAttributeNS(namespace, name) {
-        const { elm } = getAssociatedVM(this);
+        const { elm, renderer: { removeAttribute }, } = getAssociatedVM(this);
         unlockAttribute(elm, name);
-        removeAttribute$1(elm, name, namespace);
+        removeAttribute(elm, name, namespace);
         lockAttribute();
     },
     getAttribute(name) {
-        const { elm } = getAssociatedVM(this);
-        return getAttribute$1(elm, name);
+        const vm = getAssociatedVM(this);
+        const { elm } = vm;
+        const { getAttribute } = vm.renderer;
+        return getAttribute(elm, name);
     },
     getAttributeNS(namespace, name) {
-        const { elm } = getAssociatedVM(this);
-        return getAttribute$1(elm, name, namespace);
+        const vm = getAssociatedVM(this);
+        const { elm } = vm;
+        const { getAttribute } = vm.renderer;
+        return getAttribute(elm, name, namespace);
     },
     setAttribute(name, value) {
         const vm = getAssociatedVM(this);
-        const { elm } = vm;
+        const { elm, renderer: { setAttribute }, } = vm;
         if (process.env.NODE_ENV !== 'production') {
             assert.isFalse(isBeingConstructed(vm), `Failed to construct '${getComponentTag(vm)}': The result must not have attributes.`);
         }
         unlockAttribute(elm, name);
-        setAttribute$1(elm, name, value);
+        setAttribute(elm, name, value);
         lockAttribute();
     },
     setAttributeNS(namespace, name, value) {
         const vm = getAssociatedVM(this);
-        const { elm } = vm;
+        const { elm, renderer: { setAttribute }, } = vm;
         if (process.env.NODE_ENV !== 'production') {
             assert.isFalse(isBeingConstructed(vm), `Failed to construct '${getComponentTag(vm)}': The result must not have attributes.`);
         }
         unlockAttribute(elm, name);
-        setAttribute$1(elm, name, value, namespace);
+        setAttribute(elm, name, value, namespace);
         lockAttribute();
     },
     getBoundingClientRect() {
         const vm = getAssociatedVM(this);
-        const { elm } = vm;
+        const { elm, renderer: { getBoundingClientRect }, } = vm;
         if (process.env.NODE_ENV !== 'production') {
             warnIfInvokedDuringConstruction(vm, 'getBoundingClientRect()');
         }
-        return getBoundingClientRect$1(elm);
+        return getBoundingClientRect(elm);
     },
     get isConnected() {
-        const { elm } = getAssociatedVM(this);
-        return isConnected$1(elm);
+        const vm = getAssociatedVM(this);
+        const { elm, renderer: { isConnected }, } = vm;
+        return isConnected(elm);
     },
     get classList() {
         const vm = getAssociatedVM(this);
-        const { elm } = vm;
+        const { elm, renderer: { getClassList }, } = vm;
         if (process.env.NODE_ENV !== 'production') {
             // TODO [#1290]: this still fails in dev but works in production, eventually, we should
             // just throw in all modes
             assert.isFalse(isBeingConstructed(vm), `Failed to construct ${vm}: The result must not have attributes. Adding or tampering with classname in constructor is not allowed in a web component, use connectedCallback() instead.`);
         }
-        return getClassList$1(elm);
+        return getClassList(elm);
     },
     get template() {
         const vm = getAssociatedVM(this);
@@ -2229,6 +2102,54 @@ LightningElement.prototype = {
         // Authors should rely on this.template instead.
         return null;
     },
+    get children() {
+        const vm = getAssociatedVM(this);
+        const renderer = vm.renderer;
+        if (process.env.NODE_ENV !== 'production') {
+            warnIfInvokedDuringConstruction(vm, 'children');
+        }
+        return renderer.getChildren(vm.elm);
+    },
+    get childNodes() {
+        const vm = getAssociatedVM(this);
+        const renderer = vm.renderer;
+        if (process.env.NODE_ENV !== 'production') {
+            warnIfInvokedDuringConstruction(vm, 'childNodes');
+        }
+        return renderer.getChildNodes(vm.elm);
+    },
+    get firstChild() {
+        const vm = getAssociatedVM(this);
+        const renderer = vm.renderer;
+        if (process.env.NODE_ENV !== 'production') {
+            warnIfInvokedDuringConstruction(vm, 'firstChild');
+        }
+        return renderer.getFirstChild(vm.elm);
+    },
+    get firstElementChild() {
+        const vm = getAssociatedVM(this);
+        const renderer = vm.renderer;
+        if (process.env.NODE_ENV !== 'production') {
+            warnIfInvokedDuringConstruction(vm, 'firstElementChild');
+        }
+        return renderer.getFirstElementChild(vm.elm);
+    },
+    get lastChild() {
+        const vm = getAssociatedVM(this);
+        const renderer = vm.renderer;
+        if (process.env.NODE_ENV !== 'production') {
+            warnIfInvokedDuringConstruction(vm, 'lastChild');
+        }
+        return renderer.getLastChild(vm.elm);
+    },
+    get lastElementChild() {
+        const vm = getAssociatedVM(this);
+        const renderer = vm.renderer;
+        if (process.env.NODE_ENV !== 'production') {
+            warnIfInvokedDuringConstruction(vm, 'lastElementChild');
+        }
+        return renderer.getLastElementChild(vm.elm);
+    },
     render() {
         const vm = getAssociatedVM(this);
         return vm.def.template;
@@ -2239,76 +2160,22 @@ LightningElement.prototype = {
     },
 };
 const queryAndChildGetterDescriptors = create(null);
-// The reason we don't just call `import * as renderer from '../renderer'` here is that the bundle size
-// is smaller if we reference each function individually. Otherwise Rollup will create one big frozen
-// object representing the renderer, with a lot of methods we don't actually need.
-const childGetters = [
-    'children',
-    'childNodes',
-    'firstChild',
-    'firstElementChild',
-    'lastChild',
-    'lastElementChild',
-];
-function getChildGetter(methodName) {
-    switch (methodName) {
-        case 'children':
-            return getChildren$1;
-        case 'childNodes':
-            return getChildNodes$1;
-        case 'firstChild':
-            return getFirstChild$1;
-        case 'firstElementChild':
-            return getFirstElementChild$1;
-        case 'lastChild':
-            return getLastChild$1;
-        case 'lastElementChild':
-            return getLastElementChild$1;
-    }
-}
-// Generic passthrough for child getters on HTMLElement to the relevant Renderer APIs
-for (const childGetter of childGetters) {
-    queryAndChildGetterDescriptors[childGetter] = {
-        get() {
-            const vm = getAssociatedVM(this);
-            const { elm } = vm;
-            if (process.env.NODE_ENV !== 'production') {
-                warnIfInvokedDuringConstruction(vm, childGetter);
-            }
-            return getChildGetter(childGetter)(elm);
-        },
-        configurable: true,
-        enumerable: true,
-    };
-}
 const queryMethods = [
     'getElementsByClassName',
     'getElementsByTagName',
     'querySelector',
     'querySelectorAll',
 ];
-function getQueryMethod(methodName) {
-    switch (methodName) {
-        case 'getElementsByClassName':
-            return getElementsByClassName$1;
-        case 'getElementsByTagName':
-            return getElementsByTagName$1;
-        case 'querySelector':
-            return querySelector$1;
-        case 'querySelectorAll':
-            return querySelectorAll$1;
-    }
-}
 // Generic passthrough for query APIs on HTMLElement to the relevant Renderer APIs
 for (const queryMethod of queryMethods) {
     queryAndChildGetterDescriptors[queryMethod] = {
         value(arg) {
             const vm = getAssociatedVM(this);
-            const { elm } = vm;
+            const { elm, renderer } = vm;
             if (process.env.NODE_ENV !== 'production') {
                 warnIfInvokedDuringConstruction(vm, `${queryMethod}()`);
             }
-            return getQueryMethod(queryMethod)(elm, arg);
+            return renderer[queryMethod](elm, arg);
         },
         configurable: true,
         enumerable: true,
@@ -3411,12 +3278,13 @@ function getComponentDef(Ctor) {
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
-function getUpgradableConstructor(tagName) {
+function getUpgradableConstructor(tagName, renderer) {
+    const { getCustomElement, HTMLElementExported: RendererHTMLElement, defineCustomElement, } = renderer;
     // Should never get a tag with upper case letter at this point, the compiler should
     // produce only tags with lowercase letters
     // But, for backwards compatibility, we will lower case the tagName
     tagName = tagName.toLowerCase();
-    let CE = getCustomElement$1(tagName);
+    let CE = getCustomElement(tagName);
     if (!isUndefined$1(CE)) {
         return CE;
     }
@@ -3424,7 +3292,7 @@ function getUpgradableConstructor(tagName) {
      * LWC Upgradable Element reference to an element that was created
      * via the scoped registry mechanism, and that is ready to be upgraded.
      */
-    CE = class LWCUpgradableElement extends HTMLElementExported$1 {
+    CE = class LWCUpgradableElement extends RendererHTMLElement {
         constructor(upgradeCallback) {
             super();
             if (isFunction$1(upgradeCallback)) {
@@ -3432,7 +3300,7 @@ function getUpgradableConstructor(tagName) {
             }
         }
     };
-    defineCustomElement$1(tagName, CE);
+    defineCustomElement(tagName, CE);
     return CE;
 }
 
@@ -3457,7 +3325,7 @@ function isSameVnode(vnode1, vnode2) {
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 const ColonCharCode = 58;
-function patchAttributes(oldVnode, vnode) {
+function patchAttributes(oldVnode, vnode, renderer) {
     const { attrs } = vnode.data;
     if (isUndefined$1(attrs)) {
         return;
@@ -3467,6 +3335,7 @@ function patchAttributes(oldVnode, vnode) {
         return;
     }
     const { elm } = vnode;
+    const { setAttribute, removeAttribute } = renderer;
     for (const key in attrs) {
         const cur = attrs[key];
         const old = oldAttrs[key];
@@ -3474,17 +3343,17 @@ function patchAttributes(oldVnode, vnode) {
             unlockAttribute(elm, key);
             if (StringCharCodeAt.call(key, 3) === ColonCharCode) {
                 // Assume xml namespace
-                setAttribute$1(elm, key, cur, XML_NAMESPACE);
+                setAttribute(elm, key, cur, XML_NAMESPACE);
             }
             else if (StringCharCodeAt.call(key, 5) === ColonCharCode) {
                 // Assume xlink namespace
-                setAttribute$1(elm, key, cur, XLINK_NAMESPACE);
+                setAttribute(elm, key, cur, XLINK_NAMESPACE);
             }
             else if (isNull(cur) || isUndefined$1(cur)) {
-                removeAttribute$1(elm, key);
+                removeAttribute(elm, key);
             }
             else {
-                setAttribute$1(elm, key, cur);
+                setAttribute(elm, key, cur);
             }
             lockAttribute();
         }
@@ -3502,7 +3371,7 @@ function isLiveBindingProp(sel, key) {
     // instead of relying on internally tracked values.
     return sel === 'input' && (key === 'value' || key === 'checked');
 }
-function patchProps(oldVnode, vnode) {
+function patchProps(oldVnode, vnode, renderer) {
     const { props } = vnode.data;
     if (isUndefined$1(props)) {
         return;
@@ -3513,13 +3382,14 @@ function patchProps(oldVnode, vnode) {
     }
     const isFirstPatch = isNull(oldVnode);
     const { elm, sel } = vnode;
+    const { getProperty, setProperty } = renderer;
     for (const key in props) {
         const 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$1(elm, key) : oldProps[key])) {
-            setProperty$1(elm, key, cur);
+            cur !== (isLiveBindingProp(sel, key) ? getProperty(elm, key) : oldProps[key])) {
+            setProperty(elm, key, cur);
         }
     }
 }
@@ -3564,13 +3434,14 @@ function getMapFromClassName(className) {
     }
     return map;
 }
-function patchClassAttribute(oldVnode, vnode) {
+function patchClassAttribute(oldVnode, vnode, renderer) {
     const { elm, data: { className: newClass }, } = vnode;
     const oldClass = isNull(oldVnode) ? undefined : oldVnode.data.className;
     if (oldClass === newClass) {
         return;
     }
-    const classList = getClassList$1(elm);
+    const { getClassList } = renderer;
+    const classList = getClassList(elm);
     const newClassMap = getMapFromClassName(newClass);
     const oldClassMap = getMapFromClassName(oldClass);
     let name;
@@ -3594,17 +3465,18 @@ function patchClassAttribute(oldVnode, vnode) {
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 // The style property is a string when defined via an expression in the template.
-function patchStyleAttribute(oldVnode, vnode) {
+function patchStyleAttribute(oldVnode, vnode, renderer) {
     const { elm, data: { style: newStyle }, } = vnode;
     const oldStyle = isNull(oldVnode) ? undefined : oldVnode.data.style;
     if (oldStyle === newStyle) {
         return;
     }
+    const { setAttribute, removeAttribute } = renderer;
     if (!isString(newStyle) || newStyle === '') {
-        removeAttribute$1(elm, 'style');
+        removeAttribute(elm, 'style');
     }
     else {
-        setAttribute$1(elm, 'style', newStyle);
+        setAttribute(elm, 'style', newStyle);
     }
 }
 
@@ -3614,14 +3486,15 @@ function patchStyleAttribute(oldVnode, vnode) {
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
-function applyEventListeners(vnode) {
+function applyEventListeners(vnode, renderer) {
     const { elm, data: { on }, } = vnode;
     if (isUndefined$1(on)) {
         return;
     }
+    const { addEventListener } = renderer;
     for (const name in on) {
         const handler = on[name];
-        addEventListener$1(elm, name, handler);
+        addEventListener(elm, name, handler);
     }
 }
 
@@ -3634,12 +3507,13 @@ function applyEventListeners(vnode) {
 // The HTML class property becomes the vnode.data.classMap object when defined as a string in the template.
 // The compiler takes care of transforming the inline classnames into an object. It's faster to set the
 // different classnames properties individually instead of via a string.
-function applyStaticClassAttribute(vnode) {
+function applyStaticClassAttribute(vnode, renderer) {
     const { elm, data: { classMap }, } = vnode;
     if (isUndefined$1(classMap)) {
         return;
     }
-    const classList = getClassList$1(elm);
+    const { getClassList } = renderer;
+    const classList = getClassList(elm);
     for (const name in classMap) {
         classList.add(name);
     }
@@ -3654,14 +3528,15 @@ function applyStaticClassAttribute(vnode) {
 // The HTML style property becomes the vnode.data.styleDecls object when defined as a string in the template.
 // The compiler takes care of transforming the inline style into an object. It's faster to set the
 // different style properties individually instead of via a string.
-function applyStaticStyleAttribute(vnode) {
+function applyStaticStyleAttribute(vnode, renderer) {
     const { elm, data: { styleDecls }, } = vnode;
     if (isUndefined$1(styleDecls)) {
         return;
     }
+    const { setCSSStyleProperty } = renderer;
     for (let i = 0; i < styleDecls.length; i++) {
         const [prop, value, important] = styleDecls[i];
-        setCSSStyleProperty$1(elm, prop, value, important);
+        setCSSStyleProperty(elm, prop, value, important);
     }
 }
 
@@ -3671,15 +3546,16 @@ function applyStaticStyleAttribute(vnode) {
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
-function patchChildren(c1, c2, parent) {
+function patchChildren(c1, c2, parent, renderer) {
     if (hasDynamicChildren(c2)) {
-        updateDynamicChildren(c1, c2, parent);
+        updateDynamicChildren(c1, c2, parent, renderer);
     }
     else {
-        updateStaticChildren(c1, c2, parent);
+        updateStaticChildren(c1, c2, parent, renderer);
     }
 }
-function patch(n1, n2) {
+function patch(n1, n2, renderer) {
+    var _a, _b;
     if (n1 === n2) {
         return;
     }
@@ -3693,80 +3569,115 @@ function patch(n1, n2) {
     }
     switch (n2.type) {
         case 0 /* Text */:
-            patchText(n1, n2);
+            // VText has no special capability, fallback to the owner's renderer
+            patchText(n1, n2, renderer);
             break;
         case 1 /* Comment */:
-            patchComment(n1, n2);
+            // VComment has no special capability, fallback to the owner's renderer
+            patchComment(n1, n2, renderer);
+            break;
+        case 4 /* Static */:
+            n2.elm = n1.elm;
             break;
         case 2 /* Element */:
-            patchElement(n1, n2);
+            patchElement(n1, n2, (_a = n2.data.renderer) !== null && _a !== void 0 ? _a : renderer);
             break;
         case 3 /* CustomElement */:
-            patchCustomElement(n1, n2);
+            patchCustomElement(n1, n2, (_b = n2.data.renderer) !== null && _b !== void 0 ? _b : renderer);
             break;
     }
 }
-function mount(node, parent, anchor) {
+function mount(node, parent, renderer, anchor) {
+    var _a, _b;
     switch (node.type) {
         case 0 /* Text */:
-            mountText(node, parent, anchor);
+            // VText has no special capability, fallback to the owner's renderer
+            mountText(node, parent, anchor, renderer);
             break;
         case 1 /* Comment */:
-            mountComment(node, parent, anchor);
+            // VComment has no special capability, fallback to the owner's renderer
+            mountComment(node, parent, anchor, renderer);
+            break;
+        case 4 /* Static */:
+            // VStatic cannot have a custom renderer associated to them, using owner's renderer
+            mountStatic(node, parent, anchor, renderer);
             break;
         case 2 /* Element */:
-            mountElement(node, parent, anchor);
+            // 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 */:
-            mountCustomElement(node, parent, anchor);
+            // 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;
     }
 }
-function patchText(n1, n2) {
+function patchText(n1, n2, renderer) {
     n2.elm = n1.elm;
     if (n2.text !== n1.text) {
-        updateTextContent(n2);
+        updateTextContent(n2, renderer);
     }
 }
-function mountText(node, parent, anchor) {
-    const { owner } = node;
-    const textNode = (node.elm = createText$1(node.text));
-    linkNodeToShadow(textNode, owner);
-    insertNode(textNode, parent, anchor);
+function mountText(vnode, parent, anchor, renderer) {
+    const { owner } = vnode;
+    const { createText } = renderer;
+    const textNode = (vnode.elm = createText(vnode.text));
+    linkNodeToShadow(textNode, owner, renderer);
+    insertNode(textNode, parent, anchor, renderer);
 }
-function patchComment(n1, n2) {
+function patchComment(n1, n2, renderer) {
     n2.elm = n1.elm;
     // FIXME: Comment nodes should be static, we shouldn't need to diff them together. However
     // it is the case today.
     if (n2.text !== n1.text) {
-        updateTextContent(n2);
+        updateTextContent(n2, renderer);
     }
 }
-function mountComment(node, parent, anchor) {
-    const { owner } = node;
-    const commentNode = (node.elm = createComment$1(node.text));
-    linkNodeToShadow(commentNode, owner);
-    insertNode(commentNode, parent, anchor);
+function mountComment(vnode, parent, anchor, renderer) {
+    const { owner } = vnode;
+    const { createComment } = renderer;
+    const commentNode = (vnode.elm = createComment(vnode.text));
+    linkNodeToShadow(commentNode, owner, renderer);
+    insertNode(commentNode, parent, anchor, renderer);
 }
-function mountElement(vnode, parent, anchor) {
+function mountElement(vnode, parent, anchor, renderer) {
     const { sel, owner, data: { svg }, } = vnode;
+    const { createElement } = renderer;
     const namespace = isTrue(svg) ? SVG_NAMESPACE : undefined;
-    const elm = createElement$1(sel, namespace);
-    linkNodeToShadow(elm, owner);
-    fallbackElmHook(elm, vnode);
+    const elm = createElement(sel, namespace);
+    linkNodeToShadow(elm, owner, renderer);
+    fallbackElmHook(elm, vnode, renderer);
     vnode.elm = elm;
-    patchElementPropsAndAttrs$1(null, vnode);
-    insertNode(elm, parent, anchor);
-    mountVNodes(vnode.children, elm, null);
+    patchElementPropsAndAttrs$1(null, vnode, renderer);
+    insertNode(elm, parent, anchor, renderer);
+    mountVNodes(vnode.children, elm, renderer, null);
 }
-function patchElement(n1, n2) {
+function patchElement(n1, n2, renderer) {
     const elm = (n2.elm = n1.elm);
-    patchElementPropsAndAttrs$1(n1, n2);
-    patchChildren(n1.children, n2.children, elm);
+    patchElementPropsAndAttrs$1(n1, n2, renderer);
+    patchChildren(n1.children, n2.children, elm, renderer);
+}
+function mountStatic(vnode, parent, anchor, renderer) {
+    const { owner } = vnode;
+    const { cloneNode, isSyntheticShadowDefined } = renderer;
+    const elm = (vnode.elm = cloneNode(vnode.fragment, true));
+    linkNodeToShadow(elm, owner, 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 */) {
+            elm[KEY__SHADOW_STATIC] = true;
+        }
+    }
+    if (process.env.NODE_ENV !== 'production') {
+        const isLight = renderMode === 0 /* Light */;
+        patchElementWithRestrictions(elm, { isPortal: false, isLight });
+    }
+    insertNode(elm, parent, anchor, renderer);
 }
-function mountCustomElement(vnode, parent, anchor) {
+function mountCustomElement(vnode, parent, anchor, renderer) {
     const { sel, owner } = vnode;
-    const UpgradableConstructor = getUpgradableConstructor(sel);
+    const UpgradableConstructor = getUpgradableConstructor(sel, renderer);
     /**
      * Note: if the upgradable constructor does not expect, or throw when we new it
      * with a callback as the first argument, we could implement a more advanced
@@ -3776,9 +3687,9 @@ function mountCustomElement(vnode, parent, anchor) {
     let vm;
     const elm = new UpgradableConstructor((elm) => {
         // the custom element from the registry is expecting an upgrade callback
-        vm = createViewModelHook(elm, vnode);
+        vm = createViewModelHook(elm, vnode, renderer);
     });
-    linkNodeToShadow(elm, owner);
+    linkNodeToShadow(elm, owner, renderer);
     vnode.elm = elm;
     vnode.vm = vm;
     if (vm) {
@@ -3787,23 +3698,23 @@ function mountCustomElement(vnode, parent, anchor) {
     else if (vnode.ctor !== UpgradableConstructor) {
         throw new TypeError(`Incorrect Component Constructor`);
     }
-    patchElementPropsAndAttrs$1(null, vnode);
-    insertNode(elm, parent, anchor);
+    patchElementPropsAndAttrs$1(null, vnode, renderer);
+    insertNode(elm, parent, anchor, renderer);
     if (vm) {
         if (process.env.NODE_ENV !== 'production') {
             assert.isTrue(vm.state === 0 /* created */, `${vm} cannot be recycled.`);
         }
         runConnectedCallback(vm);
     }
-    mountVNodes(vnode.children, elm, null);
+    mountVNodes(vnode.children, elm, renderer, null);
     if (vm) {
         appendVM(vm);
     }
 }
-function patchCustomElement(n1, n2) {
+function patchCustomElement(n1, n2, renderer) {
     const elm = (n2.elm = n1.elm);
     const vm = (n2.vm = n1.vm);
-    patchElementPropsAndAttrs$1(n1, n2);
+    patchElementPropsAndAttrs$1(n1, n2, renderer);
     if (!isUndefined$1(vm)) {
         // in fallback mode, the allocation will always set children to
         // empty and delegate the real allocation to the slot elements
@@ -3811,34 +3722,36 @@ function patchCustomElement(n1, n2) {
     }
     // in fallback mode, the children will be always empty, so, nothing
     // will happen, but in native, it does allocate the light dom
-    patchChildren(n1.children, n2.children, elm);
+    patchChildren(n1.children, n2.children, elm, renderer);
     if (!isUndefined$1(vm)) {
         // this will probably update the shadowRoot, but only if the vm is in a dirty state
         // this is important to preserve the top to bottom synchronous rendering phase.
         rerenderVM(vm);
     }
 }
-function mountVNodes(vnodes, parent, anchor, start = 0, end = vnodes.length) {
+function mountVNodes(vnodes, parent, renderer, anchor, start = 0, end = vnodes.length) {
     for (; start < end; ++start) {
         const vnode = vnodes[start];
         if (isVNode(vnode)) {
-            mount(vnode, parent, anchor);
+            mount(vnode, parent, renderer, anchor);
         }
     }
 }
-function unmount(vnode, parent, doRemove = false) {
+function unmount(vnode, parent, renderer, doRemove = false) {
     const { type, elm, sel } = vnode;
     // When unmounting a VNode subtree not all the elements have to removed from the DOM. The
     // subtree root, is the only element worth unmounting from the subtree.
     if (doRemove) {
-        removeNode(elm, parent);
+        // The vnode might or might not have a data.renderer associated to it
+        // but the removal used here is from the owner instead.
+        removeNode(elm, parent, renderer);
     }
     switch (type) {
         case 2 /* Element */: {
             // Slot content is removed to trigger slotchange event when removing slot.
             // Only required for synthetic shadow.
-            const removeChildren = sel === 'slot' && vnode.owner.shadowMode === 1 /* Synthetic */;
-            unmountVNodes(vnode.children, elm, removeChildren);
+            const shouldRemoveChildren = sel === 'slot' && vnode.owner.shadowMode === 1 /* Synthetic */;
+            unmountVNodes(vnode.children, elm, renderer, shouldRemoveChildren);
             break;
         }
         case 3 /* CustomElement */: {
@@ -3851,11 +3764,11 @@ function unmount(vnode, parent, doRemove = false) {
         }
     }
 }
-function unmountVNodes(vnodes, parent, doRemove = false, start = 0, end = vnodes.length) {
+function unmountVNodes(vnodes, parent, renderer, doRemove = false, start = 0, end = vnodes.length) {
     for (; start < end; ++start) {
         const ch = vnodes[start];
         if (isVNode(ch)) {
-            unmount(ch, parent, doRemove);
+            unmount(ch, parent, renderer, doRemove);
         }
     }
 }
@@ -3869,66 +3782,71 @@ function setElementShadowToken(elm, token) {
     elm.$shadowToken$ = token;
 }
 // Set the scope token class for *.scoped.css styles
-function setScopeTokenClassIfNecessary(elm, owner) {
+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) {
-        getClassList$1(elm).add(token);
+        // 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);
     }
 }
-function linkNodeToShadow(elm, owner) {
+function linkNodeToShadow(elm, owner, renderer) {
     const { renderRoot, renderMode, shadowMode } = owner;
+    const { isSyntheticShadowDefined } = renderer;
     // TODO [#1164]: this should eventually be done by the polyfill directly
-    if (isSyntheticShadowDefined$1) {
+    if (isSyntheticShadowDefined) {
         if (shadowMode === 1 /* Synthetic */ || renderMode === 0 /* Light */) {
             elm[KEY__SHADOW_RESOLVER] = renderRoot[KEY__SHADOW_RESOLVER];
         }
     }
 }
-function updateTextContent(vnode) {
+function updateTextContent(vnode, renderer) {
     const { elm, text } = vnode;
+    const { setText } = renderer;
     if (process.env.NODE_ENV !== 'production') {
         unlockDomMutation();
     }
-    setText$1(elm, text);
+    setText(elm, text);
     if (process.env.NODE_ENV !== 'production') {
         lockDomMutation();
     }
 }
-function insertNode(node, parent, anchor) {
+function insertNode(node, parent, anchor, renderer) {
     if (process.env.NODE_ENV !== 'production') {
         unlockDomMutation();
     }
-    insert$1(node, parent, anchor);
+    renderer.insert(node, parent, anchor);
     if (process.env.NODE_ENV !== 'production') {
         lockDomMutation();
     }
 }
-function removeNode(node, parent) {
+function removeNode(node, parent, renderer) {
     if (process.env.NODE_ENV !== 'production') {
         unlockDomMutation();
     }
-    remove$1(node, parent);
+    renderer.remove(node, parent);
     if (process.env.NODE_ENV !== 'production') {
         lockDomMutation();
     }
 }
-function patchElementPropsAndAttrs$1(oldVnode, vnode) {
+function patchElementPropsAndAttrs$1(oldVnode, vnode, renderer) {
     if (isNull(oldVnode)) {
-        applyEventListeners(vnode);
-        applyStaticClassAttribute(vnode);
-        applyStaticStyleAttribute(vnode);
+        applyEventListeners(vnode, renderer);
+        applyStaticClassAttribute(vnode, renderer);
+        applyStaticStyleAttribute(vnode, renderer);
     }
     // Attrs need to be applied to element before props IE11 will wipe out value on radio inputs if
     // value is set before type=radio.
-    patchClassAttribute(oldVnode, vnode);
-    patchStyleAttribute(oldVnode, vnode);
-    patchAttributes(oldVnode, vnode);
-    patchProps(oldVnode, vnode);
+    patchClassAttribute(oldVnode, vnode, renderer);
+    patchStyleAttribute(oldVnode, vnode, renderer);
+    patchAttributes(oldVnode, vnode, renderer);
+    patchProps(oldVnode, vnode, renderer);
 }
-function fallbackElmHook(elm, vnode) {
+function fallbackElmHook(elm, vnode, renderer) {
     const { owner } = vnode;
-    setScopeTokenClassIfNecessary(elm, owner);
+    setScopeTokenClassIfNecessary(elm, owner, renderer);
     if (owner.shadowMode === 1 /* Synthetic */) {
         const { data: { context }, } = vnode;
         const { stylesheetToken } = owner.context;
@@ -3976,7 +3894,7 @@ function allocateChildren(vnode, vm) {
         vnode.children = EmptyArray;
     }
 }
-function createViewModelHook(elm, vnode) {
+function createViewModelHook(elm, vnode, renderer) {
     let vm = getAssociatedVMIfPresent(elm);
     // There is a possibility that a custom element is registered under tagName, in which case, the
     // initialization is already carry on, and there is nothing else to do here since this hook is
@@ -3985,7 +3903,7 @@ function createViewModelHook(elm, vnode) {
         return vm;
     }
     const { sel, mode, ctor, owner } = vnode;
-    setScopeTokenClassIfNecessary(elm, owner);
+    setScopeTokenClassIfNecessary(elm, owner, renderer);
     if (owner.shadowMode === 1 /* Synthetic */) {
         const { stylesheetToken } = owner.context;
         // when running in synthetic shadow mode, we need to set the shadowToken value
@@ -3994,7 +3912,7 @@ function createViewModelHook(elm, vnode) {
             setElementShadowToken(elm, stylesheetToken);
         }
     }
-    vm = createVM(elm, ctor, {
+    vm = createVM(elm, ctor, renderer, {
         mode,
         owner,
         tagName: sel,
@@ -4069,7 +3987,7 @@ function createKeyToOldIdx(children, beginIdx, endIdx) {
     }
     return map;
 }
-function updateDynamicChildren(oldCh, newCh, parent) {
+function updateDynamicChildren(oldCh, newCh, parent, renderer) {
     let oldStartIdx = 0;
     let newStartIdx = 0;
     let oldEndIdx = oldCh.length - 1;
@@ -4098,26 +4016,26 @@ function updateDynamicChildren(oldCh, newCh, parent) {
             newEndVnode = newCh[--newEndIdx];
         }
         else if (isSameVnode(oldStartVnode, newStartVnode)) {
-            patch(oldStartVnode, newStartVnode);
+            patch(oldStartVnode, newStartVnode, renderer);
             oldStartVnode = oldCh[++oldStartIdx];
             newStartVnode = newCh[++newStartIdx];
         }
         else if (isSameVnode(oldEndVnode, newEndVnode)) {
-            patch(oldEndVnode, newEndVnode);
+            patch(oldEndVnode, newEndVnode, renderer);
             oldEndVnode = oldCh[--oldEndIdx];
             newEndVnode = newCh[--newEndIdx];
         }
         else if (isSameVnode(oldStartVnode, newEndVnode)) {
             // Vnode moved right
-            patch(oldStartVnode, newEndVnode);
-            insertNode(oldStartVnode.elm, parent, nextSibling$1(oldEndVnode.elm));
+            patch(oldStartVnode, newEndVnode, renderer);
+            insertNode(oldStartVnode.elm, parent, renderer.nextSibling(oldEndVnode.elm), renderer);
             oldStartVnode = oldCh[++oldStartIdx];
             newEndVnode = newCh[--newEndIdx];
         }
         else if (isSameVnode(oldEndVnode, newStartVnode)) {
             // Vnode moved left
-            patch(oldEndVnode, newStartVnode);
-            insertNode(newStartVnode.elm, parent, oldStartVnode.elm);
+            patch(oldEndVnode, newStartVnode, renderer);
+            insertNode(newStartVnode.elm, parent, oldStartVnode.elm, renderer);
             oldEndVnode = oldCh[--oldEndIdx];
             newStartVnode = newCh[++newStartIdx];
         }
@@ -4128,7 +4046,7 @@ function updateDynamicChildren(oldCh, newCh, parent) {
             idxInOld = oldKeyToIdx[newStartVnode.key];
             if (isUndefined$1(idxInOld)) {
                 // New element
-                mount(newStartVnode, parent, oldStartVnode.elm);
+                mount(newStartVnode, parent, renderer, oldStartVnode.elm);
                 newStartVnode = newCh[++newStartIdx];
             }
             else {
@@ -4136,10 +4054,10 @@ function updateDynamicChildren(oldCh, newCh, parent) {
                 if (isVNode(elmToMove)) {
                     if (elmToMove.sel !== newStartVnode.sel) {
                         // New element
-                        mount(newStartVnode, parent, oldStartVnode.elm);
+                        mount(newStartVnode, parent, renderer, oldStartVnode.elm);
                     }
                     else {
-                        patch(elmToMove, newStartVnode);
+                        patch(elmToMove, newStartVnode, renderer);
                         // Delete the old child, but copy the array since it is read-only.
                         // The `oldCh` will be GC'ed after `updateDynamicChildren` is complete,
                         // so we only care about the `oldCh` object inside this function.
@@ -4151,7 +4069,7 @@ function updateDynamicChildren(oldCh, newCh, parent) {
                         }
                         // We've already cloned at least once, so it's no longer read-only
                         oldCh[idxInOld] = undefined;
-                        insertNode(elmToMove.elm, parent, oldStartVnode.elm);
+                        insertNode(elmToMove.elm, parent, oldStartVnode.elm, renderer);
                     }
                 }
                 newStartVnode = newCh[++newStartIdx];
@@ -4168,25 +4086,25 @@ function updateDynamicChildren(oldCh, newCh, parent) {
                 n = newCh[++i];
             } while (!isVNode(n) && i < newChEnd);
             before = isVNode(n) ? n.elm : null;
-            mountVNodes(newCh, parent, before, newStartIdx, newEndIdx + 1);
+            mountVNodes(newCh, parent, renderer, before, newStartIdx, newEndIdx + 1);
         }
         else {
-            unmountVNodes(oldCh, parent, true, oldStartIdx, oldEndIdx + 1);
+            unmountVNodes(oldCh, parent, renderer, true, oldStartIdx, oldEndIdx + 1);
         }
     }
 }
-function updateStaticChildren(c1, c2, parent) {
+function updateStaticChildren(c1, c2, parent, renderer) {
     const c1Length = c1.length;
     const c2Length = c2.length;
     if (c1Length === 0) {
         // the old list is empty, we can directly insert anything new
-        mountVNodes(c2, parent, null);
+        mountVNodes(c2, parent, renderer, null);
         return;
     }
     if (c2Length === 0) {
         // the old list is nonempty and the new list is empty so we can directly remove all old nodes
         // this is the case in which the dynamic children of an if-directive should be removed
-        unmountVNodes(c1, parent, true);
+        unmountVNodes(c1, parent, renderer, true);
         return;
     }
     // if the old list is not empty, the new list MUST have the same
@@ -4199,16 +4117,16 @@ function updateStaticChildren(c1, c2, parent) {
             if (isVNode(n1)) {
                 if (isVNode(n2)) {
                     // both vnodes are equivalent, and we just need to patch them
-                    patch(n1, n2);
+                    patch(n1, n2, renderer);
                     anchor = n2.elm;
                 }
                 else {
                     // removing the old vnode since the new one is null
-                    unmount(n1, parent, true);
+                    unmount(n1, parent, renderer, true);
                 }
             }
             else if (isVNode(n2)) {
-                mount(n2, parent, anchor);
+                mount(n2, parent, renderer, anchor);
                 anchor = n2.elm;
             }
         }
@@ -4225,6 +4143,17 @@ const SymbolIterator = Symbol.iterator;
 function addVNodeToChildLWC(vnode) {
     ArrayPush$1.call(getVMBeingRendered().velements, vnode);
 }
+// [st]atic node
+function st(fragment, key) {
+    return {
+        type: 4 /* Static */,
+        sel: undefined,
+        key,
+        elm: undefined,
+        fragment,
+        owner: getVMBeingRendered(),
+    };
+}
 // [h]tml node
 function h(sel, data, children = EmptyArray) {
     const vmBeingRendered = getVMBeingRendered();
@@ -4614,6 +4543,7 @@ const api = freeze({
     co,
     dc,
     ti,
+    st,
     gid,
     fid,
     shc,
@@ -4637,7 +4567,7 @@ function createInlineStyleVNode(content) {
     }, [api.t(content)]);
 }
 function updateStylesheetToken(vm, template) {
-    const { elm, context, renderMode, shadowMode } = vm;
+    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 { hasScopedStyles } = context;
@@ -4648,10 +4578,10 @@ function updateStylesheetToken(vm, template) {
     const { stylesheetToken: oldToken, hasTokenInClass: oldHasTokenInClass, hasTokenInAttribute: oldHasTokenInAttribute, } = context;
     if (!isUndefined$1(oldToken)) {
         if (oldHasTokenInClass) {
-            getClassList$1(elm).remove(makeHostToken(oldToken));
+            getClassList(elm).remove(makeHostToken(oldToken));
         }
         if (oldHasTokenInAttribute) {
-            removeAttribute$1(elm, makeHostToken(oldToken));
+            removeAttribute(elm, makeHostToken(oldToken));
         }
     }
     // Apply the new template styling token to the host element, if the new template has any
@@ -4662,11 +4592,11 @@ function updateStylesheetToken(vm, template) {
     // Set the new styling token on the host element
     if (!isUndefined$1(newToken)) {
         if (hasScopedStyles) {
-            getClassList$1(elm).add(makeHostToken(newToken));
+            getClassList(elm).add(makeHostToken(newToken));
             newHasTokenInClass = true;
         }
         if (isSyntheticShadow) {
-            setAttribute$1(elm, makeHostToken(newToken), '');
+            setAttribute(elm, makeHostToken(newToken), '');
             newHasTokenInAttribute = true;
         }
     }
@@ -4754,19 +4684,18 @@ function getNearestNativeShadowComponent(vm) {
     return owner;
 }
 function createStylesheet(vm, stylesheets) {
-    const { renderMode, shadowMode } = vm;
+    const { renderMode, shadowMode, renderer: { ssr, insertStylesheet }, } = vm;
     if (renderMode === 1 /* Shadow */ && shadowMode === 1 /* Synthetic */) {
         for (let i = 0; i < stylesheets.length; i++) {
-            insertStylesheet$1(stylesheets[i]);
+            insertStylesheet(stylesheets[i]);
         }
     }
-    else if (ssr$1 || vm.hydrated) {
+    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
-        const combinedStylesheetContent = ArrayJoin.call(stylesheets, '\n');
-        return createInlineStyleVNode(combinedStylesheetContent);
+        return ArrayMap.call(stylesheets, createInlineStyleVNode);
     }
     else {
         // native shadow or light DOM, DOM renderer
@@ -4774,7 +4703,7 @@ function createStylesheet(vm, stylesheets) {
         // null root means a global style
         const target = isNull(root) ? undefined : root.shadowRoot;
         for (let i = 0; i < stylesheets.length; i++) {
-            insertStylesheet$1(stylesheets[i], target);
+            insertStylesheet(stylesheets[i], target);
         }
     }
     return null;
@@ -4900,6 +4829,54 @@ function validateLightDomTemplate(template, vm) {
         assert.isTrue(isUndefined$1(template.renderMode), `Shadow DOM components template can't render light DOM templates. Either remove the 'lwc:render-mode' directive from ${getComponentTag(vm)} or set it to 'lwc:render-mode="shadow"`);
     }
 }
+function buildParseFragmentFn(createFragmentFn) {
+    return (strings, ...keys) => {
+        const cache = create(null);
+        return function () {
+            const { context: { hasScopedStyles, stylesheetToken }, shadowMode, renderer, } = getVMBeingRendered();
+            const hasStyleToken = !isUndefined$1(stylesheetToken);
+            const isSyntheticShadow = shadowMode === 1 /* Synthetic */;
+            let cacheKey = 0;
+            if (hasStyleToken && hasScopedStyles) {
+                cacheKey |= 1 /* HAS_SCOPED_STYLE */;
+            }
+            if (hasStyleToken && isSyntheticShadow) {
+                cacheKey |= 2 /* SHADOW_MODE_SYNTHETIC */;
+            }
+            if (!isUndefined$1(cache[cacheKey])) {
+                return cache[cacheKey];
+            }
+            const classToken = hasScopedStyles && hasStyleToken ? ' ' + stylesheetToken : '';
+            const classAttrToken = hasScopedStyles && hasStyleToken ? ` class="${stylesheetToken}"` : '';
+            const attrToken = hasStyleToken && isSyntheticShadow ? ' ' + stylesheetToken : '';
+            let htmlFragment = '';
+            for (let i = 0, n = keys.length; i < n; i++) {
+                switch (keys[i]) {
+                    case 0: // styleToken in existing class attr
+                        htmlFragment += strings[i] + classToken;
+                        break;
+                    case 1: // styleToken for added class attr
+                        htmlFragment += strings[i] + classAttrToken;
+                        break;
+                    case 2: // styleToken as attr
+                        htmlFragment += strings[i] + attrToken;
+                        break;
+                    case 3: // ${1}${2}
+                        htmlFragment += strings[i] + classAttrToken + attrToken;
+                        break;
+                }
+            }
+            htmlFragment += strings[strings.length - 1];
+            cache[cacheKey] = createFragmentFn(htmlFragment, renderer);
+            return cache[cacheKey];
+        };
+    };
+}
+// Note: at the moment this code executes, we don't have a renderer yet.
+const parseFragment = buildParseFragmentFn((html, renderer) => {
+    const { createFragment } = renderer;
+    return createFragment(html);
+});
 function evaluateTemplate(vm, html) {
     if (process.env.NODE_ENV !== 'production') {
         assert.isTrue(isFunction$1(html), `evaluateTemplate() second argument must be an imported template instead of ${toString$1(html)}`);
@@ -4946,7 +4923,7 @@ function evaluateTemplate(vm, html) {
                 // Evaluate, create stylesheet and cache the produced VNode for future
                 // re-rendering.
                 const stylesheetsContent = getStylesheetsContent(vm, html);
-                context.styleVNode =
+                context.styleVNodes =
                     stylesheetsContent.length === 0
                         ? null
                         : createStylesheet(vm, stylesheetsContent);
@@ -4963,9 +4940,9 @@ function evaluateTemplate(vm, html) {
             // Set the global flag that template is being updated
             isUpdatingTemplate = true;
             vnodes = html.call(undefined, api, component, cmpSlots, context.tplCache);
-            const { styleVNode } = context;
-            if (!isNull(styleVNode)) {
-                ArrayUnshift.call(vnodes, styleVNode);
+            const { styleVNodes } = context;
+            if (!isNull(styleVNodes)) {
+                ArrayUnshift.apply(vnodes, styleVNodes);
             }
         });
     }, () => {
@@ -5295,7 +5272,7 @@ function getNearestShadowAncestor(vm) {
   return ancestor;
 }
 
-function createVM(elm, ctor, options) {
+function createVM(elm, ctor, renderer, options) {
   const {
     mode,
     owner,
@@ -5330,7 +5307,7 @@ function createVM(elm, ctor, options) {
       hasTokenInClass: undefined,
       hasTokenInAttribute: undefined,
       hasScopedStyles: undefined,
-      styleVNode: null,
+      styleVNodes: null,
       tplCache: EmptyObject,
       wiredConnecting: EmptyArray,
       wiredDisconnecting: EmptyArray
@@ -5344,9 +5321,10 @@ function createVM(elm, ctor, options) {
     renderRoot: null,
     callHook,
     setHook,
-    getHook
+    getHook,
+    renderer
   };
-  vm.shadowMode = computeShadowMode(vm);
+  vm.shadowMode = computeShadowMode(vm, renderer);
   vm.tro = getTemplateReactiveObserver(vm);
 
   if (process.env.NODE_ENV !== 'production') {
@@ -5371,13 +5349,17 @@ function createVM(elm, ctor, options) {
   return vm;
 }
 
-function computeShadowMode(vm) {
+function computeShadowMode(vm, renderer) {
   const {
     def
   } = vm;
+  const {
+    isSyntheticShadowDefined,
+    isNativeShadowDefined
+  } = renderer;
   let shadowMode;
 
-  if (isSyntheticShadowDefined$1) {
+  if (isSyntheticShadowDefined) {
     if (def.renderMode === 0
     /* Light */
     ) {
@@ -5386,7 +5368,7 @@ function computeShadowMode(vm) {
       shadowMode = 0
       /* Native */
       ;
-    } else if (isNativeShadowDefined$1) {
+    } else if (isNativeShadowDefined) {
       // Not combined with above condition because @lwc/features only supports identifiers in
       // the if-condition.
       if (runtimeFlags.ENABLE_MIXED_SHADOW_MODE) {
@@ -5476,7 +5458,8 @@ function rehydrate(vm) {
 function patchShadowRoot(vm, newCh) {
   const {
     renderRoot,
-    children: oldCh
+    children: oldCh,
+    renderer
   } = vm; // caching the new children collection
 
   vm.children = newCh;
@@ -5492,7 +5475,7 @@ function patchShadowRoot(vm, newCh) {
         , vm);
       }, () => {
         // job
-        patchChildren(oldCh, newCh, renderRoot);
+        patchChildren(oldCh, newCh, renderRoot, renderer);
       }, () => {
         // post
         logOperationEnd(2
@@ -5517,10 +5500,13 @@ function runRenderedCallback(vm) {
   const {
     def: {
       renderedCallback
+    },
+    renderer: {
+      ssr
     }
   } = vm;
 
-  if (isTrue(ssr$1)) {
+  if (isTrue(ssr)) {
     return;
   }
 
@@ -5754,14 +5740,17 @@ function recursivelyDisconnectChildren(vnodes) {
 function resetComponentRoot(vm) {
   const {
     children,
-    renderRoot
+    renderRoot,
+    renderer: {
+      remove
+    }
   } = vm;
 
   for (let i = 0, len = children.length; i < len; i++) {
     const child = children[i];
 
     if (!isNull(child) && !isUndefined$1(child.elm)) {
-      remove$1(child.elm, renderRoot);
+      remove(child.elm, renderRoot);
     }
   }
 
@@ -5770,7 +5759,13 @@ function resetComponentRoot(vm) {
   vm.velements = EmptyArray;
 }
 function scheduleRehydration(vm) {
-  if (isTrue(ssr$1) || isTrue(vm.isScheduled)) {
+  const {
+    renderer: {
+      ssr
+    }
+  } = vm;
+
+  if (isTrue(ssr) || isTrue(vm.isScheduled)) {
     return;
   }
 
@@ -5929,6 +5924,9 @@ function createContextWatcher(vm, wireDef, callbackWhenContextIsReady) {
     context: {
       wiredConnecting,
       wiredDisconnecting
+    },
+    renderer: {
+      dispatchEvent
     }
   } = vm; // waiting for the component to be connected to formally request the context via the token
 
@@ -5952,7 +5950,7 @@ function createContextWatcher(vm, wireDef, callbackWhenContextIsReady) {
       }
 
     });
-    dispatchEvent$1(elm, contextRegistrationEvent);
+    dispatchEvent(elm, contextRegistrationEvent);
   });
 }
 
@@ -6292,7 +6290,7 @@ function freezeTemplate(tmpl) {
         });
     }
 }
-/* version: 2.14.1 */
+/* version: 2.16.0 */
 
 /*
  * Copyright (c) 2020, salesforce.com, inc.
@@ -6365,6 +6363,9 @@ class HTMLElementImpl {
     }
 }
 const ssr = true;
+function isHydrating() {
+    return false;
+}
 const isNativeShadowDefined = false;
 const isSyntheticShadowDefined = false;
 function insert(node, parent, anchor) {
@@ -6385,6 +6386,16 @@ function remove(node, parent) {
     const nodeIndex = parent.children.indexOf(node);
     parent.children.splice(nodeIndex, 1);
 }
+function cloneNode(node) {
+    return node;
+}
+function createFragment(html) {
+    return {
+        type: HostNodeType.Raw,
+        parent: null,
+        value: html,
+    };
+}
 function createText(content) {
     return {
         type: HostNodeType.Text,
@@ -6591,68 +6602,49 @@ function getCustomElement(name) {
 const HTMLElementExported = HTMLElementImpl;
 /* noop */
 const assertInstanceOfHTMLElement = noop;
-
-/*
- * 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
- */
-setAssertInstanceOfHTMLElement(assertInstanceOfHTMLElement);
-setAttachShadow(attachShadow);
-setCreateComment(createComment);
-setCreateElement(createElement);
-setCreateText(createText);
-setDefineCustomElement(defineCustomElement);
-setDispatchEvent(dispatchEvent);
-setGetAttribute(getAttribute);
-setGetBoundingClientRect(getBoundingClientRect);
-setGetChildNodes(getChildNodes);
-setGetChildren(getChildren);
-setGetClassList(getClassList);
-setGetCustomElement(getCustomElement);
-setGetElementsByClassName(getElementsByClassName);
-setGetElementsByTagName(getElementsByTagName);
-setGetFirstChild(getFirstChild);
-setGetFirstElementChild(getFirstElementChild);
-setGetLastChild(getLastChild);
-setGetLastElementChild(getLastElementChild);
-setGetProperty(getProperty);
-setHTMLElement(HTMLElementExported);
-setInsert(insert);
-setIsConnected(isConnected);
-setIsNativeShadowDefined(isNativeShadowDefined);
-setIsSyntheticShadowDefined(isSyntheticShadowDefined);
-setNextSibling(nextSibling);
-setQuerySelector(querySelector);
-setQuerySelectorAll(querySelectorAll);
-setRemove(remove);
-setRemoveAttribute(removeAttribute);
-setRemoveEventListener(removeEventListener);
-setSetAttribute(setAttribute);
-setSetCSSStyleProperty(setCSSStyleProperty);
-setSetProperty(setProperty);
-setSetText(setText);
-setSsr(ssr);
-setAddEventListener(addEventListener);
-setInsertStylesheet(insertStylesheet);
-
-/*
- * 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
- */
-const ESCAPED_CHARS = {
-    '"': '&quot;',
-    "'": '&#x27;',
-    '<': '&lt;',
-    '>': '&gt;',
-    '&': '&amp;',
+const renderer = {
+    ssr,
+    isNativeShadowDefined,
+    isSyntheticShadowDefined,
+    HTMLElementExported,
+    isHydrating,
+    insert,
+    remove,
+    cloneNode,
+    createFragment,
+    createElement,
+    createText,
+    createComment,
+    nextSibling,
+    attachShadow,
+    getProperty,
+    setProperty,
+    setText,
+    getAttribute,
+    setAttribute,
+    removeAttribute,
+    addEventListener,
+    removeEventListener,
+    dispatchEvent,
+    getClassList,
+    setCSSStyleProperty,
+    getBoundingClientRect,
+    querySelector,
+    querySelectorAll,
+    getElementsByTagName,
+    getElementsByClassName,
+    getChildren,
+    getChildNodes,
+    getFirstChild,
+    getFirstElementChild,
+    getLastChild,
+    getLastElementChild,
+    isConnected,
+    insertStylesheet,
+    assertInstanceOfHTMLElement,
+    defineCustomElement,
+    getCustomElement,
 };
-function htmlEscape(str) {
-    return str.replace(/["'<>&]/g, (char) => ESCAPED_CHARS[char]);
-}
 
 /*
  * Copyright (c) 2020, salesforce.com, inc.
@@ -6729,8 +6721,8 @@ function renderComponent(tagName, Ctor, props = {}) {
     if (!isObject(props) || isNull(props)) {
         throw new TypeError(`"renderComponent" expects an object as the third parameter but instead received ${props}.`);
     }
-    const element = createElement(tagName);
-    createVM(element, Ctor, {
+    const element = renderer.createElement(tagName);
+    createVM(element, Ctor, renderer, {
         mode: 'open',
         owner: null,
         tagName,
@@ -6751,6 +6743,6 @@ function renderComponent(tagName, Ctor, props = {}) {
  */
 freeze(LightningElement);
 seal(LightningElement.prototype);
-/* version: 2.14.1 */
+/* version: 2.16.0 */
 
-export { LightningElement, api$1 as api, createContextProvider, freezeTemplate, getComponentDef, isComponentConstructor, readonly, register, registerComponent, registerDecorators, registerTemplate, renderComponent, sanitizeAttribute, setFeatureFlag, setFeatureFlagForTest, setHooks, track, unwrap, wire };
+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 };