@lwc/engine-core 3.3.3 → 3.5.0

package/dist/index.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (C) 2023 salesforce.com, inc.
  */
-import { noop, StringToLowerCase, isNull, ArrayPush as ArrayPush$1, ArrayJoin, isFrozen, isUndefined as isUndefined$1, defineProperty, ArrayIndexOf, ArraySplice, create, seal, isArray as isArray$1, isFunction as isFunction$1, keys, hasOwnProperty as hasOwnProperty$1, globalThis as globalThis$1, forEach, AriaPropNameToAttrNameMap, getPropertyDescriptor, defineProperties, getPrototypeOf as getPrototypeOf$1, setPrototypeOf, assign, isObject, isFalse, freeze, KEY__SYNTHETIC_MODE, assert, toString as toString$1, getOwnPropertyDescriptor as getOwnPropertyDescriptor$1, LWC_VERSION_COMMENT_REGEX, LWC_VERSION, getOwnPropertyNames as getOwnPropertyNames$1, htmlPropertyToAttribute, ArraySlice, ArrayMap, KEY__SCOPED_CSS, kebabCaseToCamelCase, StringCharCodeAt, XML_NAMESPACE, XLINK_NAMESPACE, isString, StringSlice, isTrue, SVG_NAMESPACE, KEY__SHADOW_STATIC, KEY__SHADOW_RESOLVER, ArraySome, ArrayPop, isNumber, StringReplace, ArrayUnshift, LOWEST_API_VERSION, KEY__NATIVE_GET_ELEMENT_BY_ID, KEY__NATIVE_QUERY_SELECTOR_ALL, ID_REFERENCING_ATTRIBUTES_SET, KEY__SHADOW_TOKEN, ArrayFilter, StringSplit, arrayEvery, ArrayIncludes, ArrayCopyWithin, ArrayFill, ArraySort, ArrayReverse, ArrayShift } from '@lwc/shared';
+import { noop, StringToLowerCase, isNull, ArrayPush as ArrayPush$1, ArrayJoin, isFrozen, isUndefined as isUndefined$1, defineProperty, ArrayIndexOf, ArraySplice, create, seal, isArray as isArray$1, isFunction as isFunction$1, keys, hasOwnProperty as hasOwnProperty$1, globalThis as globalThis$1, forEach, AriaPropNameToAttrNameMap, getPropertyDescriptor, defineProperties, getPrototypeOf as getPrototypeOf$1, setPrototypeOf, assign, isObject, freeze, KEY__SYNTHETIC_MODE, assert, toString as toString$1, getOwnPropertyDescriptor as getOwnPropertyDescriptor$1, isFalse, LWC_VERSION_COMMENT_REGEX, LWC_VERSION, getOwnPropertyNames as getOwnPropertyNames$1, getOwnPropertyDescriptors, htmlPropertyToAttribute, ArraySlice, ArrayMap, KEY__SCOPED_CSS, kebabCaseToCamelCase, StringCharCodeAt, XML_NAMESPACE, XLINK_NAMESPACE, isString, StringSlice, isTrue, SVG_NAMESPACE, KEY__SHADOW_STATIC, KEY__SHADOW_RESOLVER, ArraySome, ArrayPop, isNumber, StringReplace, ArrayUnshift, LOWEST_API_VERSION, KEY__NATIVE_GET_ELEMENT_BY_ID, KEY__NATIVE_QUERY_SELECTOR_ALL, ID_REFERENCING_ATTRIBUTES_SET, KEY__SHADOW_TOKEN, ArrayFilter, StringSplit, arrayEvery, ArrayIncludes, ArrayCopyWithin, ArrayFill, ArraySort, ArrayReverse, ArrayShift } from '@lwc/shared';
 import { applyAriaReflection } from '@lwc/aria-reflection';
 export { setFeatureFlag, setFeatureFlagForTest } from '@lwc/features';
 
@@ -519,8 +519,8 @@ function lockDomMutation() {
     assertNotProd(); // this method should never leak to prod
     isDomMutationAllowed = false;
 }
-function logMissingPortalError(name, type) {
-    return logError(`The \`${name}\` ${type} is available only on elements that use the \`lwc:dom="manual"\` directive.`);
+function logMissingPortalWarn(name, type) {
+    return logWarn(`The \`${name}\` ${type} is available only on elements that use the \`lwc:dom="manual"\` directive.`);
 }
 function patchElementWithRestrictions(elm, options) {
     assertNotProd(); // this method should never leak to prod
@@ -545,14 +545,14 @@ function patchElementWithRestrictions(elm, options) {
         assign(descriptors, {
             appendChild: generateDataDescriptor({
                 value(aChild) {
-                    logMissingPortalError('appendChild', 'method');
+                    logMissingPortalWarn('appendChild', 'method');
                     return appendChild.call(this, aChild);
                 },
             }),
             insertBefore: generateDataDescriptor({
                 value(newNode, referenceNode) {
                     if (!isDomMutationAllowed) {
-                        logMissingPortalError('insertBefore', 'method');
+                        logMissingPortalWarn('insertBefore', 'method');
                     }
                     return insertBefore.call(this, newNode, referenceNode);
                 },
@@ -560,14 +560,14 @@ function patchElementWithRestrictions(elm, options) {
             removeChild: generateDataDescriptor({
                 value(aChild) {
                     if (!isDomMutationAllowed) {
-                        logMissingPortalError('removeChild', 'method');
+                        logMissingPortalWarn('removeChild', 'method');
                     }
                     return removeChild.call(this, aChild);
                 },
             }),
             replaceChild: generateDataDescriptor({
                 value(newChild, oldChild) {
-                    logMissingPortalError('replaceChild', 'method');
+                    logMissingPortalWarn('replaceChild', 'method');
                     return replaceChild.call(this, newChild, oldChild);
                 },
             }),
@@ -577,7 +577,7 @@ function patchElementWithRestrictions(elm, options) {
                 },
                 set(value) {
                     if (!isDomMutationAllowed) {
-                        logMissingPortalError('nodeValue', 'property');
+                        logMissingPortalWarn('nodeValue', 'property');
                     }
                     originalNodeValueDescriptor.set.call(this, value);
                 },
@@ -587,7 +587,7 @@ function patchElementWithRestrictions(elm, options) {
                     return originalTextContentDescriptor.get.call(this);
                 },
                 set(value) {
-                    logMissingPortalError('textContent', 'property');
+                    logMissingPortalWarn('textContent', 'property');
                     originalTextContentDescriptor.set.call(this, value);
                 },
             }),
@@ -596,7 +596,7 @@ function patchElementWithRestrictions(elm, options) {
                     return originalInnerHTMLDescriptor.get.call(this);
                 },
                 set(value) {
-                    logMissingPortalError('innerHTML', 'property');
+                    logMissingPortalWarn('innerHTML', 'property');
                     return originalInnerHTMLDescriptor.set.call(this, value);
                 },
             }),
@@ -1454,7 +1454,51 @@ function warnIfInvokedDuringConstruction(vm, methodOrPropName) {
         logError(`this.${methodOrPropName} should not be called during the construction of the custom element for ${getComponentTag(vm)} because the element is not yet in the DOM or has no children yet.`);
     }
 }
-const supportsElementInternals = typeof ElementInternals !== 'undefined';
+// List of properties on ElementInternals that are formAssociated can be found in the spec:
+// https://html.spec.whatwg.org/multipage/custom-elements.html#form-associated-custom-elements
+const formAssociatedProps = new Set([
+    'setFormValue',
+    'form',
+    'setValidity',
+    'willValidate',
+    'validity',
+    'validationMessage',
+    'checkValidity',
+    'reportValidity',
+    'labels',
+]);
+// Verify that access to a form-associated property of the ElementInternals proxy has formAssociated set in the LWC.
+function assertFormAssociatedPropertySet(propertyKey, isFormAssociated) {
+    if (formAssociatedProps.has(propertyKey) && !isFormAssociated) {
+        //Note this error message mirrors Chrome and Firefox error messages, in Safari the error is slightly different.
+        throw new DOMException(`Failed to execute '${propertyKey}' on 'ElementInternals': The target element is not a form-associated custom element.`);
+    }
+}
+// Wrap all ElementInternal objects in a proxy to prevent form association when `formAssociated` is not set on an LWC.
+// This is needed because the 1UpgradeableConstructor1 always sets `formAssociated=true`, which means all
+// ElementInternal objects will have form-associated properties set when an LWC is placed in a form.
+// We are doing this to guard against customers taking a dependency on form elements being associated to ElementInternals
+// when 'formAssociated' has not been set on the LWC.
+function createElementInternalsProxy(elementInternals, isFormAssociated) {
+    const elementInternalsProxy = new Proxy(elementInternals, {
+        set(target, propertyKey, newValue) {
+            // ElementInternals implementation uses strings as property keys exclusively in chrome, firefox, and safari
+            assertFormAssociatedPropertySet(propertyKey, isFormAssociated);
+            return Reflect.set(target, propertyKey, newValue);
+        },
+        get(target, propertyKey) {
+            // ElementInternals implementation uses strings as property keys exclusively in chrome, firefox, and safari
+            assertFormAssociatedPropertySet(propertyKey, isFormAssociated);
+            const internalsPropertyValue = Reflect.get(target, propertyKey);
+            // Bind the property value to the target so that function invocations are called with the
+            // correct context ('this' value).
+            return typeof internalsPropertyValue === 'function'
+                ? internalsPropertyValue.bind(target)
+                : internalsPropertyValue;
+        },
+    });
+    return elementInternalsProxy;
+}
 // @ts-ignore
 LightningElement.prototype = {
     constructor: LightningElement,
@@ -1548,15 +1592,13 @@ LightningElement.prototype = {
     },
     attachInternals() {
         const vm = getAssociatedVM(this);
-        const { elm, renderer: { attachInternals }, } = vm;
-        if (isFalse(supportsElementInternals)) {
-            // Browsers that don't support attachInternals will need to be polyfilled before LWC is loaded.
-            throw new Error('attachInternals API is not supported in this browser environment.');
-        }
-        if (vm.renderMode === 0 /* RenderMode.Light */ || vm.shadowMode === 1 /* ShadowMode.Synthetic */) {
+        const { elm, def: { formAssociated }, renderer: { attachInternals }, } = vm;
+        if (vm.shadowMode === 1 /* ShadowMode.Synthetic */) {
             throw new Error('attachInternals API is not supported in light DOM or synthetic shadow.');
         }
-        return attachInternals(elm);
+        const internals = attachInternals(elm);
+        // #TODO[2970]: remove proxy once `UpgradeableConstructor` has been removed
+        return createElementInternalsProxy(internals, Boolean(formAssociated));
     },
     get isConnected() {
         const vm = getAssociatedVM(this);
@@ -2563,7 +2605,22 @@ function createAttributeChangedCallback(attributeToPropMap, superAttributeChange
         this[propName] = newValue;
     };
 }
-function HTMLBridgeElementFactory(SuperClass, props, methods) {
+function createAccessorThatWarns(propName) {
+    let prop;
+    return {
+        get() {
+            logWarn(`The property "${propName}" is not publicly accessible. Add the @api annotation to the property declaration or getter/setter in the component to make it accessible.`);
+            return prop;
+        },
+        set(value) {
+            logWarn(`The property "${propName}" is not publicly accessible. Add the @api annotation to the property declaration or getter/setter in the component to make it accessible.`);
+            prop = value;
+        },
+        enumerable: true,
+        configurable: true,
+    };
+}
+function HTMLBridgeElementFactory(SuperClass, publicProperties, methods, observedFields, proto) {
     const HTMLBridgeElement = class extends SuperClass {
     };
     // generating the hash table for attributes to avoid duplicate fields and facilitate validation
@@ -2572,9 +2629,30 @@ function HTMLBridgeElementFactory(SuperClass, props, methods) {
     const { attributeChangedCallback: superAttributeChangedCallback } = SuperClass.prototype;
     const { observedAttributes: superObservedAttributes = [] } = SuperClass;
     const descriptors = create(null);
+    // present a hint message so that developers are aware that they have not decorated property with @api
+    if (process.env.NODE_ENV !== 'production') {
+        if (!isUndefined$1(proto) && !isNull(proto)) {
+            const nonPublicPropertiesToWarnOn = new Set([
+                // getters, setters, and methods
+                ...keys(getOwnPropertyDescriptors(proto)),
+                // class properties
+                ...observedFields,
+            ]
+                // we don't want to override HTMLElement props because these are meaningful in other ways,
+                // and can break tooling that expects it to be iterable or defined, e.g. Jest:
+                // https://github.com/jestjs/jest/blob/b4c9587/packages/pretty-format/src/plugins/DOMElement.ts#L95
+                // It also doesn't make sense to override e.g. "constructor".
+                .filter((propName) => !(propName in HTMLElementPrototype)));
+            for (const propName of nonPublicPropertiesToWarnOn) {
+                if (ArrayIndexOf.call(publicProperties, propName) === -1) {
+                    descriptors[propName] = createAccessorThatWarns(propName);
+                }
+            }
+        }
+    }
     // expose getters and setters for each public props on the new Element Bridge
-    for (let i = 0, len = props.length; i < len; i += 1) {
-        const propName = props[i];
+    for (let i = 0, len = publicProperties.length; i < len; i += 1) {
+        const propName = publicProperties[i];
         attributeToPropMap[htmlPropertyToAttribute(propName)] = propName;
         descriptors[propName] = {
             get: createGetter(propName),
@@ -2601,9 +2679,26 @@ function HTMLBridgeElementFactory(SuperClass, props, methods) {
     };
     // To avoid leaking private component details, accessing internals from outside a component is not allowed.
     descriptors.attachInternals = {
+        set() {
+            if (process.env.NODE_ENV !== 'production') {
+                logWarn('attachInternals cannot be accessed outside of a component. Use this.attachInternals instead.');
+            }
+        },
         get() {
             if (process.env.NODE_ENV !== 'production') {
-                logError('attachInternals cannot be accessed outside of a component. Use this.attachInternals instead.');
+                logWarn('attachInternals cannot be accessed outside of a component. Use this.attachInternals instead.');
+            }
+        },
+    };
+    descriptors.formAssociated = {
+        set() {
+            if (process.env.NODE_ENV !== 'production') {
+                logWarn('formAssociated cannot be accessed outside of a component. Set the value within the component class.');
+            }
+        },
+        get() {
+            if (process.env.NODE_ENV !== 'production') {
+                logWarn('formAssociated cannot be accessed outside of a component. Set the value within the component class.');
             }
         },
     };
@@ -2617,7 +2712,7 @@ function HTMLBridgeElementFactory(SuperClass, props, methods) {
     defineProperties(HTMLBridgeElement.prototype, descriptors);
     return HTMLBridgeElement;
 }
-const BaseBridgeElement = HTMLBridgeElementFactory(HTMLElementConstructor, getOwnPropertyNames$1(HTMLElementOriginalDescriptors), []);
+const BaseBridgeElement = HTMLBridgeElementFactory(HTMLElementConstructor, getOwnPropertyNames$1(HTMLElementOriginalDescriptors), [], [], null);
 if (process.env.IS_BROWSER) {
     // This ARIA reflection only really makes sense in the browser. On the server, there is no `renderedCallback()`,
     // so you cannot do e.g. `this.template.querySelector('x-child').ariaBusy = 'true'`. So we don't need to expose
@@ -2915,7 +3010,7 @@ function getCtorProto(Ctor) {
     return proto;
 }
 function createComponentDef(Ctor) {
-    const { shadowSupportMode: ctorShadowSupportMode, renderMode: ctorRenderMode } = Ctor;
+    const { shadowSupportMode: ctorShadowSupportMode, renderMode: ctorRenderMode, formAssociated: ctorFormAssociated, } = Ctor;
     if (process.env.NODE_ENV !== 'production') {
         const ctorName = Ctor.name;
         // Removing the following assert until https://bugs.webkit.org/show_bug.cgi?id=190140 is fixed.
@@ -2939,10 +3034,10 @@ function createComponentDef(Ctor) {
     const decoratorsMeta = getDecoratorsMeta(Ctor);
     const { apiFields, apiFieldsConfig, apiMethods, wiredFields, wiredMethods, observedFields } = decoratorsMeta;
     const proto = Ctor.prototype;
-    let { connectedCallback, disconnectedCallback, renderedCallback, errorCallback, render } = proto;
+    let { connectedCallback, disconnectedCallback, renderedCallback, errorCallback, formAssociatedCallback, formResetCallback, formDisabledCallback, formStateRestoreCallback, render, } = proto;
     const superProto = getCtorProto(Ctor);
     const superDef = superProto !== LightningElement ? getComponentInternalDef(superProto) : lightingElementDef;
-    const bridge = HTMLBridgeElementFactory(superDef.bridge, keys(apiFields), keys(apiMethods));
+    const bridge = HTMLBridgeElementFactory(superDef.bridge, keys(apiFields), keys(apiMethods), keys(observedFields), proto);
     const props = assign(create(null), superDef.props, apiFields);
     const propsConfig = assign(create(null), superDef.propsConfig, apiFieldsConfig);
     const methods = assign(create(null), superDef.methods, apiMethods);
@@ -2951,6 +3046,10 @@ function createComponentDef(Ctor) {
     disconnectedCallback = disconnectedCallback || superDef.disconnectedCallback;
     renderedCallback = renderedCallback || superDef.renderedCallback;
     errorCallback = errorCallback || superDef.errorCallback;
+    formAssociatedCallback = formAssociatedCallback || superDef.formAssociatedCallback;
+    formResetCallback = formResetCallback || superDef.formResetCallback;
+    formDisabledCallback = formDisabledCallback || superDef.formDisabledCallback;
+    formStateRestoreCallback = formStateRestoreCallback || superDef.formStateRestoreCallback;
     render = render || superDef.render;
     let shadowSupportMode = superDef.shadowSupportMode;
     if (!isUndefined$1(ctorShadowSupportMode)) {
@@ -2960,6 +3059,10 @@ function createComponentDef(Ctor) {
     if (!isUndefined$1(ctorRenderMode)) {
         renderMode = ctorRenderMode === 'light' ? 0 /* RenderMode.Light */ : 1 /* RenderMode.Shadow */;
     }
+    let formAssociated = superDef.formAssociated;
+    if (!isUndefined$1(ctorFormAssociated)) {
+        formAssociated = ctorFormAssociated;
+    }
     const template = getComponentRegisteredTemplate(Ctor) || superDef.template;
     const name = Ctor.name || superDef.name;
     // installing observed fields into the prototype.
@@ -2975,10 +3078,15 @@ function createComponentDef(Ctor) {
         template,
         renderMode,
         shadowSupportMode,
+        formAssociated,
         connectedCallback,
         disconnectedCallback,
-        renderedCallback,
         errorCallback,
+        formAssociatedCallback,
+        formDisabledCallback,
+        formResetCallback,
+        formStateRestoreCallback,
+        renderedCallback,
         render,
     };
     // This is a no-op unless Lightning DevTools are enabled.
@@ -3055,6 +3163,7 @@ const lightingElementDef = {
     methods: EmptyObject,
     renderMode: 1 /* RenderMode.Shadow */,
     shadowSupportMode: "reset" /* ShadowSupportMode.Default */,
+    formAssociated: undefined,
     wire: EmptyObject,
     bridge: BaseBridgeElement,
     template: defaultEmptyTemplate,
@@ -3111,9 +3220,11 @@ function createInlineStyleVNode(content) {
         },
     }, [api.t(content)]);
 }
-function updateStylesheetToken(vm, template) {
+// TODO [#3733]: remove support for legacy scope tokens
+function updateStylesheetToken(vm, template, legacy) {
     const { elm, context, renderMode, shadowMode, renderer: { getClassList, removeAttribute, setAttribute }, } = vm;
-    const { stylesheets: newStylesheets, stylesheetToken: newStylesheetToken } = template;
+    const { stylesheets: newStylesheets } = template;
+    const newStylesheetToken = legacy ? template.legacyStylesheetToken : template.stylesheetToken;
     const { stylesheets: newVmStylesheets } = vm;
     const isSyntheticShadow = renderMode === 1 /* RenderMode.Shadow */ && shadowMode === 1 /* ShadowMode.Synthetic */;
     const { hasScopedStyles } = context;
@@ -3121,7 +3232,19 @@ function updateStylesheetToken(vm, template) {
     let newHasTokenInClass;
     let newHasTokenInAttribute;
     // Reset the styling token applied to the host element.
-    const { stylesheetToken: oldToken, hasTokenInClass: oldHasTokenInClass, hasTokenInAttribute: oldHasTokenInAttribute, } = context;
+    let oldToken;
+    let oldHasTokenInClass;
+    let oldHasTokenInAttribute;
+    if (legacy) {
+        oldToken = context.legacyStylesheetToken;
+        oldHasTokenInClass = context.hasLegacyTokenInClass;
+        oldHasTokenInAttribute = context.hasLegacyTokenInAttribute;
+    }
+    else {
+        oldToken = context.stylesheetToken;
+        oldHasTokenInClass = context.hasTokenInClass;
+        oldHasTokenInAttribute = context.hasTokenInAttribute;
+    }
     if (!isUndefined$1(oldToken)) {
         if (oldHasTokenInClass) {
             getClassList(elm).remove(makeHostToken(oldToken));
@@ -3149,9 +3272,16 @@ function updateStylesheetToken(vm, template) {
         }
     }
     // Update the styling tokens present on the context object.
-    context.stylesheetToken = newToken;
-    context.hasTokenInClass = newHasTokenInClass;
-    context.hasTokenInAttribute = newHasTokenInAttribute;
+    if (legacy) {
+        context.legacyStylesheetToken = newToken;
+        context.hasLegacyTokenInClass = newHasTokenInClass;
+        context.hasLegacyTokenInAttribute = newHasTokenInAttribute;
+    }
+    else {
+        context.stylesheetToken = newToken;
+        context.hasTokenInClass = newHasTokenInClass;
+        context.hasTokenInAttribute = newHasTokenInAttribute;
+    }
 }
 function evaluateStylesheetsContent(stylesheets, stylesheetToken, vm) {
     const content = [];
@@ -3239,9 +3369,12 @@ function getNearestShadowComponent(vm) {
  * this returns the unique token for that scoped stylesheet. Otherwise
  * it returns null.
  */
-function getScopeTokenClass(owner) {
+// TODO [#3733]: remove support for legacy scope tokens
+function getScopeTokenClass(owner, legacy) {
     const { cmpTemplate, context } = owner;
-    return (context.hasScopedStyles && (cmpTemplate === null || cmpTemplate === void 0 ? void 0 : cmpTemplate.stylesheetToken)) || null;
+    return ((context.hasScopedStyles &&
+        (legacy ? cmpTemplate === null || cmpTemplate === void 0 ? void 0 : cmpTemplate.legacyStylesheetToken : cmpTemplate === null || cmpTemplate === void 0 ? void 0 : cmpTemplate.stylesheetToken)) ||
+        null);
 }
 /**
  * This function returns the host style token for a custom element if it
@@ -3740,6 +3873,10 @@ function mountCustomElement(vnode, parent, anchor, renderer) {
     };
     let connectedCallback;
     let disconnectedCallback;
+    let formAssociatedCallback;
+    let formDisabledCallback;
+    let formResetCallback;
+    let formStateRestoreCallback;
     if (lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
         connectedCallback = (elm) => {
             connectRootElement(elm);
@@ -3747,13 +3884,25 @@ function mountCustomElement(vnode, parent, anchor, renderer) {
         disconnectedCallback = (elm) => {
             disconnectRootElement(elm);
         };
+        formAssociatedCallback = (elm) => {
+            runFormAssociatedCallback(elm);
+        };
+        formDisabledCallback = (elm) => {
+            runFormDisabledCallback(elm);
+        };
+        formResetCallback = (elm) => {
+            runFormResetCallback(elm);
+        };
+        formStateRestoreCallback = (elm) => {
+            runFormStateRestoreCallback(elm);
+        };
     }
     // Should never get a tag with upper case letter at this point; the compiler
     // should produce only tags with lowercase letters. However, the Java
     // compiler may generate tagnames with uppercase letters so - for backwards
     // compatibility, we lower case the tagname here.
     const normalizedTagname = sel.toLowerCase();
-    const elm = createCustomElement(normalizedTagname, upgradeCallback, connectedCallback, disconnectedCallback);
+    const elm = createCustomElement(normalizedTagname, upgradeCallback, connectedCallback, disconnectedCallback, formAssociatedCallback, formDisabledCallback, formResetCallback, formStateRestoreCallback);
     vnode.elm = elm;
     vnode.vm = vm;
     linkNodeToShadow(elm, owner, renderer);
@@ -3959,18 +4108,35 @@ function patchElementPropsAndAttrs$1(oldVnode, vnode, renderer) {
     patchProps(oldVnode, vnode, renderer);
 }
 function applyStyleScoping(elm, owner, renderer) {
+    const { getClassList } = renderer;
     // Set the class name for `*.scoped.css` style scoping.
-    const scopeToken = getScopeTokenClass(owner);
+    const scopeToken = getScopeTokenClass(owner, /* legacy */ false);
     if (!isNull(scopeToken)) {
-        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(scopeToken);
     }
+    // TODO [#3733]: remove support for legacy scope tokens
+    if (lwcRuntimeFlags.ENABLE_LEGACY_SCOPE_TOKENS) {
+        const legacyScopeToken = getScopeTokenClass(owner, /* legacy */ true);
+        if (!isNull(legacyScopeToken)) {
+            // 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(legacyScopeToken);
+        }
+    }
     // Set property element for synthetic shadow DOM style scoping.
     const { stylesheetToken: syntheticToken } = owner.context;
-    if (owner.shadowMode === 1 /* ShadowMode.Synthetic */ && !isUndefined$1(syntheticToken)) {
-        elm.$shadowToken$ = syntheticToken;
+    if (owner.shadowMode === 1 /* ShadowMode.Synthetic */) {
+        if (!isUndefined$1(syntheticToken)) {
+            elm.$shadowToken$ = syntheticToken;
+        }
+        if (lwcRuntimeFlags.ENABLE_LEGACY_SCOPE_TOKENS) {
+            const legacyToken = owner.context.legacyStylesheetToken;
+            if (!isUndefined$1(legacyToken)) {
+                elm.$legacyShadowToken$ = legacyToken;
+            }
+        }
     }
 }
 function applyDomManual(elm, vnode) {
@@ -4997,9 +5163,10 @@ function buildParseFragmentFn(createFragmentFn) {
     return (strings, ...keys) => {
         const cache = create(null);
         return function () {
-            const { context: { hasScopedStyles, stylesheetToken }, shadowMode, renderer, } = getVMBeingRendered();
+            const { context: { hasScopedStyles, stylesheetToken, legacyStylesheetToken }, shadowMode, renderer, } = getVMBeingRendered();
             const hasStyleToken = !isUndefined$1(stylesheetToken);
             const isSyntheticShadow = shadowMode === 1 /* ShadowMode.Synthetic */;
+            const hasLegacyToken = lwcRuntimeFlags.ENABLE_LEGACY_SCOPE_TOKENS && !isUndefined$1(legacyStylesheetToken);
             let cacheKey = 0;
             if (hasStyleToken && hasScopedStyles) {
                 cacheKey |= 1 /* FragmentCache.HAS_SCOPED_STYLE */;
@@ -5007,12 +5174,19 @@ function buildParseFragmentFn(createFragmentFn) {
             if (hasStyleToken && isSyntheticShadow) {
                 cacheKey |= 2 /* FragmentCache.SHADOW_MODE_SYNTHETIC */;
             }
+            if (hasLegacyToken) {
+                // This isn't strictly required for prod, but it's required for our karma tests
+                // since the lwcRuntimeFlag may change over time
+                cacheKey |= 4 /* FragmentCache.HAS_LEGACY_SCOPE_TOKEN */;
+            }
             if (!isUndefined$1(cache[cacheKey])) {
                 return cache[cacheKey];
             }
-            const classToken = hasScopedStyles && hasStyleToken ? ' ' + stylesheetToken : '';
-            const classAttrToken = hasScopedStyles && hasStyleToken ? ` class="${stylesheetToken}"` : '';
-            const attrToken = hasStyleToken && isSyntheticShadow ? ' ' + stylesheetToken : '';
+            // If legacy stylesheet tokens are required, then add them to the rendered string
+            const stylesheetTokenToRender = stylesheetToken + (hasLegacyToken ? ` ${legacyStylesheetToken}` : '');
+            const classToken = hasScopedStyles && hasStyleToken ? ' ' + stylesheetTokenToRender : '';
+            const classAttrToken = hasScopedStyles && hasStyleToken ? ` class="${stylesheetTokenToRender}"` : '';
+            const attrToken = hasStyleToken && isSyntheticShadow ? ' ' + stylesheetTokenToRender : '';
             let htmlFragment = '';
             for (let i = 0, n = keys.length; i < n; i++) {
                 switch (keys[i]) {
@@ -5088,7 +5262,10 @@ function evaluateTemplate(vm, html) {
                 // Set the computeHasScopedStyles property in the context, to avoid recomputing it repeatedly.
                 context.hasScopedStyles = computeHasScopedStyles(html, vm);
                 // Update the scoping token on the host element.
-                updateStylesheetToken(vm, html);
+                updateStylesheetToken(vm, html, /* legacy */ false);
+                if (lwcRuntimeFlags.ENABLE_LEGACY_SCOPE_TOKENS) {
+                    updateStylesheetToken(vm, html, /* legacy */ true);
+                }
                 // Evaluate, create stylesheet and cache the produced VNode for future
                 // re-rendering.
                 const stylesheetsContent = getStylesheetsContent(vm, html);
@@ -5426,6 +5603,9 @@ function createVM(elm, ctor, renderer, options) {
             stylesheetToken: undefined,
             hasTokenInClass: undefined,
             hasTokenInAttribute: undefined,
+            legacyStylesheetToken: undefined,
+            hasLegacyTokenInClass: undefined,
+            hasLegacyTokenInAttribute: undefined,
             hasScopedStyles: undefined,
             styleVNodes: null,
             tplCache: EmptyObject,
@@ -5850,6 +6030,48 @@ function forceRehydration(vm) {
         scheduleRehydration(vm);
     }
 }
+function runFormAssociatedCustomElementCallback(vm, faceCb) {
+    const { renderMode, shadowMode, def: { formAssociated }, } = vm;
+    // Technically the UpgradableConstructor always sets `static formAssociated = true` but silently fail here to match browser behavior.
+    if (isUndefined$1(formAssociated) || isFalse(formAssociated)) {
+        if (process.env.NODE_ENV !== 'production') {
+            logWarn(`Form associated lifecycle methods must have the 'static formAssociated' value set in the component's prototype chain.`);
+        }
+        return;
+    }
+    if (shadowMode === 1 /* ShadowMode.Synthetic */ && renderMode !== 0 /* RenderMode.Light */) {
+        throw new Error('Form associated lifecycle methods are not available in synthetic shadow. Please use native shadow or light DOM.');
+    }
+    invokeComponentCallback(vm, faceCb);
+}
+function runFormAssociatedCallback(elm) {
+    const vm = getAssociatedVM(elm);
+    const { formAssociatedCallback } = vm.def;
+    if (!isUndefined$1(formAssociatedCallback)) {
+        runFormAssociatedCustomElementCallback(vm, formAssociatedCallback);
+    }
+}
+function runFormDisabledCallback(elm) {
+    const vm = getAssociatedVM(elm);
+    const { formDisabledCallback } = vm.def;
+    if (!isUndefined$1(formDisabledCallback)) {
+        runFormAssociatedCustomElementCallback(vm, formDisabledCallback);
+    }
+}
+function runFormResetCallback(elm) {
+    const vm = getAssociatedVM(elm);
+    const { formResetCallback } = vm.def;
+    if (!isUndefined$1(formResetCallback)) {
+        runFormAssociatedCustomElementCallback(vm, formResetCallback);
+    }
+}
+function runFormStateRestoreCallback(elm) {
+    const vm = getAssociatedVM(elm);
+    const { formStateRestoreCallback } = vm.def;
+    if (!isUndefined$1(formStateRestoreCallback)) {
+        runFormAssociatedCustomElementCallback(vm, formStateRestoreCallback);
+    }
+}
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -6446,7 +6668,8 @@ function validateClassAttr(vnode, elm, renderer) {
     const { data, owner } = vnode;
     let { className, classMap } = data;
     const { getProperty, getClassList, getAttribute } = renderer;
-    const scopedToken = getScopeTokenClass(owner);
+    // we don't care about legacy for hydration. it's a new use case
+    const scopedToken = getScopeTokenClass(owner, /* legacy */ false);
     const stylesheetTokenHost = isVCustomElement(vnode) ? getStylesheetTokenHost(vnode) : null;
     // Classnames for scoped CSS are added directly to the DOM during rendering,
     // or to the VDOM on the server in the case of SSR. As such, these classnames
@@ -6761,7 +6984,7 @@ function trackMutations(tmpl) {
 }
 function addLegacyStylesheetTokensShim(tmpl) {
     // When ENABLE_FROZEN_TEMPLATE is false, then we shim stylesheetTokens on top of stylesheetToken for anyone who
-    // is accessing the old internal API (backwards compat). Details: https://salesforce.quip.com/v1rmAFu2cKAr
+    // is accessing the old internal API (backwards compat). Details: W-14210169
     defineProperty(tmpl, 'stylesheetTokens', {
         enumerable: true,
         configurable: true,
@@ -6855,6 +7078,6 @@ function readonly(obj) {
     return getReadOnlyProxy(obj);
 }
 
-export { LightningElement, profilerControl as __unstable__ProfilerControl, reportingControl as __unstable__ReportingControl, api$1 as api, computeShadowAndRenderMode, connectRootElement, createContextProviderWithRegister, createVM, disconnectRootElement, freezeTemplate, getAssociatedVMIfPresent, getComponentAPIVersion, getComponentConstructor, getComponentDef, getComponentHtmlPrototype, hydrateRoot, isComponentConstructor, parseFragment, parseSVGFragment, readonly, registerComponent, registerDecorators, registerTemplate, sanitizeAttribute, setHooks, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };
-/** version: 3.3.3 */
+export { LightningElement, profilerControl as __unstable__ProfilerControl, reportingControl as __unstable__ReportingControl, api$1 as api, computeShadowAndRenderMode, connectRootElement, createContextProviderWithRegister, createVM, disconnectRootElement, freezeTemplate, getAssociatedVMIfPresent, getComponentAPIVersion, getComponentConstructor, getComponentDef, getComponentHtmlPrototype, hydrateRoot, isComponentConstructor, parseFragment, parseSVGFragment, readonly, registerComponent, registerDecorators, registerTemplate, runFormAssociatedCallback, runFormDisabledCallback, runFormResetCallback, runFormStateRestoreCallback, sanitizeAttribute, setHooks, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };
+/** version: 3.5.0 */
 //# sourceMappingURL=index.js.map