fix(ssr): align csr and ssr reflective behavior (#5050)

packages/@lwc/engine-core/src/framework/html-properties.ts

@@ -5,16 +5,16 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 import {
+    AriaPropNameToAttrNameMap,
     create,
     forEach,
     getPropertyDescriptor,
     isUndefined,
     keys,
-    AriaPropNameToAttrNameMap,
+    REFLECTIVE_GLOBAL_PROPERTY_SET,
 } from '@lwc/shared';
 
 import { HTMLElementPrototype } from './html-element';
-import { defaultDefHTMLPropertyNames } from './attributes';
 
 /**
  * This is a descriptor map that contains
@@ -32,12 +32,13 @@ forEach.call(keys(AriaPropNameToAttrNameMap), (propName: string) => {
         HTMLElementOriginalDescriptors[propName] = descriptor;
     }
 });
-forEach.call(defaultDefHTMLPropertyNames, (propName) => {
+
+for (const propName of REFLECTIVE_GLOBAL_PROPERTY_SET) {
     // Note: intentionally using our in-house getPropertyDescriptor instead of getOwnPropertyDescriptor here because
     // in IE11, id property is on Element.prototype instead of HTMLElement, and we suspect that more will fall into
     // this category, so, better to be sure.
     const descriptor = getPropertyDescriptor(HTMLElementPrototype, propName);
     if (!isUndefined(descriptor)) {
         HTMLElementOriginalDescriptors[propName] = descriptor;
     }
-});
+}

packages/@lwc/engine-server/src/__tests__/fixtures/attribute-component-global-html/expected.html

@@ -1,6 +1,6 @@
 <x-attribute-component-global-html>
   <template shadowrootmode="open">
-    <x-child accesskey="A" class="bar foo" contenteditable="true" data-test="test" draggable="true" hidden id="foo" itemprop="foo" spellcheck="true" style="color: red; background: blue;" tabindex="-1">
+    <x-child accesskey="A" class="bar foo" data-test="test" draggable="true" hidden id="foo" spellcheck="true" style="color: red; background: blue;" tabindex="-1">
       <template shadowrootmode="open">
         Passthrough properties:
         <ul>

packages/@lwc/engine-server/src/__tests__/fixtures/attribute-global-html/as-component-prop/undeclared/expected.html

@@ -1,6 +1,6 @@
 <x-component>
   <template shadowrootmode="open">
-    <x-child accesskey="foo" aria-activedescendant="foo" aria-atomic="foo" aria-autocomplete="foo" aria-busy="foo" aria-checked="foo" aria-colcount="foo" aria-colindex="foo" aria-colspan="foo" aria-controls="foo" aria-current="foo" aria-describedby="foo" aria-details="foo" aria-disabled="foo" aria-errormessage="foo" aria-expanded="foo" aria-flowto="foo" aria-haspopup="foo" aria-hidden="foo" aria-invalid="foo" aria-keyshortcuts="foo" aria-label="foo" aria-labelledby="foo" aria-level="foo" aria-live="foo" aria-modal="foo" aria-multiline="foo" aria-multiselectable="foo" aria-orientation="foo" aria-owns="foo" aria-placeholder="foo" aria-posinset="foo" aria-pressed="foo" aria-readonly="foo" aria-relevant="foo" aria-required="foo" aria-roledescription="foo" aria-rowcount="foo" aria-rowindex="foo" aria-rowspan="foo" aria-selected="foo" aria-setsize="foo" aria-sort="foo" aria-valuemax="foo" aria-valuemin="foo" aria-valuenow="foo" aria-valuetext="foo" autocapitalize="foo" autofocus="foo" contenteditable="foo" dir="foo" draggable="foo" enterkeyhint="foo" exportparts="foo" id="foo" inputmode="foo" itemid="foo" itemprop="foo" itemref="foo" itemscope="foo" itemtype="foo" lang="foo" nonce="foo" role="foo" spellcheck="foo" tabindex="foo" title="foo" translate="foo">
+    <x-child accesskey="foo" aria-activedescendant="foo" aria-atomic="foo" aria-autocomplete="foo" aria-busy="foo" aria-checked="foo" aria-colcount="foo" aria-colindex="foo" aria-colspan="foo" aria-controls="foo" aria-current="foo" aria-describedby="foo" aria-details="foo" aria-disabled="foo" aria-errormessage="foo" aria-expanded="foo" aria-flowto="foo" aria-haspopup="foo" aria-hidden="foo" aria-invalid="foo" aria-keyshortcuts="foo" aria-label="foo" aria-labelledby="foo" aria-level="foo" aria-live="foo" aria-modal="foo" aria-multiline="foo" aria-multiselectable="foo" aria-orientation="foo" aria-owns="foo" aria-placeholder="foo" aria-posinset="foo" aria-pressed="foo" aria-readonly="foo" aria-relevant="foo" aria-required="foo" aria-roledescription="foo" aria-rowcount="foo" aria-rowindex="foo" aria-rowspan="foo" aria-selected="foo" aria-setsize="foo" aria-sort="foo" aria-valuemax="foo" aria-valuemin="foo" aria-valuenow="foo" aria-valuetext="foo" dir="foo" draggable="foo" exportparts="foo" id="foo" lang="foo" role="foo" spellcheck="foo" tabindex="foo" title="foo">
       <template shadowrootmode="open">
         <span>
           accessKey: foo

packages/@lwc/engine-server/src/renderer.ts

@@ -10,10 +10,10 @@ import {
     isAriaAttribute,
     isBooleanAttribute,
     isFunction,
-    isGlobalHtmlAttribute,
     isNull,
     isUndefined,
     noop,
+    REFLECTIVE_GLOBAL_PROPERTY_SET,
     StringToLowerCase,
 } from '@lwc/shared';
 
@@ -157,46 +157,46 @@ function attachShadow(element: E, config: ShadowRootInit) {
     return element[HostShadowRootKey] as any;
 }
 
-function getProperty(node: N, key: string) {
-    if (key in node) {
-        return (node as any)[key];
+function getProperty(node: N, propName: string) {
+    if (propName in node) {
+        return (node as any)[propName];
     }
 
     if (node[HostTypeKey] === HostNodeType.Element) {
-        const attrName = htmlPropertyToAttribute(key);
+        const attrName = htmlPropertyToAttribute(propName);
 
         // Handle all the boolean properties.
         if (isBooleanAttribute(attrName, node.tagName)) {
             return getAttribute(node, attrName) ?? false;
         }
 
         // Handle global html attributes and AOM.
-        if (isGlobalHtmlAttribute(attrName) || isAriaAttribute(attrName)) {
+        if (REFLECTIVE_GLOBAL_PROPERTY_SET.has(propName) || isAriaAttribute(attrName)) {
             return getAttribute(node, attrName);
         }
 
         // Handle special elements live bindings. The checked property is already handled above
         // in the boolean case.
-        if (node.tagName === 'input' && key === 'value') {
+        if (node.tagName === 'input' && propName === 'value') {
             return getAttribute(node, 'value') ?? '';
         }
     }
 
     if (process.env.NODE_ENV !== 'production') {
         // eslint-disable-next-line no-console
-        console.error(`Unexpected "${key}" property access from the renderer`);
+        console.error(`Unexpected "${propName}" property access from the renderer`);
     }
 }
 
-function setProperty(node: N, key: string, value: any): void {
-    if (key in node) {
-        return ((node as any)[key] = value);
+function setProperty(node: N, propName: string, value: any): void {
+    if (propName in node) {
+        return ((node as any)[propName] = value);
     }
 
     if (node[HostTypeKey] === HostNodeType.Element) {
-        const attrName = htmlPropertyToAttribute(key);
+        const attrName = htmlPropertyToAttribute(propName);
 
-        if (key === 'innerHTML') {
+        if (propName === 'innerHTML') {
             node[HostChildrenKey] = [
                 {
                     [HostTypeKey]: HostNodeType.Raw,
@@ -228,14 +228,16 @@ function setProperty(node: N, key: string, value: any): void {
         }
 
         // Handle global html attributes and AOM.
-        if (isGlobalHtmlAttribute(attrName) || isAriaAttribute(attrName)) {
+        if (REFLECTIVE_GLOBAL_PROPERTY_SET.has(propName) || isAriaAttribute(attrName)) {
             return setAttribute(node, attrName, value);
         }
     }
 
     if (process.env.NODE_ENV !== 'production') {
         // eslint-disable-next-line no-console
-        console.error(`Unexpected attempt to set "${key}=${value}" property from the renderer`);
+        console.error(
+            `Unexpected attempt to set "${propName}=${value}" property from the renderer`
+        );
     }
 }
 

packages/@lwc/integration-karma/test-hydration/attributes/non-reflective/x/child/child.html

@@ -0,0 +1,3 @@
+<template>
+    <div>contenteditable: {contentEditable}</div>
+</template>

packages/@lwc/integration-karma/test-hydration/attributes/non-reflective/x/main/main.js

@@ -0,0 +1,7 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {
+    value = {
+        contenteditable: 'true',
+    };
+}

packages/@lwc/integration-karma/test-hydration/attributes/reflective/index.spec.js

@@ -0,0 +1,19 @@
+function getAllDivs(target) {
+    const childs = [...target.shadowRoot.querySelectorAll('x-child')];
+    return childs.flatMap((child) => [...child.shadowRoot.querySelectorAll('div')]);
+}
+export default {
+    snapshot(target) {
+        const divs = getAllDivs(target);
+        return { divs };
+    },
+    test(target, snapshots, consoleCalls) {
+        const divs = getAllDivs(target);
+        expect(divs.length).toBe(snapshots.divs.length);
+        for (let i = 0; i < divs.length; i += 1) {
+            expect(divs[i]).toBe(snapshots.divs[i]);
+        }
+        expect(consoleCalls.warn).toHaveSize(0);
+        expect(consoleCalls.error).toHaveSize(0);
+    },
+};

packages/@lwc/integration-karma/test-hydration/attributes/reflective/x/child/child.js

@@ -0,0 +1,3 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {}

packages/@lwc/integration-karma/test-hydration/attributes/reflective/x/main/main.html

@@ -0,0 +1,28 @@
+<template>
+    <x-child
+        accesskey={value.accesskey}
+        aria-label={value.arialabel}
+        dir={value.dir}
+        draggable={value.draggable}
+        hidden={value.hidden}
+        id={value.id}
+        lang={value.lang}
+        role={value.role}
+        spellcheck={value.spellcheck}
+        tabindex={value.tabindex}
+        title={value.title}
+    ></x-child>
+    <x-child
+        accesskey="tata"
+        aria-label="titi"
+        dir="auto"
+        draggable="true"
+        hidden
+        id="tutu"
+        lang="jp"
+        role="scrollbar"
+        spellcheck="false"
+        tabindex="0"
+        title="tete"
+    ></x-child>
+</template>

packages/@lwc/shared/src/html-attributes.ts

@@ -116,6 +116,22 @@ export const SPECIAL_PROPERTY_ATTRIBUTE_MAPPING = /*@__PURE__@*/ new Map([
     ['htmlFor', 'for'],
 ]);
 
+// Global properties that this framework currently reflects. For CSR, the native
+// descriptors for these properties are added from HTMLElement.prototype to
+// LightningElement.prototype. For SSR, in order to match CSR behavior, this
+// list is used to determine which attributes to reflect.
+export const REFLECTIVE_GLOBAL_PROPERTY_SET = /*@__PURE__@*/ new Set([
+    'accessKey',
+    'dir',
+    'draggable',
+    'hidden',
+    'id',
+    'lang',
+    'spellcheck',
+    'tabIndex',
+    'title',
+]);
+
 /**
  * Map associating previously transformed HTML property into HTML attribute.
  */

packages/@lwc/ssr-compiler/src/__tests__/utils/expected-failures.ts

@@ -11,7 +11,6 @@ export const expectedFailures = new Set([
     'attribute-aria/dynamic/index.js',
     'attribute-class/with-scoped-styles-only-in-child/dynamic/index.js',
     'attribute-class/with-scoped-styles/dynamic/index.js',
-    'attribute-component-global-html/index.js',
     'attribute-global-html/as-component-prop/undeclared/index.js',
     'attribute-global-html/as-component-prop/without-@api/index.js',
     'exports/component-as-default/index.js',

packages/@lwc/ssr-runtime/src/reflection.ts

@@ -11,9 +11,9 @@ import {
     entries,
     htmlPropertyToAttribute,
     isAriaAttribute,
-    isGlobalHtmlAttribute,
     isNull,
     keys,
+    REFLECTIVE_GLOBAL_PROPERTY_SET,
     toString,
 } from '@lwc/shared';
 
@@ -37,7 +37,7 @@ export function filterProperties(
         const attrName = htmlPropertyToAttribute(propName);
         if (
             publicFieldSet.has(propName) ||
-            ((isGlobalHtmlAttribute(attrName) || isAriaAttribute(attrName)) &&
+            ((REFLECTIVE_GLOBAL_PROPERTY_SET.has(propName) || isAriaAttribute(attrName)) &&
                 !privateFieldSet.has(propName))
         ) {
             propsToAssign[propName] = props[propName];