Emit warning when assigning to read only properties in client

Author: josepharhar

packages/react-dom/src/__tests__/DOMPropertyOperations-test.js

@@ -289,6 +289,28 @@ describe('DOMPropertyOperations', () => {
       expect(customElement.getAttribute('textContent')).toBe(null);
       expect(customElement.hasChildNodes()).toBe(false);
     });
+
+    // @gate enableCustomElementPropertySupport
+    it('Assigning to read-only properties should emit warnings for custom elements', () => {
+      const readOnlyProperties = [
+        'isContentEditable',
+        'offsetParent',
+        'offsetTop',
+        'offsetLeft',
+        'offsetWidth',
+        'offsetHeight'
+      ];
+      for (const readOnlyProperty of readOnlyProperties) {
+        const container = document.createElement('div');
+        const props = {};
+        props[readOnlyProperty] = 'foo';
+        expect(() => {
+          ReactDOM.render(React.createElement('my-custom-element', props), container);
+        }).toErrorDev(
+          `Assigning to the read-only property \`${readOnlyProperty}\` won't have any effect on the element.`
+        );
+      }
+    });
   });
 
   describe('deleteValueForProperty', () => {

packages/react-dom/src/client/DOMPropertyOperations.js

@@ -176,6 +176,20 @@ export function setValueForProperty(
     }
   }
 
+  if (__DEV__ && enableCustomElementPropertySupport && isCustomComponentTag) {
+    const readOnlyProperties = [
+      'isContentEditable',
+      'offsetParent',
+      'offsetTop',
+      'offsetLeft',
+      'offsetWidth',
+      'offsetHeight'
+    ];
+    if (readOnlyProperties.includes(name)) {
+      console.error("Assigning to the read-only property `%s` won't have any effect on the element.", name);
+    }
+  }
+
   if (shouldRemoveAttribute(name, value, propertyInfo, isCustomComponentTag)) {
     value = null;
   }