Add custom element property support behind a flag

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

@@ -155,6 +155,186 @@ describe('DOMPropertyOperations', () => {
       // Regression test for https://github.com/facebook/react/issues/6119
       expect(container.firstChild.hasAttribute('value')).toBe(false);
     });
+
+    // @gate enableCustomElementPropertySupport
+    it('custom element custom events lowercase', () => {
+      const oncustomevent = jest.fn();
+      function Test() {
+        return <my-custom-element oncustomevent={oncustomevent} />;
+      }
+      const container = document.createElement('div');
+      ReactDOM.render(<Test />, container);
+      container
+        .querySelector('my-custom-element')
+        .dispatchEvent(new Event('customevent'));
+      expect(oncustomevent).toHaveBeenCalledTimes(1);
+    });
+
+    // @gate enableCustomElementPropertySupport
+    it('custom element custom events uppercase', () => {
+      const oncustomevent = jest.fn();
+      function Test() {
+        return <my-custom-element onCustomevent={oncustomevent} />;
+      }
+      const container = document.createElement('div');
+      ReactDOM.render(<Test />, container);
+      container
+        .querySelector('my-custom-element')
+        .dispatchEvent(new Event('Customevent'));
+      expect(oncustomevent).toHaveBeenCalledTimes(1);
+    });
+
+    // @gate enableCustomElementPropertySupport
+    it('custom element custom event with dash in name', () => {
+      const oncustomevent = jest.fn();
+      function Test() {
+        return <my-custom-element oncustom-event={oncustomevent} />;
+      }
+      const container = document.createElement('div');
+      ReactDOM.render(<Test />, container);
+      container
+        .querySelector('my-custom-element')
+        .dispatchEvent(new Event('custom-event'));
+      expect(oncustomevent).toHaveBeenCalledTimes(1);
+    });
+
+    // @gate enableCustomElementPropertySupport
+    it('custom element remove event handler', () => {
+      const oncustomevent = jest.fn();
+      function Test(props) {
+        return <my-custom-element oncustomevent={props.handler} />;
+      }
+
+      const container = document.createElement('div');
+      ReactDOM.render(<Test handler={oncustomevent} />, container);
+      const customElement = container.querySelector('my-custom-element');
+      customElement.dispatchEvent(new Event('customevent'));
+      expect(oncustomevent).toHaveBeenCalledTimes(1);
+
+      ReactDOM.render(<Test handler={false} />, container);
+      // Make sure that the second render didn't create a new element. We want
+      // to make sure removeEventListener actually gets called on the same element.
+      expect(customElement).toBe(customElement);
+      customElement.dispatchEvent(new Event('customevent'));
+      expect(oncustomevent).toHaveBeenCalledTimes(1);
+    });
+
+    it('custom elements shouldnt have non-functions for on* attributes treated as event listeners', () => {
+      const container = document.createElement('div');
+      ReactDOM.render(
+        <my-custom-element
+          onstring={'hello'}
+          onobj={{hello: 'world'}}
+          onarray={['one', 'two']}
+          ontrue={true}
+          onfalse={false}
+        />,
+        container,
+      );
+      const customElement = container.querySelector('my-custom-element');
+      expect(customElement.getAttribute('onstring')).toBe('hello');
+      expect(customElement.getAttribute('onobj')).toBe('[object Object]');
+      expect(customElement.getAttribute('onarray')).toBe('one,two');
+      expect(customElement.getAttribute('ontrue')).toBe('true');
+      expect(customElement.getAttribute('onfalse')).toBe('false');
+    });
+
+    it('custom elements should still have onClick treated like regular elements', () => {
+      let syntheticClickEvent = null;
+      const syntheticEventHandler = jest.fn(
+        event => (syntheticClickEvent = event),
+      );
+      let nativeClickEvent = null;
+      const nativeEventHandler = jest.fn(event => (nativeClickEvent = event));
+      function Test() {
+        return <span onClick={syntheticEventHandler} />;
+      }
+
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      ReactDOM.render(<Test />, container);
+
+      const span = container.querySelector('span');
+      span.onclick = nativeEventHandler;
+      container.querySelector('span').click();
+
+      expect(nativeEventHandler).toHaveBeenCalledTimes(1);
+      expect(syntheticEventHandler).toHaveBeenCalledTimes(1);
+      expect(syntheticClickEvent.nativeEvent).toBe(nativeClickEvent);
+    });
+
+    // @gate enableCustomElementPropertySupport
+    it('custom elements should allow custom events with capture event listeners', () => {
+      const oncustomevent = jest.fn();
+      function Test() {
+        return <my-custom-element oncustomeventCapture={oncustomevent} />;
+      }
+      const container = document.createElement('div');
+      ReactDOM.render(<Test />, container);
+      container
+        .querySelector('my-custom-element')
+        .dispatchEvent(new Event('customevent', {bubbles: false}));
+      expect(oncustomevent).toHaveBeenCalledTimes(1);
+    });
+
+    it('innerHTML should not work on custom elements', () => {
+      const container = document.createElement('div');
+      ReactDOM.render(<my-custom-element innerHTML="foo" />, container);
+      const customElement = container.querySelector('my-custom-element');
+      expect(customElement.getAttribute('innerHTML')).toBe(null);
+      expect(customElement.hasChildNodes()).toBe(false);
+    });
+
+    // @gate enableCustomElementPropertySupport
+    it('innerText should not work on custom elements', () => {
+      const container = document.createElement('div');
+      ReactDOM.render(<my-custom-element innerText="foo" />, container);
+      const customElement = container.querySelector('my-custom-element');
+      expect(customElement.getAttribute('innerText')).toBe(null);
+      expect(customElement.hasChildNodes()).toBe(false);
+    });
+
+    // @gate enableCustomElementPropertySupport
+    it('textContent should not work on custom elements', () => {
+      const container = document.createElement('div');
+      ReactDOM.render(<my-custom-element textContent="foo" />, container);
+      const customElement = container.querySelector('my-custom-element');
+      expect(customElement.getAttribute('textContent')).toBe(null);
+      expect(customElement.hasChildNodes()).toBe(false);
+    });
+
+    // @gate enableCustomElementPropertySupport
+    it('values should not be converted to booleans when assigning into custom elements', () => {
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      ReactDOM.render(<my-custom-element />, container);
+      const customElement = container.querySelector('my-custom-element');
+      customElement.foo = null;
+
+      // true => string
+      ReactDOM.render(<my-custom-element foo={true} />, container);
+      expect(customElement.foo).toBe(true);
+      ReactDOM.render(<my-custom-element foo="bar" />, container);
+      expect(customElement.foo).toBe('bar');
+
+      // false => string
+      ReactDOM.render(<my-custom-element foo={false} />, container);
+      expect(customElement.foo).toBe(false);
+      ReactDOM.render(<my-custom-element foo="bar" />, container);
+      expect(customElement.foo).toBe('bar');
+
+      // true => null
+      ReactDOM.render(<my-custom-element foo={true} />, container);
+      expect(customElement.foo).toBe(true);
+      ReactDOM.render(<my-custom-element foo={null} />, container);
+      expect(customElement.foo).toBe(null);
+
+      // false => null
+      ReactDOM.render(<my-custom-element foo={false} />, container);
+      expect(customElement.foo).toBe(false);
+      ReactDOM.render(<my-custom-element foo={null} />, container);
+      expect(customElement.foo).toBe(null);
+    });
   });
 
   describe('deleteValueForProperty', () => {

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

@@ -10,6 +10,7 @@
 'use strict';
 
 const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
+const ReactFeatureFlags = require('shared/ReactFeatureFlags');
 
 let React;
 let ReactDOM;
@@ -36,6 +37,7 @@ const {
   resetModules,
   itRenders,
   clientCleanRender,
+  clientRenderOnServerString,
 } = ReactDOMServerIntegrationUtils(initModules);
 
 describe('ReactDOMServerIntegration', () => {
@@ -657,17 +659,28 @@ describe('ReactDOMServerIntegration', () => {
     });
 
     itRenders('className for custom elements', async render => {
-      const e = await render(<div is="custom-element" className="test" />, 0);
-      expect(e.getAttribute('className')).toBe('test');
+      if (ReactFeatureFlags.enableCustomElementPropertySupport) {
+        const e = await render(
+          <div is="custom-element" className="test" />,
+          render === clientRenderOnServerString ? 1 : 0,
+        );
+        expect(e.getAttribute('className')).toBe(null);
+        expect(e.getAttribute('class')).toBe('test');
+      } else {
+        const e = await render(<div is="custom-element" className="test" />, 0);
+        expect(e.getAttribute('className')).toBe('test');
+      }
     });
 
     itRenders('htmlFor attribute on custom elements', async render => {
       const e = await render(<div is="custom-element" htmlFor="test" />);
       expect(e.getAttribute('htmlFor')).toBe('test');
+      expect(e.getAttribute('for')).toBe(null);
     });
 
     itRenders('for attribute on custom elements', async render => {
       const e = await render(<div is="custom-element" for="test" />);
+      expect(e.getAttribute('htmlFor')).toBe(null);
       expect(e.getAttribute('for')).toBe('test');
     });
 

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

@@ -531,4 +531,31 @@ describe('ReactDOMServerHydration', () => {
       'Warning: Did not expect server HTML to contain a <p> in <div>',
     );
   });
+
+  it('should warn when hydrating read-only properties', () => {
+    const readOnlyProperties = [
+      'offsetParent',
+      'offsetTop',
+      'offsetLeft',
+      'offsetWidth',
+      'offsetHeight',
+      'isContentEditable',
+      'outerText',
+      'outerHTML',
+    ];
+    readOnlyProperties.forEach(readOnlyProperty => {
+      const props = {};
+      props[readOnlyProperty] = 'hello';
+      const jsx = React.createElement('my-custom-element', props);
+      const element = document.createElement('div');
+      element.innerHTML = ReactDOMServer.renderToString(jsx);
+      if (gate(flags => flags.enableCustomElementPropertySupport)) {
+        expect(() => ReactDOM.hydrate(jsx, element)).toErrorDev(
+          `Warning: Assignment to read-only property will result in a no-op: \`${readOnlyProperty}\``,
+        );
+      } else {
+        ReactDOM.hydrate(jsx, element);
+      }
+    });
+  });
 });

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

@@ -19,8 +19,10 @@ import sanitizeURL from '../shared/sanitizeURL';
 import {
   disableJavaScriptURLs,
   enableTrustedTypesIntegration,
+  enableCustomElementPropertySupport,
 } from 'shared/ReactFeatureFlags';
 import {checkAttributeStringCoercion} from 'shared/CheckStringCoercion';
+import {getCustomElementEventHandlersFromNode} from './ReactDOMComponentTree';
 
 import type {PropertyInfo} from '../shared/DOMProperty';
 
@@ -149,9 +151,52 @@ export function setValueForProperty(
   if (shouldIgnoreAttribute(name, propertyInfo, isCustomComponentTag)) {
     return;
   }
+
+  if (
+    enableCustomElementPropertySupport &&
+    isCustomComponentTag &&
+    name[0] === 'o' &&
+    name[1] === 'n'
+  ) {
+    let eventName = name.replace(/Capture$/, '');
+    const useCapture = name !== eventName;
+    const nameLower = eventName.toLowerCase();
+    if (nameLower in node) {
+      eventName = nameLower;
+    }
+    eventName = eventName.slice(2);
+
+    const listenersObjName = eventName + (useCapture ? 'true' : 'false');
+    const listeners = getCustomElementEventHandlersFromNode(node);
+    const alreadyHadListener = listeners[listenersObjName];
+
+    if (typeof value === 'function' || alreadyHadListener) {
+      listeners[listenersObjName] = value;
+      const proxy = useCapture ? fireEventProxyCapture : fireEventProxy;
+      if (value) {
+        if (!alreadyHadListener) {
+          node.addEventListener(eventName, proxy, useCapture);
+        }
+      } else {
+        node.removeEventListener(eventName, proxy, useCapture);
+      }
+      return;
+    }
+  }
+
   if (shouldRemoveAttribute(name, value, propertyInfo, isCustomComponentTag)) {
     value = null;
   }
+
+  if (
+    enableCustomElementPropertySupport &&
+    isCustomComponentTag &&
+    name in (node: any)
+  ) {
+    (node: any)[name] = value;
+    return;
+  }
+
   // If the prop isn't in the special list, treat it as a simple attribute.
   if (isCustomComponentTag || propertyInfo === null) {
     if (isAttributeNameSafe(name)) {
@@ -216,3 +261,11 @@ export function setValueForProperty(
     }
   }
 }
+
+function fireEventProxy(e: Event) {
+  getCustomElementEventHandlersFromNode(this)[e.type + 'false'](e);
+}
+
+function fireEventProxyCapture(e: Event) {
+  getCustomElementEventHandlersFromNode(this)[e.type + 'true'](e);
+}

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

@@ -69,7 +69,10 @@ import {validateProperties as validateARIAProperties} from '../shared/ReactDOMIn
 import {validateProperties as validateInputProperties} from '../shared/ReactDOMNullInputValuePropHook';
 import {validateProperties as validateUnknownProperties} from '../shared/ReactDOMUnknownPropertyHook';
 
-import {enableTrustedTypesIntegration} from 'shared/ReactFeatureFlags';
+import {
+  enableTrustedTypesIntegration,
+  enableCustomElementPropertySupport,
+} from 'shared/ReactFeatureFlags';
 import {
   mediaEventTypes,
   listenToNonDelegatedEvent,
@@ -998,7 +1001,10 @@ export function diffHydratedProperties(
     ) {
       // Validate that the properties correspond to their expected values.
       let serverValue;
-      const propertyInfo = getPropertyInfo(propKey);
+      const propertyInfo =
+        isCustomComponentTag && enableCustomElementPropertySupport
+          ? null
+          : getPropertyInfo(propKey);
       if (suppressHydrationWarning) {
         // Don't bother comparing. We're ignoring all these warnings.
       } else if (
@@ -1031,7 +1037,27 @@ export function diffHydratedProperties(
             warnForPropDifference(propKey, serverValue, expectedStyle);
           }
         }
-      } else if (isCustomComponentTag) {
+      } else if (
+        enableCustomElementPropertySupport &&
+        isCustomComponentTag &&
+        (propKey === 'offsetParent' ||
+          propKey === 'offsetTop' ||
+          propKey === 'offsetLeft' ||
+          propKey === 'offsetWidth' ||
+          propKey === 'offsetHeight' ||
+          propKey === 'isContentEditable' ||
+          propKey === 'outerText' ||
+          propKey === 'outerHTML')
+      ) {
+        // $FlowFixMe - Should be inferred as not undefined.
+        extraAttributeNames.delete(propKey.toLowerCase());
+        if (__DEV__) {
+          console.error(
+            'Assignment to read-only property will result in a no-op: `%s`',
+            propKey,
+          );
+        }
+      } else if (isCustomComponentTag && !enableCustomElementPropertySupport) {
         // $FlowFixMe - Should be inferred as not undefined.
         extraAttributeNames.delete(propKey.toLowerCase());
         serverValue = getValueForAttribute(domElement, propKey, nextProp);