¿React viola los estándares DOM?

Hay un sitio bastante popular https://custom-elements-everywhere.com que muestra cómo funcionan los componentes web en diferentes marcos. Casi todos los frameworks tienen un hermoso resultado del 100% allí, pero React tiene un alarmante 71% allí:

Muchos usuarios miran esta página y concluyen que React no solo soporta mal los componentes web, sino también la API DOM en general. ¿Es tan? ¿Es realmente malo?

¡Vamos a resolverlo!

Analizando pruebas

La calificación se calcula en función de las pruebas. Aquí es donde se muestra el resultado . Hay 15 pruebas en total, 7 de ellas están rotas, por lo que obtenemos una calificación tan poco importante. Las siguientes pruebas están rotas:

• atributos y propiedades

  
  
  
  
  

  • pasará datos de matriz como una propiedad

    
    
    
    
    

  • pasará los datos del objeto como una propiedad

    
    
    
    
    

• eventos

  
  
  
  
  

  • puede escuchar declarativamente un evento DOM en minúsculas enviado por un elemento personalizado

    
    
    
    
    

  • puede escuchar declarativamente un evento DOM de kebab-case enviado por un elemento personalizado

    
    
    
    
    

  • puede escuchar declarativamente un evento DOM camelCase enviado por un elemento personalizado

    
    
    
    
    

  • puede escuchar declarativamente un evento DOM CAPScase enviado por un elemento personalizado

    
    
    
    
    

  • puede escuchar declarativamente un evento DOM de PascalCase enviado por un elemento personalizado

    
    
    
    
    

, , . . 71% , 90% 15% , - .

, - , . - Github:

• - React.

  
  
  
  
  

• .

  
  
  
  
  

" " ? .

:

<input type="checkbox" checked={checked} onChange={handleChange} />
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

. - :

<custom-checkbox checked={checked} onChange={handleChange} />
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, on*



React . ( ) . , Sebastian Markbåge ( React) . :

, . , touch- , , , , "" , .. , .

, , . , , , . , . DOM-, _ _ , . DOM- (refs) .

, React DOM-, , React ( Concurrent mode), Refs API:

function CustomCheckbox({ checked, handleChange }) {
	const ref = useRef();

	useEffect(() => {
		ref.current.addEventListener("change", handleChange);
		return () => ref.current.removeEventListener("change", handleChange);
  }, [handleChange]);
  
	return <custom-checkbox ref={ref} />;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, custom-elements-everywhere? , . , , / .

?

" -" . , - JSX . , ( JSON.stringify) :

<user-view user="{user}" />
<!--  <user-view user="[object Object]" /> -->
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

. React DOM - . DOM- , . React- :

function UserView({ user }) {
	const ref = useRef();
	//      user
	useEffect(() => (ref.current.user = user), [user]);

	return <user-view ref={ref} />;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, , , JSX , :

/** @jsx h */
import { createElement } from "react";
import val from "@skatejs/val";

const h = val(createElement);

function Checkbox({ checked, handleChange }) {
	// !
	return <custom-checkbox checked={checked} onChange={handleChange} />;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, , , Google Developer Advocates , , . , React DOM ( ).

100%

100% . ? !. ( new CustomEvent('!')



)?

. , Angular . materials-components-web : MDCSlider:change



. Google (Angular) (Material design). , – DOM-.

, , - React 71% , Angular 100%. .

, . . , DOM – . , custom-elements-everywhere .

c custom-elements-everywhere, React DOM API -. , :

1. onChange React DOM- change. , [Github issue](https://github.com/facebook/react/issues/9657). React, React - , , onChange React – .

   
   
   
   
   

2. onFocus/onBlur . DOM API, focus, , . React , focusin. issue.

   
   
   
   
   

3. . , , . Portal API React-. DOM-, .

   
   
   
   
   

, . , , , React , () - DOM API , React (, react-focus-lock).

- . label. for id :

<label for="name"> </label>
<input id="name" name="firstName" />
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

. React :

const id = useUniqueId();

<Label for={id}> </Label>
<Input id={id} name="firstName" />
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Label Input html- .

React, -:

<custom-label for="name"> </custom-label>
<custom-input id="name" name="firstName" />
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

¡Nuestro cuadro de texto está roto! La etiqueta de etiqueta interna no pudo comunicarse con la etiqueta de entrada porque están en diferentes instancias de ShadowDOM. Existe una propuesta diseñada para solucionar este problema , pero aún está en pañales y no funciona en ninguno de los navegadores (recuerde, los componentes web se han desarrollado durante casi 10 años). Y en este momento , no será posible poner en práctica custom-label



que custom-input



en la forma de componentes web, observando los requisitos de accesibilidad.

Así que piense por sí mismo qué tecnología es una verdadera violación de los estándares web.