@lwc/engine-core 2.3.4 → 2.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@lwc/engine-core",
-    "version": "2.3.4",
+    "version": "2.5.1",
     "description": "Core LWC engine APIs.",
     "homepage": "https://lwc.dev/",
     "repository": {
@@ -24,8 +24,8 @@
         "types/"
     ],
     "dependencies": {
-        "@lwc/features": "2.3.4",
-        "@lwc/shared": "2.3.4"
+        "@lwc/features": "2.5.1",
+        "@lwc/shared": "2.5.1"
     },
     "devDependencies": {
         "observable-membrane": "1.0.1"
@@ -33,5 +33,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "4c002dbcc8c6ae61f7719f71d2208f69220cf2c6"
+    "gitHead": "443fa2e0a54c8940814292aac84d40e7eb69b22f"
 }

package/types/framework/renderer.d.ts

@@ -2,7 +2,8 @@ export declare type HostNode = any;
 export declare type HostElement = any;
 export interface Renderer<N = HostNode, E = HostElement> {
     ssr: boolean;
-    syntheticShadow: boolean;
+    isNativeShadowDefined: boolean;
+    isSyntheticShadowDefined: boolean;
     insert(node: N, parent: E, anchor: N | null): void;
     remove(node: N, parent: E): void;
     createElement(tagName: string, namespace?: string): E;
@@ -28,6 +29,7 @@ export interface Renderer<N = HostNode, E = HostElement> {
     getElementsByClassName(element: E, names: string): HTMLCollection;
     isConnected(node: N): boolean;
     insertGlobalStylesheet(content: string): void;
+    insertStylesheet(content: string, target: N): void;
     assertInstanceOfHTMLElement?(elm: any, msg: string): void;
     defineCustomElement(name: string, constructor: CustomElementConstructor, options?: ElementDefinitionOptions): void;
     getCustomElement(name: string): CustomElementConstructor | undefined;

package/types/framework/stylesheet.d.ts

@@ -5,13 +5,13 @@ import { Template } from './template';
  * Function producing style based on a host and a shadow selector. This function is invoked by
  * the engine with different values depending on the mode that the component is running on.
  */
-export declare type StylesheetFactory = (hostSelector: string, shadowSelector: string, nativeShadow: boolean) => string;
+export declare type StylesheetFactory = (useActualHostSelector: boolean, stylesheetToken: string | undefined) => string;
 /**
  * The list of stylesheets associated with a template. Each entry is either a StylesheetFactory or a
  * TemplateStylesheetFactory a given stylesheet depends on other external stylesheets (via the
  * @import CSS declaration).
  */
 export declare type TemplateStylesheetFactories = Array<StylesheetFactory | TemplateStylesheetFactories>;
-export declare function updateSyntheticShadowAttributes(vm: VM, template: Template): void;
+export declare function updateStylesheetToken(vm: VM, template: Template): void;
 export declare function getStylesheetsContent(vm: VM, template: Template): string[];
 export declare function createStylesheet(vm: VM, stylesheets: string[]): VNode | null;

package/types/framework/template.d.ts

@@ -2,23 +2,14 @@ import { VNode, VNodes } from '../3rdparty/snabbdom/types';
 import { RenderAPI } from './api';
 import { SlotSet, TemplateCache, VM } from './vm';
 import { TemplateStylesheetFactories } from './stylesheet';
-export interface TemplateStylesheetTokens {
-    /** HTML attribute that need to be applied to the host element. This attribute is used for
-     * the `:host` pseudo class CSS selector. */
-    hostAttribute: string;
-    /** HTML attribute that need to the applied to all the element that the template produces.
-     * This attribute is used for style encapsulation when the engine runs with synthetic
-     * shadow. */
-    shadowAttribute: string;
-}
 export interface Template {
     (api: RenderAPI, cmp: object, slotSet: SlotSet, cache: TemplateCache): VNodes;
     /** The list of slot names used in the template. */
     slots?: string[];
     /** The stylesheet associated with the template. */
     stylesheets?: TemplateStylesheetFactories;
-    /** The stylesheet tokens used for synthetic shadow style scoping. */
-    stylesheetTokens?: TemplateStylesheetTokens;
+    /** The string used for synthetic shadow style scoping and light DOM style scoping. */
+    stylesheetToken?: string;
     /** Render mode for the template. Could be light or undefined (which means it's shadow) */
     renderMode?: 'light';
 }
@@ -26,3 +17,4 @@ export declare let isUpdatingTemplate: boolean;
 export declare function getVMBeingRendered(): VM | null;
 export declare function setVMBeingRendered(vm: VM | null): void;
 export declare function evaluateTemplate(vm: VM, html: Template): Array<VNode | null>;
+export declare function computeHasScopedStyles(template: Template): boolean;

package/types/framework/vm.d.ts

@@ -30,10 +30,14 @@ export declare const enum ShadowSupportMode {
     Default = "default"
 }
 export interface Context {
-    /** The attribute name used on the host element to scope the style. */
-    hostAttribute: string | undefined;
-    /** The attribute name used on all the elements rendered in the shadow tree to scope the style. */
-    shadowAttribute: string | undefined;
+    /** The string used for synthetic shadow DOM and light DOM style scoping. */
+    stylesheetToken: string | undefined;
+    /** True if a stylesheetToken was added to the host class */
+    hasTokenInClass: boolean | undefined;
+    /** True if a stylesheetToken was added to the host attributes */
+    hasTokenInAttribute: boolean | undefined;
+    /** Whether or not light DOM scoped styles are present in the stylesheets. */
+    hasScopedStyles: boolean | undefined;
     /** The VNode injected in all the shadow trees to apply the associated component stylesheets. */
     styleVNode: VNode | null;
     /** Object used by the template function to store information that can be reused between