fix(shadowDomShim): slot behaviour

src/app-data/index.ts

@@ -59,16 +59,19 @@ export const BUILD: BuildConditionals = {
   lazyLoad: false,
   profile: false,
   slotRelocation: true,
+  // TODO: Remove code related to deprecated `appendChildSlotFix` field.
   appendChildSlotFix: false,
   cloneNodeFix: false,
   hydratedAttribute: false,
   hydratedClass: true,
   // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.
   safari10: false,
   scriptDataOpts: false,
+  // TODO: Remove code related to deprecated `scopedSlotTextContentFix` field.
   scopedSlotTextContentFix: false,
   // TODO(STENCIL-662): Remove code related to deprecated shadowDomShim field
   shadowDomShim: false,
+  // TODO: Remove code related to deprecated `slotChildNodesFix` field.
   slotChildNodesFix: false,
   invisiblePrehydration: true,
   propBoolean: true,

src/compiler/app-core/app-data.ts

@@ -146,14 +146,17 @@ export const updateBuildConditionals = (config: Config, b: BuildConditionals) =>
   b.constructableCSS = !b.hotModuleReplacement || !!config._isTesting;
   b.asyncLoading = !!(b.asyncLoading || b.lazyLoad || b.taskQueue || b.initializeNextTick);
   b.cssAnnotations = true;
+  // TODO: Remove code related to deprecated `appendChildSlotFix` field.
   b.appendChildSlotFix = config.extras.appendChildSlotFix;
+  // TODO: Remove code related to deprecated `slotChildNodesFix` field.
   b.slotChildNodesFix = config.extras.slotChildNodesFix;
   b.cloneNodeFix = config.extras.cloneNodeFix;
   // TODO(STENCIL-661): Remove code related to the dynamic import shim
   b.dynamicImportShim = config.extras.__deprecated__dynamicImportShim;
   b.lifecycleDOMEvents = !!(b.isDebug || config._isTesting || config.extras.lifecycleDOMEvents);
   // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.
   b.safari10 = config.extras.__deprecated__safari10;
+  // TODO: Remove code related to deprecated `scopedSlotTextContentFix` field.
   b.scopedSlotTextContentFix = !!config.extras.scopedSlotTextContentFix;
   b.scriptDataOpts = config.extras.scriptDataOpts;
   // TODO(STENCIL-662): Remove code related to deprecated shadowDomShim field

src/compiler/config/test/validate-config.spec.ts

@@ -385,6 +385,7 @@ describe('validation', () => {
 
   it('should set extras defaults', () => {
     const { config } = validateConfig(userConfig, bootstrapConfig);
+    // TODO: Remove code related to deprecated `appendChildSlotFix` field.
     expect(config.extras.appendChildSlotFix).toBe(false);
     expect(config.extras.cloneNodeFix).toBe(false);
     // TODO(STENCIL-659): Remove code implementing the CSS variable shim
@@ -397,6 +398,7 @@ describe('validation', () => {
     expect(config.extras.scriptDataOpts).toBe(false);
     // TODO(STENCIL-662): Remove code related to deprecated shadowDomShim field
     expect(config.extras.__deprecated__shadowDomShim).toBe(false);
+    // TODO: Remove code related to deprecated `slotChildNodesFix` field.
     expect(config.extras.slotChildNodesFix).toBe(false);
     expect(config.extras.initializeNextTick).toBe(false);
     expect(config.extras.tagNameTransform).toBe(false);

src/compiler/config/validate-config.ts

@@ -102,6 +102,7 @@ export const validateConfig = (
   }
 
   validatedConfig.extras = validatedConfig.extras || {};
+  // TODO: Remove code related to deprecated `appendChildSlotFix` field.
   validatedConfig.extras.appendChildSlotFix = !!validatedConfig.extras.appendChildSlotFix;
   validatedConfig.extras.cloneNodeFix = !!validatedConfig.extras.cloneNodeFix;
   // TODO(STENCIL-659): Remove code implementing the CSS variable shim

src/compiler/output-targets/dist-hydrate-script/generate-hydrate-app.ts

@@ -135,7 +135,9 @@ const getHydrateBuildConditionals = (config: d.ValidatedConfig, cmps: d.Componen
   build.devTools = false;
   build.hotModuleReplacement = false;
   build.cloneNodeFix = false;
+  // TODO: Remove code related to deprecated `appendChildSlotFix` field.
   build.appendChildSlotFix = false;
+  // TODO: Remove code related to deprecated `slotChildNodesFix` field.
   build.slotChildNodesFix = false;
   // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.
   build.safari10 = false;

src/compiler/output-targets/dist-hydrate-script/hydrate-build-conditionals.ts

@@ -21,8 +21,11 @@ export const getHydrateBuildConditionals = (cmps: d.ComponentCompilerMeta[]) =>
   build.member = true;
   build.constructableCSS = false;
   build.asyncLoading = true;
+  // TODO: Remove code related to deprecated `appendChildSlotFix` field.
   build.appendChildSlotFix = false;
+  // TODO: Remove code related to deprecated `slotChildNodesFix` field.
   build.slotChildNodesFix = false;
+  build.asyncLoading = true;
   build.cloneNodeFix = false;
   build.cssAnnotations = true;
   // TODO(STENCIL-662): Remove code related to deprecated shadowDomShim field

src/declarations/stencil-private.ts

@@ -173,9 +173,12 @@ export interface BuildConditionals extends Partial<BuildFeatures> {
   // TODO(STENCIL-659): Remove code implementing the CSS variable shim
   cssVarShim?: boolean;
   constructableCSS?: boolean;
-  appendChildSlotFix?: boolean;
-  slotChildNodesFix?: boolean;
-  scopedSlotTextContentFix?: boolean;
+  // TODO: Remove code related to deprecated `appendChildSlotFix` field.
+  appendChildSlotFix: boolean;
+  // TODO: Remove code related to deprecated `slotChildNodesFix` field.
+  slotChildNodesFix: boolean;
+  // TODO: Remove code related to deprecated `scopedSlotTextContentFix` field.
+  scopedSlotTextContentFix: boolean;
   cloneNodeFix?: boolean;
   // TODO(STENCIL-661): Remove code related to the dynamic import shim
   dynamicImportShim?: boolean;
@@ -1267,6 +1270,22 @@ export interface HostElement extends HTMLElement {
   disconnectedCallback?: () => void;
   host?: Element;
   forceUpdate?: () => void;
+  readonly __childNodes?: NodeListOf<ChildNode>;
+  readonly __children?: HTMLCollectionOf<Element>;
+  readonly __childElementCount?: number;
+  readonly __firstChild?: ChildNode | null;
+  readonly __lastChild?: ChildNode | null;
+  __innerHTML?: string;
+  __innerText?: string;
+  __textContent?: string;
+  __insertBefore?: <T extends Node>(node: T, child: Node | null) => T;
+  __append?: (...nodes: (Node | string)[]) => void;
+  __prepend?: (...nodes: (Node | string)[]) => void;
+  __appendChild?: <T extends Node>(newChild: T) => T;
+  __replaceChildren?: (...nodes: (Node | string)[]) => void;
+  __insertAdjacentElement?: (position: InsertPosition, insertedElement: Element) => Element | null;
+  __insertAdjacentHTML?: (where: InsertPosition, html: string) => void;
+  __insertAdjacentText?: (where: InsertPosition, text: string) => void;
 
   // "s-" prefixed properties should not be property renamed
   // and should be common between all versions of stencil
@@ -1566,6 +1585,26 @@ export interface RenderNode extends HostElement {
    */
   ['s-sn']?: string;
 
+  /**
+   * Parent slot name
+   */
+  ['s-psn']?: string;
+
+  /**
+   * Is a slot fallback node
+   */
+  ['s-sf']?: boolean;
+
+  /**
+   * Slot has fallback nodes
+   */
+  ['s-hsf']?: boolean;
+
+  /**
+   * Slot fallback node text content
+   */
+  ['s-sfc']?: string;
+
   /**
    * Host element tag name:
    * The tag name of the host element that this
@@ -1581,6 +1620,12 @@ export interface RenderNode extends HostElement {
    */
   ['s-ol']?: RenderNode;
 
+  /**
+   * Original Order:
+   * A number representing the order of a slotted node
+   */
+  ['s-oo']?: number;
+
   /**
    * Node reference:
    * This is a reference for a original location node

src/declarations/stencil-public-compiler.ts

@@ -260,12 +260,15 @@ export interface StencilConfig {
 }
 
 export interface ConfigExtras {
+  // TODO:  Remove code related to deprecated `appendChildSlotFix` field.
   /**
    * By default, the slot polyfill does not update `appendChild()` so that it appends
    * new child nodes into the correct child slot like how shadow dom works. This is an opt-in
    * polyfill for those who need it when using `element.appendChild(node)` and expecting the
    * child to be appended in the same location shadow dom would. This is not required for
    * IE11 or Edge 18, but can be enabled if the app is using `appendChild()`. Defaults to `false`.
+   *
+   * @deprecated This is now automatically applied when components do not use `shadow: true`
    */
   appendChildSlotFix?: boolean;
 
@@ -338,9 +341,12 @@ export interface ConfigExtras {
    */
   scriptDataOpts?: boolean;
 
+  // TODO:  Remove code related to deprecated `scopedSlotTextContentFix` field.
   /**
    * Experimental flag to align the behavior of invoking `textContent` on a scoped component to act more like a
    * component that uses the shadow DOM. Defaults to `false`
+   *
+   * @deprecated - this is now automatically applied when components do not use `shadow: true`
    */
   scopedSlotTextContentFix?: boolean;
 
@@ -364,11 +370,14 @@ export interface ConfigExtras {
    */
   initializeNextTick?: boolean;
 
+  // TODO:  Remove code related to deprecated `slotChildNodesFix` field.
   /**
    * For browsers that do not support shadow dom (IE11 and Edge 18 and below), slot is polyfilled
    * to simulate the same behavior. However, the host element's `childNodes` and `children`
    * getters are not patched to only show the child nodes and elements of the default slot.
    * Defaults to `false`.
+   *
+   * @deprecated - this is now automatically applied when components do not use `shadow: true`
    */
   slotChildNodesFix?: boolean;
 

src/declarations/stencil-public-runtime.ts

@@ -332,6 +332,19 @@ export declare function getRenderingRef(): any;
 
 export interface HTMLStencilElement extends HTMLElement {
   componentOnReady(): Promise<this>;
+  readonly __childNodes?: NodeListOf<Node>;
+  readonly __children?: HTMLCollectionOf<Element>;
+  readonly __childElementCount?: number;
+  __innerHTML?: string;
+  __innerText?: string;
+  __textContent?: string;
+  __append?: (...nodes: (Node | string)[]) => void;
+  __prepend?: (...nodes: (Node | string)[]) => void;
+  __appendChild?: <T extends Node>(newChild: T) => T;
+  __replaceChildren?: (...nodes: (Node | string)[]) => void;
+  __insertAdjacentElement?: (position: InsertPosition, insertedElement: Element) => Element | null;
+  __insertAdjacentHTML?: (where: InsertPosition, html: string) => void;
+  __insertAdjacentText?: (where: InsertPosition, text: string) => void;
 }
 
 /**
@@ -620,9 +633,9 @@ export declare function h(sel: any, data: VNodeData | null, children: VNode): VN
  */
 export interface VNode {
   $flags$: number;
-  $tag$: string | number | Function;
+  $tag$: string | number | Function | null;
   $elm$: any;
-  $text$: string;
+  $text$: string | null;
   $children$: VNode[];
   $attrs$?: any;
   $name$?: string;

src/hydrate/runner/create-window.ts

@@ -1,14 +1,14 @@
 import { cloneWindow, MockWindow } from '@stencil/core/mock-doc';
 
-const templateWindows = new Map<string, Window>();
+const templateWindows = new Map<string, MockWindow>();
 
 export function createWindowFromHtml(templateHtml: string, uniqueId: string) {
   let templateWindow = templateWindows.get(uniqueId);
   if (templateWindow == null) {
-    templateWindow = new MockWindow(templateHtml) as any;
+    templateWindow = new MockWindow(templateHtml);
     templateWindows.set(uniqueId, templateWindow);
   }
 
-  const win = cloneWindow(templateWindow);
-  return win as any;
+  const win = cloneWindow(templateWindow as any);
+  return win;
 }

src/mock-doc/custom-element-registry.ts

@@ -150,7 +150,7 @@ export function createCustomElement(customElements: MockCustomElementRegistry, o
 
   proxyElements.set(host, elm);
 
-  return host;
+  return elm;
 }
 
 const proxyElements = new WeakMap();

src/runtime/bootstrap-custom-element.ts

@@ -5,6 +5,7 @@ import { CMP_FLAGS } from '@utils';
 import type * as d from '../declarations';
 import { connectedCallback } from './connected-callback';
 import { disconnectedCallback } from './disconnected-callback';
+import { patchCloneNode, patchPseudoShadowDom } from './dom-extras';
 import { computeMode } from './mode';
 import { proxyComponent } from './proxy-component';
 import { PROXY_FLAGS } from './runtime-constants';
@@ -36,6 +37,16 @@ export const proxyCustomElement = (Cstr: any, compactMeta: d.ComponentRuntimeMet
     cmpMeta.$flags$ |= CMP_FLAGS.needsShadowDomShim;
   }
 
+  if (
+    cmpMeta.$flags$ & CMP_FLAGS.hasSlotRelocation ||
+    (cmpMeta.$flags$ & CMP_FLAGS.shadowDomEncapsulation && CMP_FLAGS.needsShadowDomShim)
+  ) {
+    patchPseudoShadowDom(Cstr.prototype);
+    if (BUILD.cloneNodeFix) {
+      patchCloneNode(Cstr.prototype);
+    }
+  }
+
   const originalConnectedCallback = Cstr.prototype.connectedCallback;
   const originalDisconnectedCallback = Cstr.prototype.disconnectedCallback;
   Object.assign(Cstr.prototype, {
@@ -79,7 +90,7 @@ export const forceModeUpdate = (elm: d.RenderNode) => {
     const mode = computeMode(elm);
     const hostRef = getHostRef(elm);
 
-    if (hostRef.$modeName$ !== mode) {
+    if (hostRef && hostRef.$modeName$ !== mode) {
       const cmpMeta = hostRef.$cmpMeta$;
       const oldScopeId = elm['s-sc'];
       const scopeId = getScopeId(cmpMeta, mode);